/*
Theme Name:   PanamCham
Theme URI:    https://panamcham.com
Description:  Tema hijo de Bricks para el sitio de AmCham Panamá. Desarrollado por Yunke.
Author:       Yunke
Author URI:   https://yunke.com.pa
Template:     bricks
Version:      0.148.0
Text Domain:  panamcham
*/

/* =========================================================
   1. Tokens
   Colores: viven en la paleta «AmCham» de Bricks (--amcham-color-*).
   ========================================================= */
:root {
  /* Tipografía del Figma (verificado en 897-116 y 493-1018 con la API):
     - Avenir Next (Demi Bold 600 / Bold 700) SOLO en títulos, menú, botones, etiquetas,
       eyebrows, cifras, títulos de tarjetas y del megamenú, títulos del footer.
     - Helvetica Regular en TODO el texto corrido: párrafos, descripciones, fechas,
       meta de eventos, enlaces del footer, etiquetas de las cifras.
     Avenir Next va AUTOALOJADA en assets/fonts/ (4 pesos .woff2 subsetados), declarada en
     assets/fuentes.css con el MISMO nombre de familia, asi que ninguna regla de aqui cambia.
     Helvetica sigue siendo del sistema (en Windows cae a Arial, metricamente compatible). */
  --amcham-font-heading: "Avenir Next", "Avenir Next LT Pro", "Avenir LT Pro", Avenir, Figtree, system-ui, -apple-system, sans-serif;
  --amcham-font-body: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --amcham-font: var(--amcham-font-body);
  --amcham-header-h: 275px;   /* Johann, 13 sep 2026 (antes 281 = 269 de banda + 12 de línea, ya retirada) */
  --amcham-bg: #F7F7F7;        /* Base/Bg White del Figma */
  --amcham-ink: #222222;
  /* Hover «un paso más claro» (Johann, 18 oct 2026): rojo → rojo más claro, azul → azul más claro, navy → blue.
     Los rellenos (outline → navy, chips → blue) y los títulos neutros → navy/blue no cambian. */
  --amcham-color-red-hover: #FF2E43;    /* red #FF001A + 18 % blanco */
  --amcham-color-blue-hover: #2688C9;   /* blue #0073C0 + 15 % blanco */
  /* Encabezado → «Línea degradada» (inc/bricks-controles.php): Bricks pinta el ::after con var(--amcham-linea-<opción>) */
  --amcham-linea-marca: linear-gradient(90deg, var(--amcham-color-red), var(--amcham-color-blue));
  --amcham-linea-platinum: linear-gradient(90deg, #7D8E98, #C7DAE4);
  --amcham-linea-gold: linear-gradient(90deg, #B69045, #EBDAB7);
  --amcham-linea-pos-centro: auto;
  --amcham-linea-pos-derecha: auto 0;
  /* Texto básico → «Estilo AmCham» (eyebrow): color por opción */
  --amcham-eyebrow-navy: var(--amcham-color-navy);
  --amcham-eyebrow-gris: #858585;
  --amcham-eyebrow-blanco: rgb(255 255 255 / .6);
  --amcham-muted: #767676;
  --amcham-footer-bg: #1C407D;   /* Figma Home 897:159 (dark-blue). Quiénes Somos 493:1019 usa #1E3848: versión vieja */
  --amcham-shadow: 0 6px 5px rgb(0 0 0 / .05);
  --amcham-radius: 10px;
  --amcham-navbar-h: 100px;
  /* Contenedor fluido (Johann, 7 sep): 1240 hasta 1440 de viewport (= Figma), crece con la pantalla y topa en 1440 (≈ 1675 de viewport).
     Las medidas del Figma que sumaban 1240 están abajo en % / fr para que escalen con él. */
  --amcham-container: clamp(1240px, 86vw, 1440px);
}
/* Bricks imprime `.brxe-container {width:1240px}` DESPUÉS de esta hoja (inline «bricks-frontend-inline-inline»): doble clase para ganar */
.brxe-container.brxe-container, #brx-content.wordpress.wordpress { width: var(--amcham-container); }

body {
  font-family: var(--amcham-font-body);
}

/* Avenir Next: todo lo que en el Figma lleva peso (Demi Bold / Bold) */
h1, h2, h3, h4, h5, h6,
.page-title,
.section-title__text,
.eyebrow,
.btn,
.nav-main a, .nav-main .brx-submenu-toggle > span,
.navbar__lang, .navbar__cta, .navbar__search,
.mega__eyebrow, .mega__title, .mega__cta, .mega__item-title,
.footer-menu__title, .site-footer__privacy, .site-footer__copy,
.home-hero__title, .home-stats__num,
.event-card__chip, .event-card__title, .event-card__more,
.news-card__title,
.ad-card__label, .ad-card__title,
.home-discover__title {
  font-family: var(--amcham-font-heading);
}
/* descripción del megamenú va dentro del <a>: vuelve a Helvetica */
.mega__item-desc { font-family: var(--amcham-font-body); }

/* =========================================================
   2. Header: banda con gradiente, marca y línea
   ========================================================= */
.site-header {
  position: relative;
  overflow: visible;            /* el megamenú sale de la banda; la marca se recorta en .site-header__bg */
  background-image: linear-gradient(186deg, var(--amcham-color-light-blue) 22%, var(--amcham-color-dark-blue) 94%);
}
/* Línea inferior rojo → azul del header: retirada (Johann, 13 sep 2026). */
.site-header__inner {
  position: relative;
  height: 100%;
}
/* capa de fondo: ocupa la banda completa (los 100px de aire a cada lado incluidos) y recorta la marca */
.site-header__bg {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, calc(100% + 200px));   /* contenedor + 100px por lado, sin pasarse del viewport */
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* marca (A con estrella) anclada al borde derecho: a 1440 coincide con el viewport */
.site-header__bg::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -424px;
  width: 926px;
  aspect-ratio: 1298 / 1265;
  background: url(/wp-content/uploads/2026/09/amcham-mark-hero.webp) center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.site-header__inner > * {
  position: relative;
  z-index: 1;
}
.site-header__inner > .site-header__bg { position: absolute; z-index: 0; }
.site-header__inner > .navbar { z-index: 3; }   /* el megamenú por encima del título y la línea */
@media (max-width: 1439px) {
  .site-header__bg::after {
    right: 0;
    top: -154%;
    width: 64.3%;
  }
}

/* =========================================================
   3. Navbar  (todo el layout vive aquí; los elementos de Bricks solo llevan clase)
   ========================================================= */
.site-header { height: var(--amcham-header-h); margin-bottom: 60px; }
.site-header__inner { display: flex; flex-direction: column; row-gap: 0; }

.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: var(--amcham-navbar-h);
  width: 100%;
}
.navbar__logo img {
  width: 190px;
  height: auto;
  display: block;
}
/* Los blocks de Bricks nacen con width:100%; aquí son grupos en línea */
.navbar__right, .navbar__actions, .navbar__utils, .navbar__lang, .nav-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  flex-shrink: 0;
}
.navbar__right   { column-gap: 40px; }   /* Johann (13 sep): 64 → 40 */
.navbar__actions { column-gap: 40px; }   /* Johann (13 sep): 38 → 40 */
.navbar__utils   { column-gap: 33px; }
.navbar__lang    { column-gap: 5px; color: var(--amcham-color-white); }
.navbar__lang span, .navbar__lang .brxe-text-basic {
  color: var(--amcham-color-white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.navbar__lang svg { width: 16px; height: 16px; display: block; }
.navbar__search { color: var(--amcham-color-white); display: block; }
.navbar__search, .navbar__search svg { width: 17px; height: 17px; display: block; }   /* .navbar__search es el <a> (text-basic de Bricks) con {amcham_icono:buscar} adentro; el globo es {amcham_icono:globo} */

/* Menú principal (Nav nestable) */
.nav-main .brx-nav-nested-items {
  gap: 40px;
  flex-wrap: nowrap;
}
/* Puente invisible entre el ítem y el panel: el cursor baja del texto al megamenú sin
   salir del <li>, así el hover no se pierde en los ~40px de banda que hay en medio. */
.nav-main .brx-nav-nested-items > li.brxe-dropdown { position: relative; }
.nav-main .brx-nav-nested-items > li.brxe-dropdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: calc(var(--amcham-navbar-h) / 2 - 8px);   /* del borde inferior del ítem al borde de la barra */
}
.nav-main .brx-nav-nested-items > li > a,
.nav-main .brx-submenu-toggle > a,
.nav-main .brx-submenu-toggle > span {
  color: var(--amcham-color-white);
  font-size: 17px;   /* Figma: 15; Johann pidió 16 (6 sep) y 17 (13 sep) */
  font-weight: 600;
  line-height: 1.5;
  padding: 0;
  white-space: nowrap;
}
.nav-main .brx-submenu-toggle {
  gap: 8px;
  align-items: center;
}
.nav-main .brx-submenu-toggle button {
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--amcham-color-white);
}
.nav-main .brx-submenu-toggle button > svg {
  width: 10px;
  height: auto;
  transition: transform .2s;
}
/* Chevron del menú en Font Awesome (15 sep): Figma = chevron de trazo fino con puntas rectas (12×7, trazo 1.5).
   El más parecido del catálogo (proporción y grosor) es fa-sharp fa-solid chevron-down (slot chevron-abajo). El glifo
   ocupa el 91 % del ancho del viewBox (512): caja de 11 px → glifo de 10 × 5.8 px, lo mismo que medía el SVG anterior.
   El glifo va 7 % por debajo del centro de su caja: margin-top lo sube y transform-origin gira sobre el glifo.
   Bricks trae svg:not([width]){min-width:1em;min-height:1em} y el <svg> de FA no lleva atributo width:
   sin min-width/min-height:0 el ícono nunca baja de 16 × 16 px. */
.nav-main .brx-submenu-toggle button > svg.svg-inline--fa { width: 11px; height: 11px; min-width: 0; min-height: 0; flex: 0 0 11px; margin-top: -1.5px; transform-origin: 50% 57%; }
.nav-main .brxe-dropdown.open > .brx-submenu-toggle button > svg,
.nav-main .brxe-dropdown:hover > .brx-submenu-toggle button > svg {
  transform: rotate(180deg);
}

/* Megamenú (Figma: Components 550:1823–1827, 1243 × 312) */
/* Cerrado no debe ocupar sitio: los paneles ocultos (visibility) seguían creando scroll horizontal bajo 1440 */
.nav-main .brxe-dropdown:not(.open) > .mega { display: none; }
.nav-main .brxe-dropdown > .mega {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 56px;
  min-height: 312px;
  padding: 40px 20px 40px 50px;  /* derecha 20 (antes 50): la 2.ª columna ganó ese aire (Johann, 19 oct) */
  background: var(--amcham-color-white);
  border-radius: 10px;
  box-shadow: 0 6px 10px rgb(0 0 0 / .05);
  margin-top: 0;
  overflow: hidden;            /* Chrome suma el padding final al scroll y creaba desplazamiento horizontal */
}
.mega__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 385px;                /* 419 → 385 (Johann, 19 oct): el mínimo con todos los títulos en 2 líneas; a 380 «Servicios e información…» (Negocios) pasa a 3 */
  flex-shrink: 0;
}
.mega__eyebrow {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: #9E9E9E;
  margin: 0 0 6px;
}
.mega__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: #222222;
  margin: 0 0 18px;
}
.nav-main .mega__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--amcham-color-blue);
  font-size: 17px;   /* Johann (13 sep): 16 → 17 en todo el menú */
  font-weight: 600;
  line-height: 1.5;
  padding: 0;
}
.nav-main .mega__cta .icon { display: inline-flex; }
.nav-main .mega__cta svg { width: 20px; height: auto; transition: transform .2s; }
/* Flecha del CTA (slot flecha = fa-regular arrow-right-long, 15 sep): Figma 22×12 de trazo redondeado → glifo de 20 × 11 px */
.nav-main .mega__cta svg.svg-inline--fa { width: 20px; height: 17.78px; min-width: 0; min-height: 0; }   /* viewBox 576×512 */
.nav-main .mega__cta:hover svg { transform: translateX(4px); }
.mega__cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;             /* una sola línea, pero con wrap aplica align-content: */
  align-items: flex-start;     /* …las dos columnas arrancan en la misma línea (las filas coinciden) */
  align-content: center;       /* …y el bloque de enlaces queda centrado con la intro (Johann, 8 sep) */
  column-gap: 40px;            /* Figma: col 306 + gap 80, pero las descripciones miden 333; 53→40 el 19 oct */
  min-height: 230px;
  padding-left: 56px;
  border-left: 1px solid #E6E6E6;
  flex: 1 1 0;                 /* ocupa lo que la intro deja (19 oct) */
  min-width: 0;
}
.mega__col {
  display: flex;
  flex-direction: column;
  width: 333px;
}
.mega__col + .mega__col { width: auto; flex: 1 1 0; min-width: 221px; }  /* antes 221 fijos: «Nuestro compromiso con la sostenibilidad» partía en 2 líneas; ahora 266 a 1240 (19 oct) */
.mega__cols--gap26 .mega__col { row-gap: 22px; }
.mega__cols--gap36 .mega__col { row-gap: 32px; }
.nav-main .mega__item {
  display: block;
  color: inherit;
  text-decoration: none;
}
.mega__item-title {
  font-size: 17px;   /* Figma: 15; Johann pidió 16 (6 sep) y 17 (13 sep) */
  font-weight: 600;
  line-height: 1.5;
  color: #222222;
  transition: color .15s;
}
.mega__item-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #767676;
  margin-top: 3px;
}
.nav-main .mega__item:hover .mega__item-title { color: var(--amcham-color-blue); }

/* Botón Contáctenos */
.navbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;   /* Johann (13 sep): mismas medidas que .btn (42 · 8/19 · 16/600), antes 111 de ancho y 14px */
  height: 42px;
  padding: 8px 19px;
  border: 0;
  border-radius: 4px;
  background-color: var(--amcham-color-navy);
  color: var(--amcham-color-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s;
}
.navbar__cta:hover {
  background-color: var(--amcham-color-blue);
  color: var(--amcham-color-white);
}
/* Interiores (banda azul): el CTA va en rojo — Figma WIP «Noticias» 1848:421 (#D3002A).
   El home (body.header-claro) lo mantiene navy, como en el Figma del header claro. */
body:not(.header-claro) .navbar__cta {
  background-color: #d3002a;
  color: var(--amcham-color-white);
}
body:not(.header-claro) .navbar__cta:hover {
  background-color: var(--amcham-color-red);
  color: var(--amcham-color-white);
}

/* =========================================================
   4. Título de página
   ========================================================= */
.page-title {                 /* tamaño, peso e interlínea: Bricks → Theme Styles → Tipografía → H1 */
  color: var(--amcham-color-white);
  margin: 74px 0 0;
}
/* Migas de pan dentro de la banda, en todas las vistas salvo la portada (inc/migas.php las inyecta antes del h1 desde el header global).
   Helvetica 13 al 70 %, la actual en blanco subrayada; 37 + 20 (migas) + 17 = los 74 px de siempre → la banda no crece en escritorio
   (.crumbs.crumbs--banda: la regla base .crumbs de la sección 7 viene después y pesa igual; así gana esta). */
.crumbs.crumbs--banda { display: block; max-width: 100%; margin: 37px 0 0; font-family: var(--amcham-font-body); font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs.crumbs--banda a { color: inherit; text-decoration: none; }
.crumbs.crumbs--banda a:hover { color: #fff; text-decoration: none; }
.crumbs--banda .crumbs__sep { margin: 0 8px; }
.crumbs--banda .crumbs__current { color: #fff; text-decoration: none; }   /* sin subrayado (Johann, 19 sep): el blanco sólido ya la distingue */
.crumbs--banda + .page-title { margin-top: 17px; }

/* =========================================================
   5. Responsive
   Desktop completo ≥1280 · compacto 1024–1279 · menú móvil ≤1023
   ========================================================= */

/* Márgenes laterales de TODO el sitio cuando el contenedor (1240) ya no cabe con aire */
@media (max-width: 1339px) {
  .brxe-container, .pagina__inner { padding-inline: 20px; }   /* .pagina__inner («Página interior») no tenía aire lateral: 7 oct 2026 */
}

/* Tablet horizontal / laptop chico: mismo header, más apretado */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar__logo img { width: 160px; }
  .navbar__right { column-gap: 32px; }
  .nav-main .brx-nav-nested-items { gap: 24px; }
  .nav-main .brx-nav-nested-items > li > a,
  .nav-main .brx-submenu-toggle > span { font-size: 14px; }
  .navbar__actions { column-gap: 24px; }
  .navbar__utils { column-gap: 24px; }
  .navbar__cta { width: auto; padding-inline: 14px; }

  /* megamenú compacto: Bricks lo mide con el contenedor, que aquí ocupa todo el ancho → panel de borde a borde, sin radio */
  .nav-main .brxe-dropdown > .mega { padding: 32px 36px; column-gap: 36px; min-height: 0; border-radius: 0 0 10px 10px; }
  .mega__intro { width: 280px; }
  .mega__title { font-size: 24px; }
  .mega__cols { padding-left: 36px; column-gap: 32px; min-height: 200px; flex: 1 1 0; min-width: 0; }
  .mega__item-desc { overflow-wrap: anywhere; }
  .mega__col, .mega__col + .mega__col { width: auto; flex: 1 1 0; }
}

/* Botón del panel móvil: oculto en desktop */
.nav-main__cta-item, .nav-main__head, .nav-main__search, .nav-main__lang { display: none; }   /* solo existen en el panel móvil */

/* ---------- Menú móvil (≤1023) ---------- */
@media (max-width: 1023px) {
  /* equivalente al CSS que Bricks genera para su Nav (nestable) en el breakpoint móvil */
  .nav-main .brx-toggle-div,
  .nav-main > .brxe-toggle { display: inline-flex; }
  .nav-main .brx-nav-nested-items {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    z-index: 1001;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-wrap: nowrap;
  }
  .nav-main.brx-open .brx-nav-nested-items { opacity: 1; visibility: visible; }

  /* Barra móvil = cabecera del panel (Figma 936:530 / 936:720): 100 de alto, logo 171×57 en (20,26), hamburguesa 26×18 y X 21×21 centradas en y=54.5 */
  .site-header { --amcham-navbar-h: 100px; }
  .navbar { height: var(--amcham-navbar-h); padding-top: 9px; }
  .navbar__logo img { width: 171px; }          /* Figma mobile: 171 × 57 */
  .navbar__right { column-gap: 0; }
  .navbar__actions { display: none; }          /* CTA/idioma/búsqueda salen de la barra */

  /* hamburguesa: 26 × 18, tres líneas blancas (Figma mobile) */
  .navbar__toggle {
    display: inline-flex;
    width: 26px;
    height: 18px;
    padding: 0;
    color: var(--amcham-color-white);
    background: none;
    border: 0;
  }
  .navbar__toggle .brxa-wrap { width: 26px; height: 18px; }
  .navbar__toggle .brxa-inner,
  .navbar__toggle .brxa-inner::before,
  .navbar__toggle .brxa-inner::after {
    height: 2px;
    width: 26px;
    background-color: currentColor;
    border-radius: 0;
  }
  .navbar__toggle .brxa-inner::before { top: -8px; }
  .navbar__toggle .brxa-inner::after  { bottom: -8px; }

  /* ---------- Panel móvil (Figma 936:658 + estado abierto 1110:1077) ---------- */
  .nav-main .brx-nav-nested-items {
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 20px 42px;
    gap: 0;
    background: var(--amcham-color-navy);
    color: var(--amcham-color-white);
  }
  .nav-main .brx-nav-nested-items > li { width: 100%; border-bottom: 1px solid rgb(255 255 255 / .2); }

  /* Con la barra de administracion de WP el contenido baja 46px (32 desde 783) pero el panel es
     fixed en top:0: el logo y la X quedaban 46px mas arriba que los de la barra, y tapados por la
     propia barra de admin. Se compensa con padding, no con top, para que el fondo navy siga
     cubriendo toda la pantalla si la pagina esta desplazada. */
  body.admin-bar .nav-main .brx-nav-nested-items { padding-top: 46px; }
  @media (min-width: 783px) { body.admin-bar .nav-main .brx-nav-nested-items { padding-top: 32px; } }

  /* cabecera: logo blanco + X (108 de alto, línea abajo) */
  .nav-main .brx-nav-nested-items > li.nav-main__head { display: flex; align-items: center; justify-content: space-between; height: 109px; padding: 9px 0 8px; }   /* 109 = 9 + 91 + 8 + 1 de la linea -> mismo centro (54.5) que la barra */
  .nav-main .brx-nav-nested-items > li > a.nav-main__logo { display: block; line-height: 0; padding: 0; }   /* el logo del panel a 20 del borde, igual que en la barra */
  .nav-main__logo img { width: 171px; height: auto; }
  .nav-main .navbar__toggle-close { position: static; width: 21px; height: 21px; margin-right: 4px; color: var(--amcham-color-white); background: none; border: 0; padding: 0; }   /* Figma: X 21×21 trazo 3, borde derecho a 4 del contenedor */
  .navbar__toggle-close .brxa-wrap { width: 21px; height: 21px; border: 0; outline: 0; box-shadow: none; }
  /* 21 sep: Bricks le pasa el foco a la X al abrir el panel; WebKit/Safari pinta ahi el anillo de
     foco aunque se haya abierto con el dedo -> borde blanco alrededor de la X en movil. El anillo
     solo se pinta si el usuario viene navegando con el teclado (html.js-teclado, assets/amcham.js). */
  .navbar__toggle-close:focus-visible { outline: 0; }
  html.js-teclado .navbar__toggle-close:focus-visible { outline: 2px solid var(--amcham-color-white); outline-offset: 4px; }
  .navbar__toggle-close .brxa-inner { background-color: transparent; }
  .navbar__toggle-close .brxa-inner::before,
  .navbar__toggle-close .brxa-inner::after { background-color: currentColor; width: 30px; height: 3px; left: -4.5px; top: 0; bottom: auto; border-radius: 0; }
  .navbar__toggle-close .brxa-inner::before { transform: rotate(45deg); }
  .navbar__toggle-close .brxa-inner::after  { transform: rotate(-45deg); }

  /* buscador: fila de 64 con lupa e input transparente */
  .nav-main .brx-nav-nested-items > li.nav-main__search { display: block; padding: 0 4px; }
  .nav-main__search-form { display: flex; align-items: center; column-gap: 13px; height: 64px; }
  .nav-main__search-btn { display: inline-flex; width: 17px; height: 17px; padding: 0; border: 0; background: none; color: var(--amcham-color-white); cursor: pointer; }
  .nav-main__search-btn svg { width: 17px; height: 17px; } .nav-main__search-btn svg path { fill: currentColor; }
  .nav-main__search-input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; background: none; color: var(--amcham-color-white); font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 500; outline: 0; padding: 0; -webkit-appearance: none; appearance: none; border-radius: 0; }
  .nav-main__search-input::placeholder { color: rgb(255 255 255 / .53); opacity: 1; }
  .nav-main__search-input::-webkit-search-decoration, .nav-main__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

  /* ítems de primer nivel: 17 Demi Bold blanco, paso de 71 */
  .nav-main .brx-nav-nested-items > li > a:not(.nav-main__logo),
  .nav-main .brx-submenu-toggle > span { color: var(--amcham-color-white); font-size: 17px; font-weight: 600; line-height: 1.5; padding: 22px 4px; }
  .nav-main .brx-nav-nested-items > li.brxe-dropdown { padding: 0; }
  .nav-main .brx-nav-nested-items > li.brxe-dropdown.open { border-bottom: 0; }
  /* sin resplandor azul del sistema al tocar (tap highlight) ni fondo en el toggle */
  .nav-main, .nav-main * { -webkit-tap-highlight-color: transparent; }
  .nav-main .brx-submenu-toggle, .nav-main .brx-submenu-toggle:hover, .nav-main .brx-submenu-toggle:focus-within, .nav-main .brxe-dropdown.open > .brx-submenu-toggle { background: none; }
  .nav-main .brx-submenu-toggle { width: 100%; justify-content: space-between; align-items: center; }
  .nav-main .brx-submenu-toggle button { color: var(--amcham-color-white); padding: 22px 4px; background: none; border: 0; }
  .nav-main .brx-submenu-toggle button > svg { width: 14px; height: 7px; transition: transform .25s ease; }
  .nav-main .brx-submenu-toggle button > svg:not(.svg-inline--fa) path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav-main .brx-submenu-toggle button > svg.svg-inline--fa { width: 13px; height: 13px; flex-basis: 13px; margin-top: -2px; }   /* móvil: glifo de 12 × 7 px */
  .nav-main .brxe-dropdown.open .brx-submenu-toggle button > svg { transform: rotate(180deg); }

  /* desplegable abierto: cajón un tono más oscuro a todo el ancho, enlaces de 44 y CTA de sección al final */
  .nav-main .brxe-dropdown:not(.open) > .mega { display: none; }
  .nav-main .brxe-dropdown.open > .mega {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* escritorio centra (align-items:center) */
    min-height: 0;
    margin: 0 -20px;
    padding: 16px 32px 24px;   /* 20 sep: Johann pidio mas padding en movil */
    box-shadow: none;
    border-radius: 0;
    background: #0E3068;
    width: auto !important;
    min-width: 0 !important;   /* el JS del megamenú deja min-width:440px inline */
    left: auto !important;
    transform: none !important;
  }
  .mega__intro { display: none; }   /* eyebrow, título y CTA del megamenú no van en móvil (Johann, 13 sep) */
  /* `flex: none` anula el `flex: 1 1 0` del escritorio (19 oct). Sin esto, con `.mega` ya en
     columna, el flex-basis:0 hace que .mega__cols aporte CERO altura: .mega se queda con la
     altura de su padding (40 px) y su `overflow:hidden` recorta los enlaces. (25 oct 2026) */
  .mega__cols { display: block; flex: none; min-height: 0; padding-left: 0; border-left: 0; }   /* en columna, el align-content:center de escritorio centraba las columnas */
  .mega__col, .mega__col + .mega__col,
  .mega__cols--gap26 .mega__col, .mega__cols--gap36 .mega__col { display: block; width: auto; }
  .nav-main .mega__item { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .mega__item-title { font-size: 16px; font-weight: 500; line-height: 1.5; color: rgb(255 255 255 / .9); }
  .nav-main .mega__item:hover .mega__item-title,
  .nav-main .mega__item:focus .mega__item-title,
  .nav-main .mega__item:focus-visible .mega__item-title,
  .nav-main .mega__item:active .mega__item-title { color: var(--amcham-color-white); }
  .mega__item-desc { display: none; }

  /* panel abierto por encima de todo; la hamburguesa se esconde */
  .nav-main.brx-open { position: relative; z-index: 1001; }
  .nav-main.brx-open > .navbar__toggle { display: none; }

  /* Contáctenos (rojo, 50) e idioma centrado */
  .nav-main .brx-nav-nested-items > li.nav-main__cta-item { display: block; border-bottom: 0; padding: 23px 0 0; }
  .nav-main .brx-nav-nested-items > li > a.navbar__cta--mobile,
  .navbar__cta--mobile { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; background-color: #d3002a; color: var(--amcham-color-white); font-size: 16px; font-weight: 600; border-radius: 4px; padding: 0; }
  .nav-main .brx-nav-nested-items > li.nav-main__lang { display: flex; justify-content: center; border-bottom: 0; padding-top: 23px; }
  .nav-main__lang a { display: inline-flex; align-items: center; column-gap: 5px; color: var(--amcham-color-white); font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.5; }
  .nav-main__lang svg { width: 16px; height: 16px; } .nav-main__lang svg path { stroke: currentColor; }

  /* Banda y título */
  .site-header {
    height: auto;
    min-height: 0;
    margin-bottom: 32px;
  }
  .site-header__bg::after {                       /* marca más chica y pegada a la derecha */
    right: 0;
    top: -90px;
    width: 300px;
  }
  .page-title {
    margin-top: 24px;
    margin-bottom: 36px;
  }
  .crumbs.crumbs--banda { margin-top: 12px; font-size: 12px; }
  .crumbs--banda + .page-title { margin-top: 8px; }
}

@media (max-width: 478px) {
  .page-title { margin-bottom: 32px; }
  .site-header__bg::after { width: 240px; top: -70px; }
}

/* Aire antes del footer en las páginas de contenido (la última sección de #brx-content) */
#brx-content > :is(.brxe-section, .brxe-amcham-pagina):last-child { padding-bottom: 80px; }
@media (max-width: 767px) { #brx-content > :is(.brxe-section, .brxe-amcham-pagina):last-child { padding-bottom: 48px; } }
/* Elemento «Página interior» (elements/amcham-pagina.php): mismo contenedor que .brxe-container */
.pagina__inner { width: var(--amcham-container); max-width: 100%; margin-inline: auto; }
.subnav--vacio { border: 1px dashed #B5C2D3; box-shadow: none; background: #fff; }   /* solo en el builder */
.subnav--vacio p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }

/* =========================================================
   6. Footer  (Figma: Home 897:159, 1440 × 600)
   ========================================================= */
.site-footer {
  background: var(--amcham-footer-bg);
  color: var(--amcham-color-white);
  padding: 60px 0;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  row-gap: 44px;
}
.site-footer__logo img { width: 205px; height: auto; display: block; }

.footer-menu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 40px;
  width: 100%;
}
.footer-menu__col {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.footer-menu__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--amcham-color-white);
}
.footer-menu__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.footer-menu__list a {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--amcham-color-white);
  text-decoration: none;
  opacity: .92;
  transition: opacity .15s;
}
.footer-menu__list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.site-footer__divider {
  height: 1px;
  width: 100%;
  background: rgb(255 255 255 / .35);
}
.site-footer__bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  column-gap: 40px;
  width: 100%;
}
.site-footer__privacy {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--amcham-color-white);
}
.site-footer__copy {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--amcham-color-white);
}
.site-footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 24px;
  width: auto;
}
.site-footer__social a { display: block; color: var(--amcham-color-white); }
.site-footer__social svg { width: auto; height: 32px; display: block; }
.site-footer__social svg.svg-inline--fa { width: auto; height: 32px; vertical-align: 0; }   /* FA inline: el alto manda y el ancho sale del viewBox; sin esto gana svg.svg-inline--fa{height:1em} */
.site-footer__social a:hover { opacity: .8; }

@media (max-width: 1023px) {
  .site-footer { padding: 48px 0; }
  .footer-menu { flex-wrap: wrap; row-gap: 32px; justify-content: flex-start; column-gap: 40px; }
  .footer-menu__col { flex: 1 1 200px; }
  .site-footer__bottom { flex-wrap: wrap; row-gap: 16px; }
}
@media (max-width: 767px) {
  .site-footer { padding: 40px 0 32px; }
  .site-footer__inner { row-gap: 32px; }
  .site-footer__logo img { width: 171px; }
  .footer-menu { flex-direction: column; row-gap: 28px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; row-gap: 20px; }
  .site-footer__copy { order: 3; }
}

/* =========================================================
   7. Componentes comunes del home (botones, títulos de sección, eyebrow)
   ========================================================= */
.bricks-button { letter-spacing: 0; }   /* Bricks core (frontend.min.css) pone .5px en todo .bricks-button; el tema no usa tracking en botones */
.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;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn .btn__arrow { width: 16px; height: auto; flex-shrink: 0; transition: transform .2s; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn .btn__icono { width: 16px; height: 16px; flex-shrink: 0; }   /* ícono en vez de flecha (Documento destacado: revista / descarga), 19 oct 2026 */
/* Tamaños (18 oct 2026, Johann: «consolidar»): estándar 42/16 (base) · compacto 44/14 para columnas angostas (banda CTA «lado», documento destacado)
   · grande 48/16 para formularios y botones a todo el ancho. Antes había 10 alturas distintas (42/44/46/48/50/52) puestas por clases de página;
   los contextos que las tenían se listan aquí y sus reglas propias ya no tocan alto, padding ni fuente. La página /botones/ lo verifica. */
.btn--compacto, .cta-band--lado .btn, .docdest .btn { height: 44px; padding: 8px 16px; font-size: 14px; }
.btn--grande, .subnav-cta .btn, .event__btn, .reg__group--submit .btn, .reg-form .btn, .reg__externo-btn, .noticia__boletin-btn, .nlist__boletin-btn, .sres-card__btn { height: 48px; padding: 8px 24px; font-size: 16px; }
.btn--primary { background: var(--amcham-color-navy); color: #fff; }
.btn--primary:hover { background: var(--amcham-color-blue); color: #fff; }   /* Figma btn/Variant2: #0073C0 */
.btn--red { background: var(--amcham-color-red); color: #fff; }
.btn--red:hover { background: var(--amcham-color-red-hover); color: #fff; }   /* Johann, 18 oct 2026: un paso más claro (el Figma red btn/Variant2 traía #D3002A, más oscuro) */
.btn--blue { background: var(--amcham-color-blue); color: #fff; }
.btn--blue:hover { background: var(--amcham-color-blue-hover); color: #fff; }
.btn--outline { border: 1px solid var(--amcham-color-navy); color: var(--amcham-color-navy); background: transparent; }
.btn--outline:hover { background: var(--amcham-color-navy); color: #fff; }
.btn--white { background: #fff; color: var(--amcham-color-navy); }
.btn--white:hover { background: var(--amcham-color-blue); color: #fff; }
.btn--outline-white, .btn--ghost { border: 1px solid rgb(255 255 255 / .7); color: #fff; background: transparent; }
.btn--ghost:hover { background: #fff; color: var(--amcham-color-navy); }
.btn--outline-white:hover { background: #fff; color: var(--amcham-color-navy); }

/* Enlace de acción `.enlace` (18 oct 2026, Johann: una sola clase para los enlaces con flecha; antes eran 15 clases con
   13/13.5/14/15/16 px, pesos 500/600, gaps 6–12 y hovers distintos). Azul 600 + flecha de 16; en hover el color sube
   «un paso más claro» y la flecha se desplaza 3 px. Tamaños: --chico 13 · --mediano 14 · (base) 15 · --grande 16.
   --navy: navy en reposo → blue en hover. La POSICIÓN (margin, padding, align-self) la pone la clase del componente.
   Dentro de una tarjeta enlazada (span), el hover lo dispara la tarjeta: ver .jcard__link:hover, .mis-card:hover, a.e404-card:hover. */
.enlace { display: inline-flex; align-items: center; column-gap: 10px; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--amcham-color-blue); text-decoration: none; transition: color .2s; }
.enlace > svg, .enlace > i { flex: none; width: 16px; height: auto; transition: transform .2s; }
.enlace:hover, .enlace:focus-visible { color: var(--amcham-color-blue-hover); }
.enlace:hover > svg, .enlace:focus-visible > svg, .enlace:hover > i, .enlace:focus-visible > i { transform: translateX(3px); }
.enlace--chico { font-size: 13px; column-gap: 8px; }
.enlace--chico > svg, .enlace--chico > i { width: 14px; }
.enlace--mediano { font-size: 14px; }
.enlace--grande { font-size: 16px; column-gap: 12px; }
.enlace--navy { color: var(--amcham-color-navy); }
.enlace--navy:hover, .enlace--navy:focus-visible { color: var(--amcham-color-blue); }

.section-title { display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px; }   /* Johann, 14 sep: 20 (el Figma pintaba la línea de +23 a +27) */
.section-title--center { align-items: center; text-align: center; }
.section-title__text { font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--amcham-ink); margin: 0; }   /* Figma home: 36/110 */
.section-title--center .section-title__text { font-size: 32px; }   /* Platinum / Gold Circle: 32 */
.section-title__line { display: block; width: 75px; height: 4px; background: linear-gradient(90deg, var(--amcham-color-red), var(--amcham-color-blue)); }

.eyebrow { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; text-transform: uppercase; }
.eyebrow--navy { color: var(--amcham-color-navy); }

/* Flechas de carrusel (círculo navy) */
.splide__arrows.custom { display: flex; gap: 6px; }
.splide__arrows.custom .splide__arrow {
  position: static; transform: none; width: 33px; height: 33px; padding: 0; border: 0; border-radius: 50%; opacity: 1;
  background: var(--amcham-color-navy); color: #fff; cursor: pointer; display: grid; place-items: center;   /* el círculo lo pinta el CSS; el chevron es Font Awesome (slots carrusel-anterior/siguiente) */
}
.splide__arrows.custom .splide__arrow svg { width: 12px; height: 12px; display: block; }
.splide__arrows.custom .splide__arrow:disabled { opacity: .35; cursor: default; }
.splide__arrows.custom .splide__arrow:hover:not(:disabled) { background: var(--amcham-color-blue); }
/* Íconos (Apariencia → Íconos): el tema imprime el <svg class="svg-inline--fa"> ya resuelto (antes lo sustituía el JS del Kit);
   hereda color por currentColor y el tamaño lo da el contenedor. Las tres declaraciones del núcleo de FA las inyectaba
   el Kit por JS — al quitarlo del front hay que declararlas aquí o los íconos se recortan y descuadran. */
.amcham-ic { display: inline-block; line-height: 1; }
.svg-inline--fa { box-sizing: content-box; display: var(--fa-display, inline-block); overflow: visible; }
svg.svg-inline--fa { height: 1em; width: auto; vertical-align: -.125em; }

/* =========================================================
   7b. Piezas compartidas de sección (15 sep 2026) — las imprimen los helpers de inc/helpers.php y las usan
   Quiénes somos, Qué hacemos, Junta directiva, Beneficios y Requisitos. Antes cada elemento traía su copia.
   · .sec-head  → amcham_sec_head(): antetítulo + título con línea. Variante --amplio (Quiénes somos / Qué hacemos / Junta:
                  tracking corto, más aire bajo el título) · sin línea → .sec-head__h2
   · .cifras    → amcham_cifras(): --franja (una fila, valor 40) · --2x2 (Quiénes somos, valor 56)
   · .pasos     → amcham_pasos(): --tarjetas (una tarjeta por paso, --3 / --4 columnas) · --ciclo (una tarjeta, círculos y conectores)
   · .cta-band  → amcham_cta_band(): --apilado (texto y botones apilados, con isotipo) · --lado (texto | botones en columna de 220)
   ========================================================= */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; row-gap: 14px; width: 100%; }   /* 29 oct 2026 (Johann): 14 como --amplio; era 10 y dejaba fuera a requisitos, solicitud y rse */
.sec-head__eyebrow { font-size: 14px; }
.sec-head .section-title { row-gap: 14px; width: 100%; }
.sec-head .section-title__text { font-size: 36px; line-height: 1.2; }
.sec-head__h2 { margin: 0; font-family: var(--amcham-font-heading); font-size: 30px; font-weight: 600; line-height: 1.16; color: var(--amcham-ink); }
.sec-head--amplio { row-gap: 14px; }
.sec-head--amplio .section-title { row-gap: 25px; }
.sec-head--amplio .section-title__text { line-height: 1.16; max-width: 800px; }
/* Cifras -> assets/piezas.css (20 sep 2026): las comparten el elemento de Bricks y el bloque de Gutenberg «amcham/cifras».
   Esa hoja se carga ANTES de esta, asi que los ajustes por pagina de mas abajo (.rse__cifras, .benefits…) siguen ganando. */
/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pasos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2×2 siempre: con el page-main de 707 las 4 columnas quedaban de 165 px */
.paso { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pasos--tarjetas .paso { padding: 26px 24px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.paso__cabeza { display: flex; align-items: center; column-gap: 12px; width: 100%; margin-bottom: 16px; }
.paso__num { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--amcham-color-navy); color: #fff; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1; }
.paso__titulo { margin: 0 0 6px; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.paso__texto { margin: 0; font-size: 13px; line-height: 1.55; color: #6F6F6F; }
.paso__enlace { margin-top: auto; padding-top: 14px; }   /* tipografía y hover: .enlace */
.paso__conector { display: none; }
/* Ciclo (Qué hacemos): una sola tarjeta, círculos azules con conector, el último rojo */
.pasos--ciclo { gap: 32px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 36px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.pasos--ciclo .paso { row-gap: 14px; padding-right: 24px; }
.pasos--ciclo .paso__cabeza { height: 44px; margin-bottom: 0; }
.pasos--ciclo .paso__num { flex-basis: 44px; width: 44px; height: 44px; background: var(--amcham-color-blue); font-family: Figtree, var(--amcham-font-heading); font-size: 18px; font-weight: 700; }
.pasos--ciclo .paso--ultimo .paso__num { background: #D3002A; }
.pasos--ciclo .paso__conector { display: block; flex: 1 1 auto; height: 2px; border-radius: 1px; background: rgb(0 115 192 / .25); }
.pasos--ciclo .paso__titulo { margin-bottom: 0; font-size: 20px; line-height: 1.2; }
.pasos--ciclo .paso__texto { font-size: 14.5px; color: var(--amcham-muted); }
.pasos--ciclo .paso:nth-child(2n) .paso__conector { display: none; }
/* Banda CTA */
.cta-band { position: relative; overflow: hidden; display: flex; padding: 44px 48px; border-radius: var(--amcham-radius); color: #fff; }
.cta-band__texto { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cta-band__titulo { margin: 0; font-family: var(--amcham-font-heading); font-weight: 600; color: #fff; }
.cta-band__desc { margin: 0; line-height: 1.6; }
.cta-band__botones { position: relative; display: flex; }
.cta-band--apilado { flex-direction: column; row-gap: 26px; background: var(--amcham-color-light-blue) linear-gradient(90deg, #1C407D 0%, #006EB8 100%); }
.cta-band--apilado::before { content: ''; position: absolute; top: -220px; right: -90px; width: 560px; height: 546px; opacity: .2; pointer-events: none; background: url('assets/amcham-mark.webp') no-repeat center / contain; }
.cta-band--apilado .cta-band__texto { max-width: 600px; row-gap: 12px; }
.cta-band--apilado .cta-band__titulo { font-size: 30px; line-height: 1.2; }
.cta-band--apilado .cta-band__desc { font-size: 15px; color: #D9E5F7; }
.cta-band--apilado .cta-band__botones { flex-wrap: wrap; gap: 12px; }
.cta-band--lado { align-items: center; column-gap: 40px; background: linear-gradient(90deg, var(--amcham-color-blue) 0%, var(--amcham-color-navy) 100%); }
.cta-band--lado .cta-band__texto { flex: 1 1 auto; row-gap: 12px; }
.cta-band--lado .cta-band__titulo { font-size: 26px; line-height: 1.25; }   /* Figma 28 en Figtree; en Avenir Next 26 mantiene el título en una línea */
.cta-band--lado .cta-band__desc { font-size: 17px; line-height: 1.55; color: rgb(255 255 255 / .85); }
.cta-band--lado .cta-band__botones { flex: 0 0 220px; flex-direction: column; row-gap: 12px; }
.cta-band--lado .btn { justify-content: center; }
.cta-band--lado .btn--outline-white { border-width: 1.5px; }
.cta-band--lado .btn .btn__arrow { width: 14px; }
/* Antetítulo y fondo «isotipo» (7 oct 2026, Figma «Quiénes Somos» 2413:3789): navy con la marca ya compuesta en
   assets/cta-fondo-isotipo.jpg (la imagen del Figma al 90 % sobre #133E7F), título 28 y texto 16. */
.cta-band__eyebrow { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .52px; text-transform: uppercase; color: rgb(255 255 255 / .94); }
.cta-band--isotipo { background: var(--amcham-color-navy) url('assets/cta-fondo-isotipo.jpg') no-repeat right center / cover; }
.cta-band--isotipo::before { content: none; }
.cta-band--isotipo.cta-band--lado .cta-band__titulo { font-size: 28px; }
.cta-band--isotipo.cta-band--lado .cta-band__desc { font-size: 16px; }
.cta-band--isotipo .cta-band__titulo { text-wrap: balance; }   /* en la columna de 810 el título de 28 va en dos líneas: que queden parejas */
/* Fondo «foto» (7 oct 2026, Figma «Reconocimiento Liderazgo Sostenible» 2515:11482): la foto bajo un velo navy al 80 % y un degradado negro desde la izquierda */
.cta-band--foto { background: linear-gradient(rgb(19 62 127 / .8), rgb(19 62 127 / .8)), linear-gradient(90deg, #000 0%, rgb(0 0 0 / 0) 100%), var(--cta-foto, none) center / cover no-repeat var(--amcham-color-navy); }
.cta-band--foto::before { content: none; }
.cta-band--foto.cta-band--lado .cta-band__titulo { font-size: 28px; text-wrap: balance; }
.cta-band--foto.cta-band--lado .cta-band__desc { font-size: 16px; }
.cta-band--foto .cta-band__eyebrow { color: rgb(255 255 255 / .62); }
/* (≤1279 ya no necesita reglas propias: cifras compactas y pasos 2×2 son la base desde el 19 sep) */
@media (max-width: 1023px) {
  .sec-head--amplio .section-title__text, .junta__group .sec-head__h2 { font-size: 32px; }
}
@media (max-width: 767px) {
  .sec-head .section-title__text { font-size: 28px; }
  .sec-head__h2 { font-size: 26px; }
  .pasos, .pasos--4:not(.pasos--ciclo) { grid-template-columns: 1fr; }
  .pasos--ciclo { row-gap: 24px; padding: 26px 22px; }
  .pasos--ciclo .paso { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding-right: 0; }
  .pasos--ciclo .paso__cabeza { grid-row: 1 / 3; align-items: flex-start; height: auto; }
  .pasos--ciclo .paso__titulo { align-self: center; min-height: 44px; display: flex; align-items: center; }
  .pasos--ciclo .paso__conector { display: none; }
  .cta-band { padding: 32px 24px; }
  .cta-band--apilado .cta-band__titulo { font-size: 26px; }
  .cta-band--apilado .cta-band__botones .btn { width: 100%; justify-content: center; }
  .cta-band--lado { flex-direction: column; align-items: stretch; row-gap: 26px; padding: 28px 22px; }
  .cta-band--lado .cta-band__titulo { font-size: 24px; }
  .cta-band--lado .cta-band__botones { flex-basis: auto; }
  .cta-band--isotipo.cta-band--lado .cta-band__titulo { font-size: 24px; }
  .cta-band--foto.cta-band--lado .cta-band__titulo { font-size: 24px; }
}

/* =========================================================
   7c. Banda de comité y placeholder de noticia sin foto (Figma WIP 1832-1260, 18 sep 2026) — helpers en inc/helpers.php
   · .banda-svg  → amcham_banda_svg(): el arte de la banda del Figma (degradado vertical claro → oscuro al 75 % + barra diagonal + triángulo
                   con el isotipo) en el espacio 1440×420; los colores llegan por --chip-claro / --chip-oscuro (o --chip) del ancestro.
                   Lo usan el mosaico de comités (.comite-tile__marca, sección 13) y el placeholder.
   · .news-ph    → amcham_noticia_placeholder(): tarjeta de noticia sin foto de un comité = banda recortada como en el Figma (ventana
                   748 80 458 257) + ícono del comité a 95 de alto / 128 de ancho máx. (amcham.js ajusta el viewBox al dibujo) + nombre
                   18/700 mayúsculas, tracking .72, centrados y con 16 entre ellos. Sin comité → .news-card__img--vacia (banda genérica).
                   Lo usan el home (destacada 480×340 y lista), el archivo y las relacionadas del detalle; el radio y la proporción los da
                   cada contexto por .news-card__img.
   ========================================================= */
.banda-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.banda-svg__g1 { stop-color: var(--chip-claro, var(--chip, #133E7F)); }
.banda-svg__g2 { stop-color: var(--chip-oscuro, var(--chip, #133E7F)); }
.banda-svg__barra { fill: color-mix(in srgb, var(--chip-claro, var(--chip, #133E7F)), var(--chip-oscuro, var(--chip, #133E7F))); }   /* tono medio: más oscuro que el fondo arriba, más claro abajo, como en el arte */
.news-card__img--vacia { display: block; background: var(--amcham-color-navy) url(assets/amcham-banda.jpg) center / cover no-repeat; }   /* noticia sin foto y sin comité */
.news-card__img.news-ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 16px; overflow: hidden; background: var(--chip, var(--amcham-color-navy)); color: #fff; }
.news-ph__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 128px; height: 95px; font-size: 95px; flex-shrink: 0; }
.news-ph__icon svg { width: 100%; height: 100%; max-width: 128px; max-height: 95px; min-width: 0; min-height: 0; color: #fff; display: block; }
.news-ph__icon svg.svg-inline--fa { width: auto; height: 1em; }   /* íconos de Font Awesome (term meta icono_fa): el Kit los dimensiona por font-size */
.news-ph__icon svg .ic-accent { fill: var(--chip, #133E7F); }
.news-ph__name { position: relative; z-index: 1; max-width: 100%; padding: 0 20px; font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: .72px; text-transform: uppercase; text-align: center; }
@media (max-width: 478px) { .news-card__img.news-ph { row-gap: 12px; } .news-ph__icon { height: 78px; width: 105px; font-size: 78px; } .news-ph__icon svg { max-height: 78px; max-width: 105px; } .news-ph__name { font-size: 16px; letter-spacing: .64px; } }

/* =========================================================
   8. Home
   ========================================================= */
body { background: var(--amcham-bg); }   /* todos los frames del Figma (home, interiores, comités, directorio) tienen #F7F7F7 */
.home-sec { padding: 0; }
.home-sec--hero { padding-top: 20px; }   /* Figma WIP 1:1500 decía 35; Johann lo dejó en 20 (8 sep) */
.home-sec--events { padding-top: 45px; overflow: hidden; }   /* Figma: cifras 722 → título 767 */      /* el carrusel se asoma más allá del contenedor */
.home-sec--news { padding-top: 45px; }   /* Figma: banner 1705 → título 1750 */   /* Johann (7 sep): menos aire entre «Ver todos los eventos» y Noticias (Figma: 65) */
.home-sec--ads { padding-top: 45px; }   /* Figma: botón 1300 → banner 1345 */
.home-sec--circles { padding-top: 81px; overflow: hidden; }   /* Figma: banda 3812 → Platinum 3893 */   /* Johann (7 sep): 65 como el resto de secciones (el Figma 1118-187 tenía 36) */
#brx-content > .home-sec--circles:last-child { padding-bottom: 155px; }   /* Figma 451:5919: logos Gold 4415 → footer 4570 */
.home-sec--discover { padding-top: 110px; }   /* Figma: mosaicos 3466 → banda 3576 */
#brx-content > .home-sec--discover:last-child { padding-bottom: 84px; }
.home-sec--services { padding-top: 45px; }   /* Figma: botón 2647 → título 2692 */   /* va entre el anuncio y Platinum (Figma 1118-187: anuncio acaba 2642, sección 2708) */

/* Hero */
.home-hero {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--amcham-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 92px 65px;
  color: #fff;
  background: var(--amcham-color-dark-blue, #1C407D);
  isolation: isolate;   /* el overflow:hidden + border-radius se aplica en el compositor también a las capas animadas (video, veil) */
}
.home-hero__media { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }   /* recorta él mismo las esquinas: con el video/veil en capas compuestas (fade de entrada) Chrome dejaba la esquina sin redondear */
.home-hero__media img, .home-hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Como en el Figma: el video va a la derecha, sin ampliar (alto = 480), y la izquierda queda
   en azul sólido debajo del texto. Con un clip 16:9 ocupa ~853px del lado derecho. */
.home-hero__media video, .home-hero__media .home-hero__img { position: absolute; top: 0; right: -76px; left: auto; width: auto; height: 100%; max-width: none; }   /* Figma 897:381: video 853x480 anclado a la derecha, sobresale 76px. La imagen de fondo se encuadra igual que el video (22 oct 2026) */
/* Parallax del hero (22 oct 2026, control «Efecto al pasar el mouse» del elemento): la imagen nace ampliada 8% para tener
   de dónde moverse (el alto del hero es justo, sin margen) y el JS escribe --px/--py. Sin JS queda la imagen quieta y ampliada. */
@media (hover: hover) and (pointer: fine) {
  .home-hero--parallax .home-hero__media .home-hero__img {
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08);
    transform-origin: 50% 50%;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) { .home-hero--parallax .home-hero__media .home-hero__img { transform: none; } }

/* Gradient exacto del Figma (897:381): #1C407D -> #006EB7 -> transparente, sobre el video */
.home-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, #1C407D 0%, #1C407D 12.2%, #006EB7 48.9%, rgb(0 110 183 / 0) 82.1%, rgb(0 110 183 / 0) 100%); }
.home-hero__media:has(> .home-hero__veil:only-child) .home-hero__veil { background: linear-gradient(90deg, #1C407D 0%, #006EB7 100%); }  /* sin video ni imagen */
.home-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; max-width: 721px; }   /* escritorio a la izquierda como el Figma; centrado solo en móvil (Johann, 7 sep) */
.home-hero__title { font-size: 42px; font-weight: 600; line-height: 1.15; margin: 0 0 40px; max-width: 591px; color: #fff; }   /* Figma 451:6148: 42/115 · 40 al párrafo */
.home-hero__text { font-size: 19px; font-weight: 400; line-height: 1.5; margin: 0 0 35px; max-width: 721px; color: #fff; }   /* Figma: 19/150 · 721 de ancho · 35 al botón */
.home-hero__br { display: none; }   /* en móvil se enciende (frase en dos líneas) */

/* Cifras */
.home-stats {
  position: relative;
  z-index: 2;
  width: 89.19%;   /* 1106 de 1240 */
  max-width: 100%;
  margin: -20px auto 0;
  height: 141px;
  padding: 0 48px;   /* Figma: banda de 141 con las cifras centradas (4 cifras) */
  background: #fff;
  border-radius: var(--amcham-radius);
  box-shadow: 0 6px 10px rgb(0 0 0 / .05);   /* Figma: 0 6 10 al 5 % */
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
}
.home-stats__item { display: flex; align-items: center; column-gap: 10px; flex: 0 1 auto; min-width: 0; }
.home-stats__num { font-size: 50px; font-weight: 600; line-height: 1.1; letter-spacing: -2px; color: var(--amcham-color-navy); white-space: nowrap; }   /* Figma 451:6148: 56 · -4; Johann lo dejó en -2 (13 sep) y en 50 (8 oct) */
.home-stats__signo { display: inline-block; font-size: .6em; letter-spacing: 0; vertical-align: .26em; margin-right: .08em; }   /* «+» más chico (AmCham, Ronda 1, 13 oct): 60 % del número, centrado en la altura de las cifras */
.home-stats__signo--fin { margin-right: 0; margin-left: .08em; }
.cifras__signo { display: inline-block; font-size: .6em; letter-spacing: 0; vertical-align: .26em; margin-right: .08em; }   /* mismo «+» chico que el home, en todas las cifras de amcham_cifras() (tarjeta, franja, bloque Gutenberg) */
.cifras__signo--fin { margin-right: 0; margin-left: .08em; }
#red-global { scroll-margin-top: 40px; }   /* ancla del enlace «Conexión AACCLA» del home (18 oct) */
@media (max-width: 767px) { .cta-band__botones .btn { white-space: normal; text-align: center; line-height: 1.3; height: auto; min-height: 44px; padding-block: 10px; } .cta-band--apilado .cta-band__botones .btn { min-height: 40px; padding-block: 8px; } }   /* el botón a todo el ancho no cabía con «Conoce los programas y empresas reconocidas» (18 oct): baja de línea en vez de salirse */
.home-stats__label { flex: 0 0 auto; width: max-content; max-width: 84px; font-size: 15px; line-height: 1.25; color: var(--amcham-ink); }   /* 16 → 15 (Johann, 8 oct). Figma: etiquetas en dos líneas (empresas / miembro · comités / activos · eventos / al año) */
.home-stats__item:first-child .home-stats__label { max-width: 124px; }   /* dos líneas («empresas / miembro»): 132 a 16px → 124 a 15px (8 oct) */
.home-stats__sep { width: 1px; height: 54px; background: rgb(34 34 34 / .15); }

/* Eventos */
.home-events__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; }   /* Figma: cabecera 827 → tarjetas 853 */   /* línea → tarjetas 38 (Figma 863 → 901) */
.home-events__slider .splide__track { overflow: visible; clip-path: inset(-40px 0 -40px -40px); }   /* el carrusel se recorta en el borde derecho del contenedor (Johann, 17 sep); el asomo del 4.º card vive dentro, en el padding-right de Splide */   /* recorta solo en el borde derecho del contenedor (asomo del 4.º card); deja ver la sombra en los otros lados */
.home-events__slider .splide__list { align-items: stretch; }
.home-events__slider .splide__slide > .event-card { width: 100%; }   /* el slide de Bricks es flex con align-items:flex-start: sin esto la tarjeta encoge al ancho de su título (Johann: «todos del mismo ancho») */
.home-events__foot { display: flex; justify-content: flex-end; margin-top: 27px; }   /* Figma: tarjetas 1231 → botón 1258 */
.home-events__empty { color: var(--amcham-muted); }
.event-card {
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%; min-height: 378px;
  padding: 36px;   /* Johann, 14 sep: 36 en los cuatro lados (Figma event1 traía 37/50) */
  background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow);
}
.event-card__chip {
  display: inline-flex; align-items: center; gap: 4px;   /* Johann, 14 sep: categoría pegada al icono (antes 9) */
  padding: 6px 9px; border-radius: 33px;
  background: color-mix(in srgb, var(--chip, #133E7F) 10%, transparent);
  color: var(--chip, #133E7F);
  font-size: 12px; font-weight: 600; letter-spacing: .48px; text-transform: uppercase; line-height: 1.5;
  margin-bottom: 21px;
}
.event-card__chip svg { width: 17px; height: 17px; }
.event-card__chip svg path, .event-card__chip svg circle { fill: currentColor; }
/* Evento sin comité → chip genérico «Eventos AmCham» (Figma AmCham 1127-780: fondo navy 15 %, gap 7, isotipo 14px) */
.event-card__chip--amcham { gap: 4px; background: color-mix(in srgb, var(--chip, #133E7F) 15%, transparent); }
.event-card__chip--amcham svg { width: 14px; height: 14px; }
.event-card__title { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 24px; color: #000; }
.event-card__title a { color: inherit; text-decoration: none; }
.event-card__title a:hover { color: var(--amcham-color-navy); }
/* Toda la tarjeta es clicable (Johann, 14 sep): el enlace del título se estira sobre la tarjeta; el «Más información» queda encima */
.event-card { position: relative; }
.event-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.event-card__more { position: relative; z-index: 2; }
.event-card__meta { display: flex; flex-direction: column; font-size: 16px; line-height: 1.6; color: #000; margin-bottom: 33px; }
.event-card__place, .event-card__modalidad { color: var(--amcham-muted); }
.event-card__more { margin-top: auto; display: inline-flex; align-items: center; text-decoration: none; }   /* tipografía: .enlace (home) o .event-row__more (lista) */

/* Pocos eventos (1–3): la fila se reparte el ancho del contenedor, sin asomo ni flechas (Johann, 1 oct 2026: «quedan huecos vacíos»).
   Con 4 o más sigue el carrusel de siempre. Las flechas reaparecen solo donde el carrusel vuelve (tres en tablet, dos o tres en móvil). */
.home-events--vacio, .home-events--uno, .home-events--dos, .home-events--tres { width: 100%; }   /* sin esto, con una sola tarjeta el bloque se encoge a su contenido (1223 de 1240) */
.home-events--vacio .home-events__head .splide__arrows,
.home-events--uno .home-events__head .splide__arrows { display: none; }
@media (min-width: 768px) { .home-events--dos .home-events__head .splide__arrows { display: none; } }
@media (min-width: 1280px) { .home-events--tres .home-events__head .splide__arrows { display: none; } }
/* Un evento: tarjeta horizontal a todo el ancho — chip, título y enlace a la izquierda; fecha, hora, lugar y modalidad a la derecha */
.home-events--uno .event-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
  grid-template-areas: "chip meta" "title meta" "more meta"; grid-template-rows: auto 1fr auto;
  column-gap: 64px; min-height: 0; padding: 44px 48px;
}
.home-events--uno .event-card__chip { grid-area: chip; justify-self: start; }
.home-events--uno .event-card__title { grid-area: title; font-size: 28px; line-height: 1.25; margin-bottom: 32px; max-width: 760px; }
.home-events--uno .event-card__meta { grid-area: meta; align-self: center; margin: 0; padding: 8px 0 8px 48px; border-left: 1px solid rgb(0 0 0 / .1); }
.home-events--uno .event-card__more { grid-area: more; justify-self: start; }
/* Dos eventos: mitad y mitad; el título sube un punto porque la tarjeta es más ancha */
.home-events--dos .event-card__title { font-size: 22px; max-width: 520px; }
@media (max-width: 767px) {
  .home-events--uno .event-card { display: flex; padding: 30px; }
  .home-events--uno .event-card__title { font-size: 20px; margin-bottom: 24px; }
  .home-events--uno .event-card__meta { align-self: stretch; padding: 0; border: 0; margin-bottom: 33px; }   /* en columna, el align-self:center de escritorio la centraba */
  .home-events--dos .event-card__title { font-size: 20px; }
}

/* Noticias */
.home-news__grid { display: grid; grid-template-columns: 480fr 804fr; column-gap: 56px; margin-top: 48px; }   /* Figma «Noticias · opción E» (1181:1142): destacada 480 · 56 · 382 · 40 · 382, en fr para el contenedor fluido */
.home-news__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 48px; align-content: start; }
.home-news__foot { display: flex; justify-content: flex-end; margin-top: 40px; }
.news-card { display: flex; flex-direction: column; row-gap: 20px; text-decoration: none; color: inherit; }
.news-card--featured { row-gap: 24px; }
.news-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; height: auto; border-radius: var(--amcham-radius); }   /* imágenes redondeadas (Johann, 14 sep) */
.news-card--featured .news-card__img { aspect-ratio: 480 / 340; }
.news-card__body { display: flex; flex-direction: column; row-gap: 10px; }
.news-card--featured .news-card__body { row-gap: 14px; }
.news-card__title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--amcham-ink); }
.news-card--featured .news-card__title { font-size: 30px; line-height: 1.25; }
.news-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--amcham-ink); }
.news-card__date { font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }
.news-card:hover .news-card__title { color: var(--amcham-color-navy); }
@media (min-width: 1024px) { .home-news__grid { align-items: start; } }   /* la destacada no se estira al alto de la lista */

/* Anuncios */
.home-ads { width: 100%; max-width: 100%; margin: 0 auto; position: relative; padding-bottom: 53px; }   /* 100 % del contenedor (Johann, 15 sep; el Figma lo tenía a 1106 de 1240) · abajo 53 = 20 de aire + 33 de flechas: las flechas van DEBAJO de la tarjeta, a la derecha (Figma WIP 451-6062: «Botones» a 20 del borde inferior, alineados al borde derecho) */
/* Anuncio = Figma WIP 451-6062 (Johann volvió a esta opción el 15 sep tras probar A2/A3): imagen a la izquierda + panel navy a la derecha; flechas fuera, debajo de la tarjeta, alineadas a la derecha */
.ad-card { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--amcham-container) * .3032); align-items: stretch; width: 100%; min-height: calc(var(--amcham-container) * .2476); border-radius: var(--amcham-radius); overflow: hidden; }   /* panel 376 a 1240 (mismo ancho que en el Figma; el ancho extra se lo lleva la imagen) · alto 307 a 1240; min-height (no height): si el panel necesita más, la tarjeta crece en vez de recortar el texto */
.ad-card__media { overflow: hidden; min-height: 0; min-width: 0; }
.ad-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* el banner 8:3 mide 290 a 1240 y la tarjeta 307: recorte de 8 px arriba y abajo, como en el Figma */
.ad-card__panel { position: relative; overflow: hidden; isolation: isolate; background: var(--amcham-color-navy) url(assets/amcham-banda.jpg) left center / cover no-repeat; color: #fff; padding: 42px 34px 42px 35px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }   /* Figma 451:6062: #0C3066 · 42/34/·/35; sin banda inferior porque las flechas ya no viven dentro */
/* Fondo del panel = el de «Descubra AmCham» (Johann, 15 sep): el degradado navy de amcham-banda.jpg (anclado a la izquierda, sin su marca recortada) + el isotipo completo en ::after, oscuro al 14 % como en el hover de los mosaicos (Johann: «que el isotipo se vea más completo») */
.ad-card__panel::after { content: ''; position: absolute; right: 6px; bottom: -6px; width: 250px; height: 250px; background: url(assets/icon-amcham-mark.svg) center / contain no-repeat; opacity: .14; pointer-events: none; z-index: 0; }
.ad-card__panel > * { position: relative; z-index: 1; }
.ad-card__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .52px; text-transform: uppercase; color: rgb(245 245 245 / .6); margin-bottom: 12px; }   /* sobretítulo (Johann, 15 sep: «falta el subtítulo arriba del título») */
.ad-card__title { font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; margin: 0 0 10px; }
.ad-card__text { font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / .85); margin: 0 0 22px; }   /* subtítulo (15 sep) */
.ad-card__btn { margin-top: 4px; }   /* botón rojo .btn--red (Johann, 15 sep); el título lleva mb 18 */
.home-ads .splide__arrows.custom { position: absolute; right: 0; bottom: 0; z-index: 2; }   /* debajo de la tarjeta, pegadas al borde derecho */
.home-ads .splide__list { align-items: flex-start; }   /* cada slide mide lo suyo (por defecto la lista los estira al más alto) */
.home-ads .splide__track { transition: height .4s ease; }   /* con autoHeight, Splide anima la altura de la pista al cambiar de anuncio */

/* Circles */
.home-circle { width: 100%; }
.home-circle + .home-circle { margin-top: 83px; }   /* Figma 451:6180: logos Platinum 4157 → Gold 4240 */   /* Platinum → Gold 65 (Johann, 7 sep; Figma decía 69) */
.home-circle__marquee { position: relative; display: flex; overflow: hidden; margin-top: 30px; width: 100%; }   /* Johann (7 sep): la marquesina de Platinum dentro del contenedor (antes 100vw) */
.home-circle__marquee::before, .home-circle__marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.home-circle__marquee::before { left: 0; background: linear-gradient(90deg, var(--amcham-bg), rgb(247 247 247 / 0)); }
.home-circle__marquee::after { right: 0; background: linear-gradient(270deg, var(--amcham-bg), rgb(247 247 247 / 0)); }
.home-circle__track { display: flex; align-items: center; column-gap: 48px; padding-right: 48px; flex-shrink: 0; animation: amcham-marquee 40s linear infinite; }   /* Figma Frame 749: gap 48 */
.home-circle--pausa-hover .home-circle__marquee:hover .home-circle__track { animation-play-state: paused; }   /* solo con el control «Pausar la cinta al pasar el mouse» (Johann: por defecto sigue) */
@keyframes amcham-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* «Fila centrada (sin movimiento)»: la misma cinta, quieta, centrada y con salto de linea */
.home-circle--static .home-circle__marquee { overflow: visible; }
.home-circle--static .home-circle__marquee::before, .home-circle--static .home-circle__marquee::after { display: none; }
.home-circle--static .home-circle__track { flex-wrap: wrap; justify-content: center; width: 100%; column-gap: 88px; row-gap: 32px; padding-right: 0; flex-shrink: 1; animation: none; }
.home-circle--static .home-circle__track[aria-hidden="true"] { display: none; }
/* Movil (Johann, 20 sep 2026): «Fila centrada» vuelve a ser cinta continua */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .home-circle--static .home-circle__marquee { overflow: hidden; }
  .home-circle--static .home-circle__marquee::before, .home-circle--static .home-circle__marquee::after { display: block; }
  .home-circle--static .home-circle__track { flex-wrap: nowrap; justify-content: flex-start; width: auto; column-gap: 48px; row-gap: 0; padding-right: 48px; flex-shrink: 0; animation: amcham-marquee 40s linear infinite; }
  .home-circle--static .home-circle__track[aria-hidden="true"] { display: flex; }
}
.home-circle__item { display: block; flex-shrink: 0; }
.home-circle__logo { width: auto; max-width: 260px; display: block; object-fit: contain; }
/* Subrayados por nivel (Figma 897:277): platino plata, oro dorado */
.home-circle--platinum .section-title__line { background: linear-gradient(90deg, #7D8E98, #C7DAE4); }
.home-circle--gold .section-title__line { background: linear-gradient(90deg, #B69045, #EBDAB7); }
/* Gold: todos los logos a 135 de ancho (el alto sale de la proporción); Platinum usa el alto del campo logo_alto */
.home-circle--gold .home-circle__logo { width: 135px; max-width: 135px; height: auto !important; max-height: 83px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .home-circle__track { animation: none; } }

/* Descubra AmCham */
.home-discover {
  width: 100%;
  display: flex; align-items: center; justify-content: flex-start; column-gap: 48px; flex-wrap: wrap; row-gap: 28px;
  padding: 44px 56px;   /* Figma 759:501: titular 500 · 48 · apoyo 520, alineados a la izquierda */ border-radius: var(--amcham-radius); overflow: hidden; color: #fff;
  background: var(--amcham-color-navy) url(assets/amcham-banda.jpg) center / cover no-repeat;
}
.home-discover__head { flex: 0 0 500px; max-width: 500px; display: flex; flex-direction: column; row-gap: 12px; }
.home-discover__eyebrow { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: rgb(255 255 255 / .75); }
.home-discover__title { margin: 0; font-size: 42px; font-weight: 600; line-height: 1.16; color: #fff; }
.home-discover__aside { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; row-gap: 24px; }   /* 19 sep: la columna llega hasta el padding derecho de la banda; antes el max-width 520 dejaba 60px muertos */
.home-discover__p { margin: 0; font-size: 18px; line-height: 1.5; color: #fff; }
.home-discover__btns { display: flex; gap: 18px; flex-wrap: wrap; }

/* Qué hace AmCham por su empresa — Figma AmCham 1151-1970 (reemplaza a «Descubra AmCham», Johann 7 sep)
   eyebrow 13 → 28 → título 42/1.16 máx 591 → 62 → grilla 3 × 2 de 385×320 con gap 42; tarjeta blanca radio 10,
   padding 32/34, ícono 48 en cuadro navy al 10 % radio 4 → 20 → título 24/1.1 → 14 → texto 15/1.6 → 24 → «Conozca más» */
.home-services { display: flex; flex-direction: column; row-gap: 50px; width: 100%; }
.home-services__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 40px; }
.service-tile {
  position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 310px; padding: 40px 70px;   /* 70: «Programas ASG» (232 px) en una línea, como el Figma 2413:3447 */
  border-radius: var(--amcham-radius); overflow: hidden; text-decoration: none; isolation: isolate;   /* Figma 717:9740–9761: título centrado en el mosaico */
}
.service-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.service-tile__img--vacia { background: var(--amcham-color-navy); }
.service-tile__veil { position: absolute; inset: 0; background: rgb(0 0 0 / .45); z-index: -1; transition: background-color .25s ease; }
.service-tile__title { position: relative; font-family: var(--amcham-font-heading); font-size: 32px; font-weight: 600; line-height: 1.1; color: #fff; transition: opacity .25s ease; text-wrap: balance; }   /* balance: los cortes del Figma («Encuentros / de CEOs», «Centro de / Comercio») sin <br> a mano */
/* Hover (Figma 717:9728–9733): el mosaico pasa a color sólido con el isotipo de fondo, ícono, título 24, texto y «Conocer más» */
.service-tile__hover {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 32px 34px;
  background: var(--tile, var(--amcham-color-navy)); color: #fff; overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.service-tile__hover::after {
  content: ""; position: absolute; right: -30px; bottom: -60px; width: 471px; height: 459px; pointer-events: none;
  background: url(assets/icon-amcham-mark.svg) center / contain no-repeat; opacity: .14;
}
.service-tile__hover > * { position: relative; z-index: 1; }
.service-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: rgb(255 255 255 / .2); margin-bottom: 20px; }
.service-tile__icon svg { width: auto; height: auto; max-width: 30px; max-height: 28px; display: block; }   /* Figma: cuadro 48 con padding 10; vectores de 22–30 px a tamaño natural */
.service-tile__icon svg path, .service-tile__icon svg circle, .service-tile__icon svg rect { fill: #fff; }
.service-tile__icon svg.svg-inline--fa { width: auto; height: 28px; max-width: none; }   /* FA: alto fijo, ancho por viewBox (width:auto + height:auto lo dispararía a tamaño natural) */
.service-tile__htitle { font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 600; line-height: 1.1; margin-bottom: 14px; }
.service-tile__text { font-size: 15px; line-height: 1.5; margin-bottom: 24px; }
.service-tile__more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.5; }
.service-tile__more .btn__arrow { width: 16px; transition: transform .2s; }
.service-tile--rojo { --tile: #d3002a; }
.service-tile--azul { --tile: #0073c0; }
.service-tile--navy { --tile: #133e7f; }
a.service-tile:hover .service-tile__hover, a.service-tile:focus-visible .service-tile__hover { opacity: 1; }
a.service-tile:hover .service-tile__title { opacity: 0; }
a.service-tile:hover .service-tile__more .btn__arrow { transform: translateX(4px); }
@media (hover: none) { .service-tile__hover { display: none; } }
.service-card { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 34px; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow); }
.service-card__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 4px; background: color-mix(in srgb, var(--amcham-color-navy) 10%, transparent); color: var(--amcham-color-navy); margin-bottom: 20px; }
.service-card__icon svg { width: 48px; height: 48px; display: block; }
.service-card__icon svg > path { fill: currentColor; }
.service-card__body { display: flex; flex-direction: column; row-gap: 14px; margin-bottom: 24px; }
.service-card__title { font-size: 24px; font-weight: 600; line-height: 1.1; color: var(--amcham-ink); margin: 0; }
.service-card__title a { color: inherit; text-decoration: none; }
.service-card__title a:hover { color: var(--amcham-color-navy); }
.service-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--amcham-ink); }
.service-card__more { margin-top: auto; }
@media (max-width: 1279px) { .home-services__grid { gap: 30px; } .service-tile { padding: 36px 48px; min-height: 280px; } .service-tile__title { font-size: 28px; } }
@media (max-width: 1023px) { .home-services { row-gap: 40px; } .home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Móvil (Figma 936:474): sin foto ni hover; cada mosaico es la tarjeta de color sólido con ícono, título, texto y «Conocer más» siempre visibles.
   Antes el tap disparaba el estado hover dentro de un mosaico de 220 px y el contenido salía cortado (Johann, 14 sep). */
@media (max-width: 767px) {
  .home-services__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-sec--services { padding: 64px 0 0; }
  .service-tile { display: block; min-height: 0; padding: 0; }
  .service-tile__img, .service-tile__veil, .service-tile__title { display: none; }
  .service-tile__hover { display: flex !important; position: static; opacity: 1; padding: 28px 24px 32px; background: var(--tile, var(--amcham-color-navy)); }
  .service-tile__hover::after { width: 260px; height: 253px; right: -50px; bottom: -70px; }
  .service-tile__htitle { font-size: 22px; }
  .service-tile__text { font-size: 14px; margin-bottom: 20px; }
  a.service-tile:hover .service-tile__title { opacity: 1; }
}

/* ---------- Home: compacto y móvil ---------- */
@media (max-width: 1279px) {
  .home-news__grid { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .home-discover { padding: 36px 40px; column-gap: 32px; }
}
@media (max-width: 1023px) {
  .home-hero { height: auto; min-height: 420px; padding: 56px 40px; align-items: center; }
  .home-hero__title { font-size: 34px; margin-bottom: 28px; }
  .home-hero__text { font-size: 17px; margin-bottom: 28px; }
  .home-stats { width: calc(100% - 40px); height: auto; padding: 28px 32px; flex-wrap: wrap; row-gap: 20px; justify-content: space-around; }
  .home-stats__num { font-size: 48px; letter-spacing: -1.5px; }
  .home-stats__sep { display: none; }
  .home-sec--events, .home-sec--ads, .home-sec--services { padding-top: 64px; }
  .home-sec--circles { padding-top: 64px; }
  .home-sec--news { padding-top: 40px; }
  .home-sec--discover { padding: 64px 0; }
  .event-card { min-height: 0; }
  .home-news__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .home-news__list { column-gap: 24px; row-gap: 32px; }
  .home-discover { padding: 32px 28px; }
  .home-discover__title { font-size: 32px; }
}
/* Tablet (768–1023): las cifras en 2 filas × 2 columnas (Johann, 13 sep) */
/* Anuncios por debajo de 1280: el panel lateral queda a ~300 px (texto apiñado) y la altura fija de 307 recorta el panel y el banner 8:3.
   Se apila (imagen completa arriba, panel debajo) hasta 1279; el diseño de dos columnas solo funciona con el contenedor de 1240+ (Johann, 14 sep) */
@media (max-width: 1279px) {
  .home-ads { width: 100%; }
  .ad-card { grid-template-columns: 1fr; min-height: 0; }
  .ad-card__img { height: auto; object-fit: contain; }   /* apilado: banner completo arriba, panel debajo */
  .ad-card__panel { padding: 36px 40px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .home-stats { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: stretch; align-items: stretch; column-gap: 0; row-gap: 0; padding: 20px 40px; }
  /* divisores como en escritorio (1px al 15 %): vertical entre columnas y horizontal entre filas.
     Los separadores ocultos también cuentan como hijos: las cifras ocupan las posiciones 1, 3, 5 y 7 */
  .home-stats__item { justify-content: center; padding: 18px 24px; }
  .home-stats__item:nth-child(3), .home-stats__item:nth-child(7) { border-left: 1px solid rgb(34 34 34 / .15); }
  .home-stats__item:nth-child(5), .home-stats__item:nth-child(7) { border-top: 1px solid rgb(34 34 34 / .15); }
}
@media (max-width: 767px) {
  /* Hero móvil — Figma 718:66: tarjeta 353×575 radio 10, video arriba y degradado vertical
     (transparente → #006EB7 al 38 % → #1C407D al 67 %); contenido a 242 del borde superior, 30 a los lados, 42 abajo */
  /* Johann (7 sep): en móvil el hero va a todo el ancho del viewport, a pantalla completa (100vh menos el header de 80) y sin radio */
  .home-sec--hero { padding-top: 0; }
  .home-hero {
    width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); border-radius: 0;
    min-height: 0;
    padding: 380px 20px 42px 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  }   /* Johann quitó el 100vh al dejar el video en la franja superior: el titular arranca a 380 (video 340 + fundido) y el alto lo da el contenido */
  /* El video es 16:9: si cubriera todo el alto se vería solo el centro del cuadro. Por eso ocupa solo la franja superior
     (--hero-video-h) mostrando casi todo el ancho del cuadro, y el degradado (medido desde arriba) lo funde con el azul. */
  .home-hero { --hero-video-h: 340px; }
  .home-hero__media video, .home-hero__media img { left: 0; top: 0; width: 100%; height: var(--hero-video-h); object-fit: cover; object-position: center; }
  .home-hero__veil { background: linear-gradient(180deg, rgb(0 110 183 / 0) 0, rgb(0 110 183 / 0) 235px, #006EB7 var(--hero-video-h), #1C407D calc(var(--hero-video-h) + 130px), #1C407D 100%); }
  /* Con un video vertical propio para móvil (campo ACF «Video para móvil») sí cubre todo el alto; el degradado se mide desde abajo */
  .home-hero--vertical .home-hero__media video { height: 100%; }
  .home-hero--vertical .home-hero__veil { background: linear-gradient(0deg, #1C407D 0, #1C407D 224px, #006EB7 359px, rgb(0 110 183 / 0) 472px, rgb(0 110 183 / 0) 100%); }
  .home-hero__media:has(> .home-hero__veil:only-child) .home-hero__veil { background: linear-gradient(180deg, #006EB7 0%, #1C407D 60%); }
  .home-hero__content { max-width: none; align-items: center; text-align: center; }   /* Johann (7 sep): el texto del hero centrado solo en móvil */
  .home-hero__title { font-size: 40px; line-height: 1.1; margin-bottom: 16px; max-width: none; min-height: 88px; }   /* Figma 34, Johann pidió menos separación */
  .home-hero__text { font-size: 16px; margin-bottom: 36px; max-width: none; }
  .home-hero__br { display: inline; }   /* salto «primera palabra / resto» solo en móvil */
  /* Frases rotando: todas apiladas en la misma celda; solo la activa se ve */
  .home-hero__title--frases { display: grid; align-items: start; }
  .home-hero__frase { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
  .home-hero__frase.is-active { opacity: 1; transform: none; }
  .home-hero__frase.is-leaving { opacity: 0; transform: translateY(-14px); }
  @media (prefers-reduced-motion: reduce) { .home-hero__frase { transition: none; } }
  .home-stats { margin-top: -16px; flex-direction: column; align-items: flex-start; row-gap: 16px; padding: 24px; }
  /* ---- Opción B «inmersivo» (control «Diseño en móvil» del hero): video de fondo completo, texto centrado abajo,
     cifras dentro del hero en una franja de cristal de 3 columnas ---- */
  .home-hero--inmersivo { min-height: calc(100svh - 80px); padding: 260px 24px 150px; justify-content: flex-end; }
  .home-hero--inmersivo .home-hero__media video, .home-hero--inmersivo .home-hero__media img { height: 100%; object-position: 50% 35%; }
  .home-hero--inmersivo .home-hero__veil { background: linear-gradient(180deg, rgb(28 64 125 / .08) 0, rgb(28 64 125 / .30) 38%, rgb(28 64 125 / .88) 66%, #1C407D 100%); }
  .home-hero--inmersivo .home-hero__content { align-items: center; text-align: center; }
  .home-hero--inmersivo .home-hero__title { font-size: 38px; min-height: 84px; margin-bottom: 14px; }
  .home-hero--inmersivo .home-hero__text { font-size: 15px; line-height: 1.55; margin-bottom: 26px; color: rgb(255 255 255 / .9); }
  .home-hero--inmersivo + .home-stats {
    margin: -111px 20px 20px; width: calc(100% - 40px); position: relative; z-index: 2;   /* la franja queda 20 por encima del borde inferior del hero y el contenedor termina justo en ese borde */
    display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0; row-gap: 10px; padding: 14px 6px 12px;   /* 4 cifras → 2×2 (antes 3 columnas) */
    background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .28); border-radius: 12px; box-shadow: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
  }
  .home-hero--inmersivo + .home-stats .home-stats__item { flex-direction: column; align-items: center; text-align: center; row-gap: 2px; padding: 0 4px; border-left: 1px solid rgb(255 255 255 / .22); }
  .home-hero--inmersivo + .home-stats .home-stats__item:nth-child(1),
  .home-hero--inmersivo + .home-stats .home-stats__item:nth-child(5) { border-left: 0; }   /* los separadores ocultos también cuentan como hijos: ítems en 1,3,5,7 */
  .home-hero--inmersivo + .home-stats .home-stats__item:nth-child(5),
  .home-hero--inmersivo + .home-stats .home-stats__item:nth-child(7) { border-top: 1px solid rgb(255 255 255 / .22); padding-top: 10px; }
  .home-hero--inmersivo + .home-stats .home-stats__num { font-size: 30px; letter-spacing: -1px; color: #fff; }
  .home-hero--inmersivo + .home-stats .home-stats__label { font-size: 11px; line-height: 1.25; color: rgb(255 255 255 / .82); max-width: 96px; }
  .home-hero--inmersivo + .home-stats .home-stats__sep { display: none; }
  .home-stats__item { column-gap: 12px; }
  .home-stats__num { font-size: 40px; }
  /* ---- Opción C «tarjeta» (Figma 936:344): hero como tarjeta 353×580 radio 10 con el video de fondo y degradado vertical
     (transparente → #006EB7 al 45 % → #1C407D al 67 %), texto centrado abajo (38/22), botón rojo a todo el ancho;
     cifras en tarjeta blanca aparte 20 px debajo, apiladas con separadores ---- */
  .home-sec--hero:has(.home-hero--tarjeta) { padding-top: 8px; }   /* Figma 936:342: barra 100 → contenido a 108 */
  .home-hero--tarjeta {
    width: 100%; max-width: none; margin: 0; border-radius: 10px;   /* el contenedor ya trae los 20 px laterales del Figma */
    height: 580px; min-height: 0; padding: 38px 22px; justify-content: flex-end;
  }
  .home-hero--tarjeta .home-hero__media video, .home-hero--tarjeta .home-hero__media img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .home-hero--tarjeta .home-hero__veil, .home-hero--tarjeta.home-hero--vertical .home-hero__veil { background: linear-gradient(180deg, rgb(0 110 183 / 0) 24%, #006EB7 65%, #1C407D 85%, #1C407D 100%); }   /* Figma 936:345: el degradado está desplazado (transform): transparente hasta el 24 %, azul al 65 %, navy al 85 % */
  .home-hero--tarjeta .home-hero__content { align-items: center; text-align: center; width: 100%; }
  .home-hero--tarjeta .home-hero__title { font-size: 40px; line-height: 1.1; margin-bottom: 19px; min-height: 88px; }   /* Figma: 35 px entre la base de «líderes.» y el párrafo; con la interlínea de 44 el margen que lo da es 19 */
  .home-hero--tarjeta .home-hero__text { font-size: 16px; line-height: 1.5; margin-bottom: 36px; }
  .home-hero--tarjeta .home-hero__btn { width: 100%; justify-content: center; }
  /* Cifras de la tarjeta — REJILLA de 2 columnas con eje común (29 oct 2026, v0.142.0).
     Antes cada fila era un flex centrado por su cuenta: los cuatro números arrancaban en cuatro
     sitios distintos, y la etiqueta iba con max-width 72 + flex:0 0 auto, así que «profesionales»
     (95 px a 16) ni cabía ni podía partirse → se salía de la tarjeta y, por debajo de ~371 px de
     viewport, también del documento: ahí Safari dispara el shrink-to-fit y encoge TODA la página.
     Es lo que mandó AmCham el 29 oct: iPhone de 6.1" con la pantalla en modo Zoom = 320 pt.
     Ahora .home-stats__item es display:contents y las 4 cifras comparten las 2 columnas de la
     tarjeta: números a la derecha (eje común) y etiquetas a la izquierda, que parten solas. */
  .home-hero--tarjeta + .home-stats {
    margin: 20px 0 0; width: 100%; position: relative; z-index: 2;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    column-gap: 14px; row-gap: 14px; padding: 28px;
    background: #fff; border-radius: 10px; box-shadow: 0 6px 10px rgb(0 0 0 / .05);
  }
  .home-hero--tarjeta + .home-stats .home-stats__item { display: contents; }
  .home-hero--tarjeta + .home-stats .home-stats__sep { display: block; grid-column: 1 / -1; width: 100%; height: 1px; background: rgb(0 0 0 / .1); }
  .home-hero--tarjeta + .home-stats .home-stats__num { font-size: 56px; letter-spacing: -2px; line-height: 1.1; justify-self: end; }
  .home-hero--tarjeta + .home-stats .home-stats__label { width: auto; max-width: none; min-width: 0; font-size: 16px; line-height: 1.2; overflow-wrap: break-word; }   /* sin tope: las dos líneas del Figma las da el ancho de la columna */
  .home-hero--tarjeta + .home-stats .home-stats__item:first-child .home-stats__label { max-width: none; }
  /* Teléfonos angostos (iPhone en modo Zoom = 320 pt, SE antiguos): a 56 px el número se come la
     columna de la etiqueta. Medido: «+3,000» son 166 px a 56 y «profesionales» pide 95 px a 16. */
  @media (max-width: 374px) {
    .home-hero--tarjeta + .home-stats { padding: 24px 20px; column-gap: 12px; row-gap: 12px; }
    .home-hero--tarjeta + .home-stats .home-stats__num { font-size: 44px; letter-spacing: -1px; }
    .home-hero--tarjeta + .home-stats .home-stats__label { font-size: 15px; }
  }
  .home-events__head { align-items: center; margin-bottom: 24px; }
  .home-events__foot, .home-news__foot { justify-content: flex-start; margin-top: 28px; }
  .home-news__list { grid-template-columns: 1fr; }
  /* Noticias en movil: la destacada se ve igual que las demas (Johann, 20 sep) */
  .home-news__grid { row-gap: 32px; }
  .news-card--featured { row-gap: 20px; }
  .news-card--featured .news-card__img { aspect-ratio: 16 / 9; }
  .news-card--featured .news-card__body { row-gap: 10px; }
  .news-card--featured .news-card__title { font-size: 18px; line-height: 1.35; }
  .news-card--featured .news-card__excerpt { display: none; }
  .ad-card { grid-template-columns: 1fr; min-height: 0; }
  .ad-card__img { height: auto; object-fit: contain; }
  .ad-card__panel { padding: 28px 24px; }
  .home-ads { width: 100%; }   /* Figma móvil 936:342: el anuncio ocupa los 353 del contenedor (en escritorio es 1106 de 1240) */
  .home-ads { padding-bottom: 49px; }   /* 16 + 33 */
  .home-circle__marquee::before, .home-circle__marquee::after { width: 60px; }   /* el degradado de 120 se comia la cinta en movil */
  .home-circle__logo { height: auto !important; max-height: 56px; max-width: 150px; }
  .home-circle--gold .home-circle__logo { width: 110px; max-width: 110px; }
  .home-discover__title { font-size: 30px; }
  .home-discover__p { font-size: 16px; }
  .btn { height: 40px; font-size: 15px; }
}

/* =========================================================
   9. Header claro (portada y páginas con meta amcham_header_claro) — Figma 897:117
   ========================================================= */
body.header-claro .site-header {
  height: 100px;
  background: var(--amcham-bg);
  background-image: none;
  margin-bottom: 0;
}
body.header-claro .site-header::before,            /* sin línea roja */
body.header-claro .site-header__bg,                /* sin marca */
body.header-claro .page-title,                     /* sin título */
body.header-claro .navbar__logo--white { display: none; }
.navbar__logo--color { display: none; }
body.header-claro .navbar__logo--color { display: block; }
body.header-claro .site-header .brx-nav-nested-items > li > a,
body.header-claro .site-header .brx-submenu-toggle > span,
body.header-claro .site-header .brx-submenu-toggle button,
body.header-claro .navbar__lang, body.header-claro .navbar__lang span, body.header-claro .navbar__lang .brxe-text-basic, body.header-claro .navbar__search,
body.header-claro .navbar__toggle { color: var(--amcham-ink); }
body.header-claro .nav-main .brx-submenu-toggle button > svg:not(.svg-inline--fa) path { stroke: currentColor; }
body.header-claro .navbar__lang svg path { fill: currentColor; }
body.header-claro .navbar__search path, body.header-claro .navbar__search svg path { fill: currentColor; }
/* Ítem con el megamenú abierto (Figma 1156:1004): en header claro el texto y el chevron pasan a azul;
   en todos los headers, barra de 3 px pegada al borde inferior de la barra, del ancho del ítem (texto + chevron). */
@media (min-width: 1024px) {
  body.header-claro .site-header .brxe-dropdown.open > .brx-submenu-toggle > span,
  body.header-claro .site-header .brxe-dropdown.open > .brx-submenu-toggle button { color: var(--amcham-color-blue); }
  .nav-main .brxe-dropdown.open > .brx-submenu-toggle::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: calc(50% + var(--amcham-navbar-h, 100px) / 2 - 3px);   /* el li está centrado en la barra: 50% + mitad de la barra = borde inferior */
    height: 3px; border-radius: 2px; background: var(--amcham-color-white); pointer-events: none;
  }
  body.header-claro .nav-main .brxe-dropdown.open > .brx-submenu-toggle::after { background: var(--amcham-color-blue); }
}
@media (max-width: 1023px) {
  body.header-claro .site-header { height: 100px; padding-bottom: 0; }
  /* el panel móvil es navy también con header claro: todo su texto vuelve a blanco */
  body.header-claro .site-header .nav-main .brx-nav-nested-items > li > a,
  body.header-claro .site-header .nav-main .brx-submenu-toggle > span,
  body.header-claro .site-header .nav-main .brx-submenu-toggle button,
  body.header-claro .site-header .nav-main .navbar__toggle-close,
  body.header-claro .site-header .nav-main .navbar__cta--mobile,
  body.header-claro .site-header .nav-main .nav-main__lang a,
  body.header-claro .site-header .nav-main .nav-main__search-btn,
  body.header-claro .site-header .nav-main .nav-main__search-input { color: var(--amcham-color-white); }
}

/* =========================================================
   10. Páginas interiores — Figma «Quiénes Somos» 493:1018
   Contenido 707 · 107 · submenú 426 (contenedor 1240): mismas proporciones que el detalle de noticia (.noticia__cols, Figma WIP 1600:683),
   pedido por Johann el 19 sep 2026. Antes 853 · 67 · 320 (Figma 493:1018). Header (281) + 60 = 341 ≈ 343 del Figma.
   ⚙ Lateral y separación son CONFIGURABLES en Apariencia → Columnas (inc/columnas.php emite --amcham-col-lateral / --amcham-col-gap en % y
   --amcham-col-lateral-md / --amcham-col-gap-md en px para 1024–1279); los valores literales de aquí son solo el fallback = diseño.
   ========================================================= */
.page-cols { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; column-gap: var(--amcham-col-gap, 8.63%); }   /* 107 de 1240, como .noticia__cols · Bricks pone flex-direction:column al container */
.page-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; row-gap: 44px; }
.page-main > * { margin: 0; }
.page-block { display: flex; flex-direction: column; row-gap: 22px; }
.page-block > * { margin: 0; }
.page-block > .imagen { margin-block: 6px; }   /* 29 oct 2026 (Johann): la foto es CONTENIDO -> 22 + 6 = 28, igual que toda cabecera->contenido; era 10 (=32, Figma 2590:1090) */
/* 29 oct 2026 (Johann, Salones): el titulo y su bajada son UN par y abren 14, igual que antetitulo->titulo.
   El row-gap del bloque es 22: -8 = 14. Lo que sigue a la bajada SI es contenido y abre 28 (+6).
   (Esa misma manana la bajada habia quedado en 28; antes, el 28 oct, en 10.) */
.page-block > .brxe-heading + .brxe-text { margin-top: -8px; }
.page-block > .brxe-heading + .brxe-text + * { margin-top: 6px; }
/* ...salvo cuando el titulo trae la linea degradada: entonces no es un titulo suelto sino un
   ENCABEZADO de seccion, la linea lo cierra y la bajada abre 28, igual que en un .sec-head
   (Junta Directiva: .junta__intro 14 + .junta__text 14 = 28). La clase la pone inc/bricks-controles.php.
   Johann, 29 oct 2026: «el espaciado de Que hacemos deberia ser igual al de Junta Directiva». */
.page-block > .brxe-heading.tiene-linea + .brxe-text { margin-top: 6px; }
/* El antetitulo y su titulo tambien son UN par (Johann, 29 oct 2026, Quienes somos): el bloque abria a 22
   y los encabezados de seccion de mas abajo (.sec-head--amplio) a 14; aqui se igualan. */
.page-block > .brxe-text-basic + .brxe-heading { margin-top: -8px; }
/* Tipografía del contenido (títulos H1–H6, texto y enlaces): se controla desde Bricks → Theme Styles «amcham» → Tipografía / Enlaces. Aquí solo quedan márgenes. */
.page-h2 { margin: 0; }
/* Texto enriquecido de Bricks (.brxe-text) sin necesidad de clase; .page-text queda por las páginas ya armadas */
:is(.page-text, .brxe-text) p, :is(.page-text, .brxe-text) ul, :is(.page-text, .brxe-text) ol { margin: 0 0 18px; }
:is(.page-text, .brxe-text) > :last-child { margin-bottom: 0; }
/* Títulos dentro del texto enriquecido: aire arriba proporcional al tamaño, poco abajo (el tamaño lo pone Theme Styles) */
:is(.page-text, .brxe-text) h1, :is(.page-text, .brxe-text) h2, :is(.page-text, .brxe-text) h3, :is(.page-text, .brxe-text) h4, :is(.page-text, .brxe-text) h5, :is(.page-text, .brxe-text) h6 { margin: 0 0 14px; }
:is(.page-text, .brxe-text) h1 { margin-top: 48px; margin-bottom: 16px; }
:is(.page-text, .brxe-text) h2 { margin-top: 40px; }
:is(.page-text, .brxe-text) h3 { margin-top: 32px; margin-bottom: 12px; }
:is(.page-text, .brxe-text) h4 { margin-top: 28px; margin-bottom: 10px; }
:is(.page-text, .brxe-text) h5 { margin-top: 24px; margin-bottom: 8px; }
:is(.page-text, .brxe-text) h6 { margin-top: 20px; margin-bottom: 6px; }
:is(.page-text, .brxe-text) > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.page-text ul, .page-text ol { padding-left: 22px; }
.page-text li { margin: 0; }

/* Cita destacada (componente 493:1153): degradado top-right → bottom-left + marca al 20 % */
.quote {
  position: relative; overflow: hidden; margin: 0; padding: 27px 36px; border-radius: var(--amcham-radius); color: #fff;
  background: var(--amcham-color-light-blue) linear-gradient(243deg, var(--amcham-color-light-blue) 0%, var(--amcham-color-dark-blue) 100%);
  display: flex; flex-direction: column; row-gap: 28px; justify-content: center; min-height: 246px; padding-block: 49px;
}
.quote::before {   /* marca 627×611 recortada: Figma imageTransform */
  content: ''; position: absolute; top: -259px; right: -75px; width: 627px; height: 611px; opacity: .2; pointer-events: none;
  background: url('assets/amcham-mark.webp') no-repeat center / contain;
}
.quote__text, .quote__by { position: relative; margin: 0; }
.quote { border: 0; }   /* el blockquote traía un border-left gris de 4 px del CSS base: el diseño no lo lleva (493:1153, 2413:3683) */
.quote, .quote__by { font-family: var(--amcham-font-body); font-style: normal; }   /* Bricks/WP ponen serif a blockquote */
.quote__text { font-family: var(--amcham-font-heading); font-size: 28px; font-weight: 600; line-height: 1.3; max-width: 695px; }
.quote__by { font-size: 16px; line-height: 1.5; }
.quote__by strong { font-weight: 700; }

/* Documentos descargables (493:1163): 333 × 431, gap 40 */
.docs { display: flex; flex-wrap: wrap; gap: 40px; }
.doc-card {
  position: relative; overflow: hidden; width: 333px; height: 431px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 35px 46px; color: #fff; text-decoration: none; background: var(--amcham-color-navy);
}
.doc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 115 192 / .13) -30%, var(--amcham-color-navy) 73%); }
.doc-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; row-gap: 18px; }
.doc-card__label { color: #F5F5F5; font-weight: 700; }
.doc-card__title { font-family: var(--amcham-font-heading); font-size: 28px; font-weight: 600; line-height: 1.25; }
.doc-card__btn svg { width: 12px; height: auto; flex-shrink: 0; }
.doc-card:hover .doc-card__btn { background: var(--amcham-color-blue-hover); }

/* Submenú lateral (493:1132): tarjeta blanca, padding 50/35, radio 10, sombra 0 6 10 .05. Columna 426 de 1240 (34.35 %, = .noticia__side) */
.subnav-col { flex: 0 0 var(--amcham-col-lateral, 34.35%); width: var(--amcham-col-lateral, 34.35%); display: flex; flex-direction: column; row-gap: 32px; min-width: 0; }
.subnav { width: 100%;   /* la columna (34.35 % = 426 de 1240) la da .subnav-col */ background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); padding: 50px 35px; display: flex; flex-direction: column; row-gap: 29px; }
.subnav__eyebrow { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #707070; }
.subnav__list { list-style: none; margin: 0; padding: 0; }
.subnav__item { border-bottom: .5px solid rgb(158 158 158 / .4); }
.subnav__item:last-child { border-bottom: 0; }
.subnav__item > a { display: block; padding: 18px 0; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--amcham-ink); text-decoration: none; }
.subnav__item:first-child > a { padding-top: 0; }
.subnav__item:last-child > a { padding-bottom: 0; }
.subnav__item > a:hover { color: var(--amcham-color-blue); }
.subnav__item.is-current > a { color: var(--amcham-color-navy); font-weight: 600; }
/* Un nivel más: páginas hijas de la sección actual (Programas → sus 3 programas), Figma WIP 1218:8579 */
.subnav__item.subnav__item--rama > a { padding-bottom: 14px; }   /* clase doblada: :last-child pesa 2 y si no, gana el padding-bottom 0 */
.subnav__sub { list-style: none; margin: 0 0 18px; padding: 0 0 0 14px; display: flex; flex-direction: column; row-gap: 12px; border-left: 1px solid #E6E6E6; }
.subnav__item--rama:last-child .subnav__sub { margin-bottom: 0; }
.subnav__subitem > a { display: block; padding: 0; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--amcham-muted); text-decoration: none; }
.subnav__subitem > a:hover { color: var(--amcham-color-blue); }
.subnav__subitem.is-current > a { color: var(--amcham-color-navy); font-weight: 600; }
/* 3.er nivel (Reconocimiento → sus archivos): misma sangría y hairline, tipo más chica (Figma WIP 2025:484, opción «anidado») */
.subnav__subitem.subnav__subitem--rama > a { padding-bottom: 12px; }
.subnav__sub .subnav__sub { margin: 0; row-gap: 10px; }   /* la separación con el enlace la pone su padding-bottom; si no, se suman las dos */
.subnav__sub .subnav__sub .subnav__subitem > a { font-size: 14px; color: #858585; }
.subnav__sub .subnav__sub .subnav__subitem.is-current > a { color: var(--amcham-color-navy); }

@media (max-width: 1279px) {
  .page-cols { column-gap: var(--amcham-col-gap-md, 40px); }
  .subnav-col { flex-basis: var(--amcham-col-lateral-md, 360px); width: var(--amcham-col-lateral-md, 360px); }   /* = .noticia__cols bajo 1280 */
  .subnav { padding: 36px 28px; }
  .doc-card { width: calc(50% - 20px); }
}
@media (max-width: 1023px) {
  .page-cols { flex-direction: column; row-gap: 44px; }
  .subnav-col { width: 100%; flex-basis: auto; }
  .page-main { width: 100%; }
}
@media (max-width: 767px) {
  .page-main { row-gap: 36px; }
  .quote { padding: 32px 24px; min-height: 0; }
  .quote__text { font-size: 22px; }
  .quote::before { top: -200px; right: -120px; }
  .doc-card { width: 100%; max-width: 333px; height: 400px; }
  .subnav { padding: 28px 22px; }
}

/* =========================================================
   10b. Piezas de contenido reutilizables — salieron del elemento «Quiénes somos (contenido)» al dividirlo (20 sep 2026, Johann)
   .tcolor (tarjetas de color con isotipo) · .anillos (diagrama de 3 anillos + leyenda) · .igrid (tarjetas con ícono) · .numlist (lista numerada).
   Cada pieza es un elemento de Bricks suelto dentro del page-main, que las separa 44 px. Las cifras usan .cifras (sección 7b).
   Medidas heredadas del Figma WIP «Quiénes Somos» 720:542.
   ========================================================= */
.tcolor, .anillos, .igrid, .numlist { width: 100%; min-width: 0; }   /* .cifras-wrap vive en assets/piezas.css */
.tcolor, .anillos, .igrid, .numlist { display: flex; flex-direction: column; }

/* Tarjetas de color: etiqueta en mayúsculas + texto, isotipo al 12 % abajo a la derecha */
.tcolor { row-gap: 26px; }
.tcolor__grid { display: flex; gap: 20px; }
.tcolor__card { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; row-gap: 24px; padding: 32px 34px 34px; border-radius: var(--amcham-radius); color: #fff; }
.tcolor__card--navy { background: var(--amcham-color-navy); }
.tcolor__card--azul { background: var(--amcham-color-light-blue); }
.tcolor__card--rojo { background: var(--amcham-color-red); }
.tcolor__card--blanco { background: #fff; color: var(--amcham-ink); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.tcolor__card .tcolor__iso { position: absolute; right: -48px; bottom: -56px; width: 200px; height: 200px; opacity: .12; z-index: 0; pointer-events: none; }
.tcolor__card .tcolor__iso path { fill: currentColor; }
.tcolor__card > * { position: relative; z-index: 1; }
.tcolor__label { font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: 1.62px; text-transform: uppercase; opacity: .78; }
.tcolor__text { margin: 0; font-size: 17px; line-height: 1.42; }

/* Diagrama de anillos: tarjeta navy con el gráfico y la leyenda de niveles */
.anillos { row-gap: 28px; }   /* 29 oct 2026 (Johann): mas aire del titulo a la tarjeta; era 14 */
.anillos .sec-head { margin-bottom: 0; }
.anillos__card { display: flex; align-items: center; column-gap: 56px; padding: 44px 56px; background: var(--amcham-color-navy); border-radius: var(--amcham-radius); color: #fff; }
.anillos__grafico { flex: 0 0 300px; width: 300px; height: 300px; }
.anillos__grafico svg { display: block; width: 100%; height: 100%; }
.anillos__leyenda { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; row-gap: 22px; }
.anillos__item { display: flex; align-items: flex-start; column-gap: 16px; }
.anillos__marca { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; box-sizing: border-box; }
.anillos__item--1 .anillos__marca { background: #fff; }
.anillos__item--2 .anillos__marca { border: 1.5px solid rgb(255 255 255 / .5); }
.anillos__item--3 .anillos__marca { border: 1.5px solid rgb(255 255 255 / .26); }
.anillos__texto { display: flex; flex-direction: column; row-gap: 2px; min-width: 0; }
.anillos__tag { font-family: var(--amcham-font-heading); font-size: 11.5px; font-weight: 600; line-height: 1.5; letter-spacing: .92px; text-transform: uppercase; opacity: .62; }
.anillos__nombre { font-family: var(--amcham-font-heading); font-size: 19px; font-weight: 600; line-height: 1.26; }
.anillos__desc { font-size: 14.5px; line-height: 1.45; opacity: .78; }
.anillos__nota { margin: 0; font-size: 14px; line-height: 1.55; color: var(--amcham-muted); }
/* 28 oct 2026: se retiro el resalte por nivel al señalar (las reglas :has(), las transiciones de
   opacity/stroke-opacity, el cursor y los anillos de foco). Johann: «ya no es necesario».
   El tabindex="0" de los <li> salio del PHP en la misma pasada: sin resalte no habia nada que enfocar.
   La animacion de entrada (seccion 16c) sigue igual. */
/* Nota con formato (editor): enlaces subrayados; «párrafo» la pone al tamaño del texto, 30 px bajo la tarjeta como en el Figma 2413:3713 */
.anillos__nota p { margin: 0; }
.anillos__nota p + p { margin-top: .6em; }
.anillos__nota a { color: var(--amcham-color-light-blue); text-decoration: underline; text-underline-offset: 2px; }
.anillos__nota--parrafo { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--amcham-ink); }
/* Estilo «claro» (7 oct 2026, Figma «Quiénes Somos» 2479:9324): tarjeta blanca con borde navy al 15 % y los anillos en navy.
   Es el mismo SVG (assets/graf-anillos.svg): aquí se pisan el relleno y el trazo. */
.anillos--claro .anillos__card { background: #fff; border: 1px solid rgb(19 62 127 / .15); color: var(--amcham-ink); }
.anillos--claro .anillo--global circle:not([stroke]) { fill: var(--amcham-color-navy); fill-opacity: .045; }
.anillos--claro .anillo--global circle[stroke] { stroke: var(--amcham-color-navy); stroke-opacity: .28; }
.anillos--claro .anillo--regional circle:not([stroke]) { fill: var(--amcham-color-navy); fill-opacity: .115; }
.anillos--claro .anillo--regional circle[stroke] { stroke: var(--amcham-color-navy); stroke-opacity: .46; }
.anillos--claro circle.anillo--local { fill: var(--amcham-color-navy); }
.anillos--claro .anillo-iso path { fill: #fff; }
.anillos--claro .anillos__item--1 .anillos__marca { background: var(--amcham-color-navy); }
.anillos--claro .anillos__item--2 .anillos__marca { background: rgb(19 62 127 / .115); border: 1.25px solid rgb(19 62 127 / .46); }
.anillos--claro .anillos__item--3 .anillos__marca { background: rgb(19 62 127 / .045); border: 1.25px solid rgb(19 62 127 / .28); }
.anillos--claro .anillos__nombre { font-size: 18px; }
@media (min-width: 1024px) { .anillos--claro .anillos__card { column-gap: 40px; padding: 44px; } }   /* columna de 810: la leyenda gana 40 px y «+20,000 empresas miembro en la región» cabe en una línea */
/* Pastillas con el logo de cada nivel montadas sobre su anillo (28 oct 2026, Figma WIP «Variante A» 3058:255).
   Todas las medidas van en % del grafico para que escalen con los tres tamanos sin reglas por breakpoint.
   El logo va en version OSCURA: la pastilla es blanca. El del centro sigue siendo el isotipo del SVG. */
.anillos__grafico { position: relative; }
.anillos__chip { position: absolute; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgb(19 62 127 / .16); }
.anillos__chip img { display: block; width: 100%; height: auto; }
.anillos__chip--global { top: 11.3%; width: 47%; padding: 3.3% 5.4%; }
.anillos__chip--regional { top: 82.1%; width: 49.7%; padding: 3.57% 5.36%; }
/* Diseño «logos» (28 oct 2026, Figma WIP 3096:733): la tarjeta se parte en DOS PANELES — navy a la
   izquierda con los logos de la red en BLANCO, blanco a la derecha con la leyenda. La tarjeta pierde su
   fondo, su borde y su padding: los ponen los paneles, y el radio lo lleva cada uno por su lado (por eso
   la tarjeta va con overflow:hidden y align-items:stretch). Los logos ocupan el ancho completo de la
   columna — 246 px a 1440 — así que comparten ancho óptico en vez de alto. La leyenda no se toca. */
.anillos--claro .anillos__card--logos, .anillos__card--logos { padding: 0; column-gap: 0; align-items: stretch; background: transparent; border: 0; overflow: hidden; }
.anillos__pila { flex: 0 0 345px; width: 345px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; row-gap: 18px; padding: 44px 49px 44px 50px; background: var(--amcham-color-navy); border-radius: var(--amcham-radius) 0 0 var(--amcham-radius); }   /* 345 = la proporcion del Figma (363/853) llevada a la columna real de 810; el padding deja los logos en 246 */
.anillos__pila .pila__logo { display: block; width: 100%; height: auto; }
.anillos__pila .pila__div { width: 100%; height: 1px; background: rgb(255 255 255 / .2); }
.anillos__panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; background: #fff; color: var(--amcham-ink); border-radius: 0 var(--amcham-radius) var(--amcham-radius) 0; }   /* el color va aqui y no en --claro: el panel es blanco tambien cuando la tarjeta esta en estilo navy */
.anillos__panel .anillos__leyenda { width: 100%; }

/* Tarjetas con ícono: retícula de 2, 3 o 4 columnas */
.igrid { row-gap: 28px; }   /* 29 oct 2026 (Johann): mas aire del titulo a las tarjetas; era 18 por el Figma 2413:3530 (6+12), y 38 antes en el 720:542 */
.igrid__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.igrid__lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.igrid__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.igrid__item { display: flex; flex-direction: column; align-items: flex-start; row-gap: 14px; min-height: 121px; padding: 22px 18px; background: var(--amcham-color-light-blue); border-radius: var(--amcham-radius); color: #fff; }
.igrid__lista--navy .igrid__item { background: var(--amcham-color-navy); }
.igrid__lista--rojo .igrid__item { background: var(--amcham-color-red); }
.igrid__lista--blanco .igrid__item { background: #fff; color: var(--amcham-ink); border: 1px solid rgb(19 62 127 / .09); }   /* principios, Figma 2447:8840 */
.igrid__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: rgb(255 255 255 / .12); }
.igrid__lista--blanco .igrid__ic { background: rgb(19 62 127 / .12); color: var(--amcham-color-navy); }
.igrid__lista--versalitas .igrid__nombre { font-variant-caps: all-small-caps; letter-spacing: .02em; }   /* valores y principios (Figma 2413:3530) */
.igrid__ic svg { width: 26px; height: 26px; display: block; }
.igrid__nombre { font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.25; }
.igrid__texto { font-size: 14.5px; line-height: 1.5; opacity: .86; }
/* Tarjetas de texto (ninguna con ícono) — Figma «Centro de Comercio» 2515:11548 (8 oct 2026): 3 tarjetas azules de 179 con
   nombre 20/1.15 y texto 14.5/1.55 #E4E7EC, 18 entre ellas y la sombra de las tarjetas blancas. Arriba de 767 conservan las 3
   columnas (con 2 la tercera quedaba sola); en móvil van apiladas, nombre ARRIBA del texto (no en fila como las de ícono). */
.igrid__lista--texto { gap: 18px; }   /* v0.92.0: Centro de Comercio · lista con enlace + tarjetas de texto */
.igrid__lista--texto .igrid__item { justify-content: center; min-height: 179px; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }   /* contenido centrado en vertical, como el Figma */
.igrid__lista--texto .igrid__nombre { line-height: 1.15; }
.igrid__lista--texto .igrid__texto { line-height: 1.55; }
.igrid__lista--texto:not(.igrid__lista--blanco) .igrid__texto { color: #E4E7EC; opacity: 1; }
@media (min-width: 768px) and (max-width: 1023px) {
  .igrid__lista--texto.igrid__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .igrid__lista--texto { gap: 14px; }
  .igrid__lista--texto .igrid__item { min-height: 0; flex-direction: column; align-items: flex-start; row-gap: 10px; padding: 20px 18px; }
}

/* Lista numerada: tarjeta blanca con filas separadas por una línea */
.numlist { row-gap: 28px; }   /* 29 oct 2026 (Johann): 28 como el resto; era 20 por el Figma 2413:5903 / 2419:7819, y 42 antes en el 720:542 */
.numlist__lista { list-style: none; margin: 0; padding: 12px 40px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.numlist__item { display: flex; align-items: flex-start; column-gap: 28px; padding: 26px 0; }
.numlist__item + .numlist__item { border-top: 1px solid rgb(0 0 0 / .09); }
.numlist__num { flex: 0 0 56px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--amcham-radius); background: var(--amcham-color-light-blue); color: #fff; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1; }   /* Figma 2419:7262: Avenir 20 */
.numlist__texto { display: flex; flex-direction: column; row-gap: 7px; min-width: 0; }
.numlist__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 19px; font-weight: 600; line-height: 1.22; color: var(--amcham-ink); }
.numlist__desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--amcham-muted); }
@media (max-width: 1023px) {
  .anillos__card { column-gap: 36px; padding: 36px; }
  .anillos__grafico { flex-basis: 280px; width: 280px; height: 280px; }   /* 28 oct 2026: +40 para que las pastillas de logo se lean */
  .anillos__pila { flex-basis: 300px; width: 300px; row-gap: 16px; padding: 36px 32px; }
  .anillos__panel { padding: 36px 32px; }
  .igrid__lista, .igrid__lista--3, .igrid__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tcolor__grid { flex-direction: column; }
  .tcolor__card { flex: 0 0 auto; padding: 26px 24px 28px; }
  .anillos__card { flex-direction: column; row-gap: 28px; padding: 28px 22px; }
  .anillos__grafico { flex-basis: auto; width: 300px; max-width: 100%; height: auto; aspect-ratio: 1; }   /* 28 oct 2026: la tarjeta se apila, hay ancho de sobra y las pastillas necesitan tamano */
  .anillos--claro .anillos__card--logos, .anillos__card--logos { row-gap: 0; }   /* los dos paneles se tocan */
  .anillos__pila { flex-basis: auto; width: 100%; row-gap: 16px; padding: 28px 22px; align-items: center; border-radius: var(--amcham-radius) var(--amcham-radius) 0 0; }   /* a ancho completo los logos van centrados, no pegados a la izquierda */
  .anillos__pila .pila__logo, .anillos__pila .pila__div { max-width: 246px; }
  .anillos__panel { padding: 28px 22px; border-radius: 0 0 var(--amcham-radius) var(--amcham-radius); }
  .anillos__leyenda { width: 100%; }
  .igrid__lista, .igrid__lista--2, .igrid__lista--3, .igrid__lista--4 { grid-template-columns: 1fr; }
  .igrid__item { min-height: 0; flex-direction: row; align-items: center; column-gap: 16px; padding: 16px 18px; }
  .numlist__lista { padding: 4px 20px; }
  .numlist__item { column-gap: 16px; padding: 20px 0; }
  .numlist__num { flex-basis: 44px; width: 44px; height: 44px; font-size: 20px; }
}

/* =========================================================
   10j. Lista con foto (amcham-lista-foto) e Imagen (amcham-imagen) — Figma «Quiénes Somos» 2413:3530 (7 oct 2026)
   .flista: filas en tarjeta blanca r6 de 190 de alto, foto de 287 pegada a la izquierda (cover), título 19/1.22 y
   texto 14.5/1.55 gris (2413:3755, los cinco objetivos). En móvil la foto pasa arriba con la misma proporción.
   .imagen: foto al ancho de la columna con radio 10; --imagen-ratio fija la proporción y recorta por el centro.
   ========================================================= */
.flista { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 16 */
.flista__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 20px; }
.flista__item { display: grid; grid-template-columns: 287px minmax(0, 1fr); align-items: center; column-gap: 28px; min-height: 190px; padding-right: 30px; background: #fff; border-radius: 6px; box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }
.flista__item--sin-foto { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
.flista__foto { position: relative; align-self: stretch; background: #F1F4F8; }
.flista__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.flista__texto { display: flex; flex-direction: column; row-gap: 7px; min-width: 0; padding-block: 24px; }
.flista__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 19px; font-weight: 600; line-height: 1.22; color: var(--amcham-ink); }
.flista__desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--amcham-muted); }
/* Enlace opcional de la fila (Figma «Centro de Comercio» 2493:9915, 8 oct 2026): Avenir 15/1.4 azul, 16 bajo el texto, flecha detrás */
.flista__enlace { align-self: flex-start; margin-top: 9px; }

.imagen { margin: 0; width: 100%; min-width: 0; }
.imagen__img { display: block; width: 100%; height: auto; border-radius: var(--amcham-radius); }
.imagen--recorte .imagen__img { aspect-ratio: var(--imagen-ratio, 16 / 9); object-fit: cover; object-position: center; }
.imagen__pie { margin-top: 12px; font-size: 13px; line-height: 1.5; text-align: left; color: var(--amcham-muted); }   /* Figma 2413:5979: 13 a 12 de la foto */
/* Carrusel (7 oct 2026, Figma 2515:11778): con más de una foto, Splide de Bricks con flechas blancas sobre la foto y sin puntos */
.imagen--carrusel .splide__track { border-radius: var(--amcham-radius); overflow: hidden; }
.imagen__slider { position: relative; }
.imagen__slider .splide__slide { display: block; min-width: 0; }
.imagen__slider .imagen__img { border-radius: 0; }
.imagen__slider .splide__arrow.imagen__flecha { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgb(255 255 255 / .85); opacity: 1; transform: translateY(-50%); cursor: pointer; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .45)); transition: color .2s, background-color .2s; }
.imagen__slider .splide__arrow.imagen__flecha:hover { color: #fff; background: rgb(0 0 0 / .2); }
.imagen__slider .splide__arrow.imagen__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.imagen__slider .splide__arrow--prev.imagen__flecha { left: 14px; }
.imagen__slider .splide__arrow--next.imagen__flecha { right: 14px; }
.imagen__flecha svg { width: 26px; height: 26px; transform: none; }   /* Splide voltea el svg de «anterior»; aquí cada flecha ya trae su ícono */

@media (max-width: 767px) {
  .flista__item { grid-template-columns: minmax(0, 1fr); column-gap: 0; min-height: 0; padding-right: 0; }
  .flista__item--sin-foto { padding-left: 0; }
  .flista__foto { aspect-ratio: 287 / 190; }
  .flista__texto { padding: 18px 20px 22px; }
}

/* =========================================================
   10k. Banda destacada (amcham-banda) y Documento destacado (amcham-documento-destacado) — Figma «Programas» 2413:5903 / 2419:7302 (7 oct 2026)
   .banda: franja navy con el isotipo (assets/cta-fondo-isotipo.jpg) o degradado con la marca; antetítulo 13 al 62 % y texto 19/1.6.
   .docdest: tarjeta blanca con la portada (253 × 329, radio 10, sombra) y etiqueta 14 navy, título 24, texto 15.5 gris y botón.
   ========================================================= */
.banda { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; row-gap: 20px; width: 100%; min-width: 0; min-height: 194px; padding: 44px; box-sizing: border-box; border-radius: var(--amcham-radius); color: #fff; }
.banda--isotipo { background: var(--amcham-color-navy) url('assets/cta-fondo-isotipo.jpg') no-repeat right center / cover; }
.banda--degradado { background: var(--amcham-color-light-blue) linear-gradient(186deg, var(--amcham-color-light-blue) 22%, var(--amcham-color-dark-blue) 94%); }
.banda--degradado::before { content: ''; position: absolute; z-index: -1; top: -259px; right: -75px; width: 627px; height: 611px; opacity: .2; pointer-events: none; background: url('assets/amcham-mark.webp') no-repeat center / contain; }
.banda__eyebrow { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .52px; text-transform: uppercase; color: rgb(255 255 255 / .62); }
.banda__texto { font-size: 19px; line-height: 1.6; }
.banda__texto p { margin: 0; }
.banda__texto p + p { margin-top: .6em; }
.banda__texto a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.docdest { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }   /* 29 oct 2026 (Johann): era 19 */
.docdest__card { display: flex; align-items: center; column-gap: 36px; padding: 36px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.docdest__portada { flex: 0 0 253px; width: 253px; aspect-ratio: 253 / 329; overflow: hidden; border-radius: var(--amcham-radius); background: #F1F4F8; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.docdest__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.docdest__texto { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; row-gap: 14px; }
.docdest__etiqueta { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.2; text-transform: uppercase; color: var(--amcham-color-navy); }
.docdest__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 600; line-height: 1.28; color: var(--amcham-ink); }
.docdest__desc { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--amcham-muted); }
.docdest .btn { }   /* Figma 2508:11301: tamaño compacto, ya en la regla de tamaños de .btn */
.docdest .btn .btn__arrow { width: 14px; }
@media (max-width: 767px) {
  .banda { min-height: 0; padding: 28px 22px; row-gap: 14px; }
  .banda__texto { font-size: 17px; }
  .docdest__card { flex-direction: column; align-items: flex-start; row-gap: 24px; padding: 24px; }
  .docdest__portada { flex-basis: auto; width: 200px; }
}

/* =========================================================
   10c. Áreas de trabajo — Figma WIP «Qué hacemos» 1618:2315 (elemento amcham-areas dentro del page-main, 20 sep 2026)
   7 oct 2026: Figma «Qué hacemos» 2413:3836 y «Programas» 2413:5108 → tarjeta de 268 de alto mínimo, texto 16, enlace con 8 arriba.
   Tarjeta blanca de dos columnas: foto de 300 pegada al borde izquierdo (object-fit: cover, alto de la tarjeta)
   y texto con título 24, descripción 16/1.6, lista con punto rojo y enlace navy con la flecha delante.
   La tarjeta mide 310 de alto en el diseño; min-height lo sostiene cuando el texto es más corto.
   Sin foto cae al mosaico de color con el ícono del registro (slots eje-*), alternando navy y azul: es lo que
   había antes del 20 sep, y sigue sirviendo de red si AmCham borra una imagen.
   Figtree del Figma = Avenir Next del sitio (regla tipográfica, sección 1).
   ========================================================= */

.areas { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }   /* 29 oct 2026 (Johann): era 25 */

.areas__card { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 300px;   /* 268 -> 300 el 20 oct 2026: +12% de alto para que el contenido no toque el borde */ background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }

/* Foto: ocupa toda la altura de la tarjeta y recorta por el centro */
.areas__foto { position: relative; align-self: stretch; min-height: 100%; background: #F1F4F8; }
.areas__foto .areas__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.areas__foto--contener { background: #fff; }   /* 20 oct 2026: encuadre «contener» para tarjetas cuya «foto» es un logo (Programas → Reconocimiento Liderazgo Sostenible) */
.areas__foto--contener .areas__img { box-sizing: border-box; padding: 26px; object-fit: contain; }
@media (max-width: 767px) { .areas__foto--contener .areas__img { padding: 18px; } }

/* Respaldo sin foto: el mosaico de color con el ícono (navy / azul por posición) */
.areas__tile { display: flex; align-items: flex-start; padding: 28px; background: var(--amcham-color-navy); color: #fff; }
.areas__tile--azul { background: var(--amcham-color-blue); }
.areas__tile-icono { display: grid; place-items: center; width: 64px; height: 64px; font-size: 56px; line-height: 1; }
.areas__tile-icono svg.svg-inline--fa { width: 56px; height: 56px; vertical-align: 0; }   /* el viewBox encaja el ícono en 56 × 56 sin deformarlo */

.areas__texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; row-gap: 12px; min-width: 0; padding: 40px 36px; }   /* vertical 32 -> 40 (20 oct 2026) */
.areas__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.areas__desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--amcham-muted); }   /* 16 desde los Figma 2413:3836 / 2413:5108 (antes 17) */
.areas__meta { margin: 0; padding-top: 4px; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--amcham-muted); }   /* línea de datos de la tarjeta (Programas) */

/* Cabecera de sección opcional (Programas): 44 del .page-main + 32 = los 76 del Figma 2413:5164 (antes 18 → 62); 25 del row-gap + 7 = los 32 hasta la primera tarjeta */
.areas--con-cabecera { padding-top: 0; }   /* 32 -> 0 el 20 oct 2026: la separación con el elemento de arriba ya la da el row-gap de 44 de .page-main */
.areas__head { margin-bottom: 0; }   /* 29 oct 2026 (Johann): los 7 extra sobraban; el row-gap de .areas ya da 28 */

.areas__items { list-style: none; margin: 0; padding: 6px 0 0; display: flex; flex-direction: column; row-gap: 8px; }
.areas__items li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; color: var(--amcham-ink); }
.areas__items li::before { content: ''; position: absolute; left: 0; top: 6.5px; width: 8px; height: 8px; border-radius: 50%; background: #D3002A; }

/* El enlace lleva la flecha delante, como los botones del sitio */
.areas__enlace { padding-top: 8px; line-height: 1; }
/* Foto y título enlazados al mismo destino que «Conocer…» (18 oct) */
.areas__titulo-enlace { color: inherit; text-decoration: none; transition: color .2s; }
.areas__titulo-enlace:hover, .areas__card:has(a.areas__foto:hover) .areas__titulo-enlace { color: var(--amcham-color-blue); }
a.areas__foto, a.areas__tile { display: block; overflow: hidden; }
a.areas__foto .areas__img { transition: transform .4s var(--amcham-ease, ease); }
a.areas__foto:hover .areas__img { transform: scale(1.03); }
.areas__card:has(a.areas__foto:hover, .areas__titulo-enlace:hover) .areas__enlace-ic { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { a.areas__foto .areas__img { transition: none; } a.areas__foto:hover .areas__img { transform: none; } }

@media (max-width: 1279px) {
  .areas__card { grid-template-columns: 240px minmax(0, 1fr); }
  .areas__tile { padding: 24px; }
  .areas__texto { padding: 36px 30px; }   /* vertical 28 -> 36 (20 oct 2026) */
}

@media (max-width: 767px) {
  .areas { row-gap: 28px; }   /* 29 oct 2026 (Johann): en movil tambien 28; era 20 */
  .areas__card { grid-template-columns: 1fr; min-height: 0; }   /* la foto pasa a ser una banda arriba */
  .areas__foto { height: 200px; min-height: 0; }
  .areas__tile { padding: 20px 22px; }
  .areas__tile-icono { width: 44px; height: 44px; font-size: 40px; }   /* el Kit de FA manda width: 1em con más peso que el ancho fijo: el tamaño real lo da el font-size */
  .areas__tile-icono svg.svg-inline--fa { width: 40px; height: 40px; }
  .areas__texto { padding: 22px 22px 26px; }
  .areas__titulo { font-size: 21px; }
  .areas__desc { font-size: 15px; }
}

/* =========================================================
   10d. Piezas de la página de Contacto — Figma WIP «Contacto» 1837:421
   El 20 oct 2026 la página se dividió en piezas y desapareció el elemento amcham-contacto (y con él
   .contacto__*, .area-card*, .map-card*). Hoy la arman: amcham-bloque (intro) · amcham-preguntas (FAQ) ·
   amcham-tarjetas con campo «tema» (.tcard--enlazada, sección 10g) · amcham-formulario (.form-card--simple) ·
   amcham-mapa (.mapa) · amcham-datos-contacto y amcham-redes en tarjeta (.contact-card) · amcham-cta-tarjeta.
   Formulario = Gravity Forms (tema Orbital) ajustado con sus variables --gf-* para que los campos sean los del
   sitio: 48 px de alto, borde #949494, radio 4, etiqueta 13/500 en Avenir, botón navy de 44.
   ========================================================= */
/* Variantes de la columna interior que pide esta página (genéricas, reutilizables) */
.page-main--suelto { row-gap: 56px; }
.subnav-col--duo { row-gap: 20px; }

/* Tarjeta del formulario */
.form-card { display: flex; flex-direction: column; row-gap: 28px; padding: 40px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.form-card__head { display: flex; flex-direction: column; row-gap: 10px; }
.form-card__head .eyebrow { font-size: 14px; }
.form-card__aviso { margin: 0; color: var(--amcham-muted); }
/* Gravity Forms (Orbital): variables del tema de GF + lo que no se puede por variable */
.form-card .gform_wrapper.gform-theme {
  --gf-font-family-primary: var(--amcham-font-body); --gf-color-primary: var(--amcham-color-navy);
  --gf-ctrl-border-color: #949494; --gf-ctrl-border-color-hover: #767676; --gf-ctrl-border-color-focus: var(--amcham-color-navy); --gf-ctrl-border-color-error: var(--amcham-color-red);
  --gf-ctrl-radius: 4px; --gf-ctrl-size-md: 48px; --gf-ctrl-font-size: 15px; --gf-ctrl-padding-x: 16px; --gf-ctrl-shadow: none; --gf-ctrl-color: var(--amcham-ink);
  --gf-ctrl-label-font-family-primary: var(--amcham-font-heading); --gf-ctrl-label-font-weight-primary: 500; --gf-label-space-primary: 8px;
  --gf-form-gap-y: 20px; --gf-field-gap-x: 20px; --gf-field-gap-y: 20px;
  --gf-ctrl-btn-bg-color-primary: var(--amcham-color-navy); --gf-ctrl-btn-bg-color-hover-primary: var(--amcham-color-blue); --gf-ctrl-btn-color-primary: #fff;
  --gf-ctrl-btn-size-md: 44px; --gf-ctrl-btn-padding-x-md: 28px; --gf-ctrl-btn-font-size-md: 15px; --gf-ctrl-btn-radius: 4px;
}
.form-card .gform_wrapper .gform_heading { display: none; }
.form-card .gform_wrapper .gfield_label { font-size: 13px; line-height: 1.25; color: var(--amcham-ink); }
.form-card .gform_wrapper .gfield_required { color: var(--amcham-color-red); padding-left: 3px; }
.form-card .gform_wrapper textarea { min-height: 140px; line-height: 1.5; padding-top: 14px; padding-bottom: 14px; }
.form-card .gform_wrapper select { padding-right: 40px; }
.form-card .gform_wrapper .gfield--type-consent .gfield_consent_label { font-size: 14px; line-height: 1.5; color: var(--amcham-ink); }
.form-card .gform_wrapper .gfield--type-consent .gfield_consent_label a { color: var(--amcham-color-navy); text-decoration: underline; text-underline-position: from-font; }
.form-card .gform_wrapper .gfield--type-consent .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.form-card .gform_wrapper .gform_footer { display: flex; margin-top: 28px; padding: 0; }   /* el botón va solo, a todo el ancho, separado del consentimiento (19 oct 2026) */
.form-card .gform_wrapper.gform-theme .gform_footer .gform_button { flex: 1 1 100%; width: 100%; font-family: var(--amcham-font-heading); font-weight: 600; border-radius: 4px; }
.form-card .gform_wrapper .gform_validation_errors { border-color: var(--amcham-color-red); }
.form-card .gform_confirmation_message { font-size: 17px; line-height: 1.6; color: var(--amcham-ink); }
/* «simple» = la tarjeta blanca de Contacto: el título va a la medida de los títulos de sección de la página (30) */
.form-card--simple .form-card__titulo { font-size: 30px; line-height: 1.2; }
.form-card--simple .form-card__texto { font-size: 16px; line-height: 1.6; color: var(--amcham-muted); max-width: 700px; }

/* Mapa incrustado (amcham-mapa); la dirección vive en la tarjeta de datos de la columna lateral */
.mapa { display: flex; flex-direction: column; row-gap: 24px; width: 100%; min-width: 0; }
.mapa__embed { position: relative; height: var(--mapa-alto, 360px); border-radius: var(--amcham-radius); overflow: hidden; background: #E7ECF0; }
.mapa__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Lateral: datos de contacto (Ajustes AmCham), tarjeta navy de membresía (.subnav-cta) y redes */
.contact-card { display: flex; flex-direction: column; row-gap: 18px; padding: 35px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.contact-card__eyebrow { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #707070; }
.contact-card__list { margin: 0; display: flex; flex-direction: column; }
.contact-card__row { display: flex; column-gap: 12px; padding: 16px 0; border-top: 1px solid #E2E2E2; }
.contact-card__row:first-child { border-top: 0; padding-top: 0; }
.contact-card__row:last-child { padding-bottom: 0; }
.contact-card__row > div { min-width: 0; }
.contact-card__icon { flex: 0 0 18px; width: 18px; display: flex; justify-content: center; padding-top: 3px; color: var(--amcham-color-navy); font-size: 16px; }
.contact-card__icon svg { width: 18px; height: 18px; }
.contact-card__row dt { margin: 0 0 4px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--amcham-muted); }
.contact-card__row dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); overflow-wrap: anywhere; }
.contact-card__row dd a { color: var(--amcham-color-navy); text-decoration: none; }
.contact-card__row dd a:hover { text-decoration: underline; }
.contact-card__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }
.contact-redes { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-redes a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amcham-color-navy); color: #fff; transition: background .2s ease; }
.contact-redes a:hover { background: var(--amcham-color-blue); }
.contact-redes svg { width: 18px; height: 18px; display: block; }
.contact-redes svg path { fill: #fff; }
/* Tarjeta navy con el isotipo al fondo (19 oct 2026) — .subnav-cta--marca: la tarjeta de amcham-cta-tarjeta en Contacto y «Únase al comité» (.comite-cta) */
.subnav-cta--marca { position: relative; overflow: hidden; isolation: isolate; }
.subnav-cta--marca::before {   /* la misma marca de .cta-band--apilado, recortada: se ve la esquina inferior izquierda arriba a la derecha */
  content: ''; position: absolute; z-index: -1; top: -130px; right: -70px; width: 330px; height: 322px; opacity: .2; pointer-events: none;
  background: url('assets/amcham-mark.webp') no-repeat center / contain;
}

@media (max-width: 1279px) {
  .form-card { padding: 32px; }
}
@media (max-width: 1023px) {
  .page-main--suelto { row-gap: 48px; }
  /* el lateral de Contacto va en dos columnas en tablet; la tarjeta de redes ocupa las dos */
  .subnav-col--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .subnav-col--duo > .contact-card--redes { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .form-card { padding: 24px 20px; }
  .form-card .gform_wrapper { --gf-field-gap-x: 0px; }
  .form-card--simple .form-card__titulo { font-size: 26px; }
  .subnav-col--duo { grid-template-columns: 1fr; }
  .mapa__embed { height: auto; display: flex; flex-direction: column; background: transparent; border-radius: 0; overflow: visible; }
  .mapa__embed iframe { position: static; height: 260px; border-radius: var(--amcham-radius); }
}
/* =========================================================
   10e. Portada de sección — páginas padre (/amcham/, /membresia/, /networking/, /negocios/)
   Figma WIP página «Parent page» (frames 1856:428 y 1861:644, 19 sep 2026). Elemento amcham-seccion.
   Una sola columna de 1240 (estas páginas llevan el submenú apagado): intro a 800 de ancho
   + una tarjeta por página hija. Las columnas las pone el elemento (--2 / --3 / --4).
   ========================================================= */
.seccion { display: flex; flex-direction: column; row-gap: 60px; width: 100%; }
.seccion__head { display: flex; flex-direction: column; row-gap: 28px; max-width: 800px; }
.seccion__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--amcham-ink); }
.seccion__paginas { display: flex; flex-direction: column; row-gap: 25px; }
.seccion__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 21px; }
.seccion__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seccion__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seccion__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seccion__item { margin: 0; display: flex; }
.seccion__card {
  flex: 1 1 auto; display: flex; flex-direction: column; row-gap: 10px; padding: 28px 26px;
  background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05);
  text-decoration: none; transition: transform .25s var(--amcham-ease), box-shadow .25s var(--amcham-ease);
}
.seccion__card:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgb(0 0 0 / .08); }
.seccion__card-head { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 12px; }
.seccion__card-title { font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.seccion__card-arrow { flex: 0 0 auto; display: flex; align-items: center; height: 26px; color: var(--amcham-color-navy); transition: transform .25s var(--amcham-ease); }
.seccion__card-arrow svg { width: 16px; height: auto; }
.seccion__card:hover .seccion__card-arrow { transform: translateX(4px); }
.seccion__card-desc { font-size: 15px; line-height: 1.55; color: #6F6F6F; }
@media (max-width: 1279px) {
  .seccion__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 4 hijas: 2×2 en vez de 3+1 */
}
@media (max-width: 1023px) {
  .seccion { row-gap: 48px; }
  .seccion__grid--3, .seccion__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seccion__head { max-width: none; }
}
@media (max-width: 767px) {
  .seccion__grid { grid-template-columns: 1fr !important; }
  .seccion__card { padding: 24px 22px; }
  .seccion__intro { font-size: 16px; }
}

/* =========================================================
   10f. Programas de RSE (/amcham/programas/) — Figma WIP «Programas · Home» 1218:8533 (elemento amcham-rse, 20 sep 2026)
   Intro (antetítulo + título con la línea degradada + dos párrafos 17/1.75), la tarjeta de cifras del programa
   bandera (helper amcham_cifras en 2×2, con la escala chica de esta página) y la banda azul del reconocimiento
   de AACCLA (mismo degradado y marca de agua que la cita destacada, sección 10).
   Las tres tarjetas de programa las pinta amcham-areas con su cabecera (sección 10c).
   ========================================================= */
.rse { display: flex; flex-direction: column; row-gap: 40px; width: 100%; min-width: 0; }
.rse__intro { display: flex; flex-direction: column; row-gap: 28px; }   /* 29 oct 2026 (Johann): era 30 */
.rse .sec-head { row-gap: 14px; }   /* 29 oct 2026 (Johann): su cabecera no es --amplio y abria a 10 */
.rse__texto { font-size: 17px; line-height: 1.75; color: var(--amcham-ink); }
.rse__texto p { margin: 0; }
.rse__texto p + p { margin-top: 22px; }

/* Cifras: la tarjeta 2×2 del tema (sección 7b) con la escala del Figma de esta página */
.rse__cifras .cifras__valor { font-size: 38px; }
.rse__cifras .cifras__texto { font-size: 14px; line-height: 1.4; color: var(--amcham-muted); }

/* Banda del reconocimiento de AACCLA */
.rse__banda {
  position: relative; overflow: hidden; padding: 36px 40px; border-radius: var(--amcham-radius); color: #fff;
  background: var(--amcham-color-light-blue) linear-gradient(186deg, var(--amcham-color-light-blue) 22%, var(--amcham-color-dark-blue) 94%);
  display: flex; flex-direction: column; row-gap: 12px;
}
.rse__banda::before {   /* la misma marca recortada de .quote */
  content: ''; position: absolute; top: -259px; right: -75px; width: 627px; height: 611px; opacity: .2; pointer-events: none;
  background: url('assets/amcham-mark.webp') no-repeat center / contain;
}
.rse__banda-eyebrow, .rse__banda-texto { position: relative; margin: 0; }
.rse__banda-eyebrow { font-size: 12px; color: rgb(255 255 255 / .75); }
.rse__banda-texto { font-size: 19px; line-height: 1.6; }

@media (max-width: 1279px) {
  .rse__cifras .cifras__valor { font-size: 34px; }
}
@media (max-width: 767px) {
  .rse { row-gap: 32px; }
  .rse__intro { row-gap: 28px; }   /* 29 oct 2026 (Johann): en movil tambien 28; era 24 */
  .rse__texto { font-size: 16px; line-height: 1.7; }
  .rse__texto p + p { margin-top: 18px; }
  .rse__banda { padding: 26px 22px; }
  .rse__banda-texto { font-size: 17px; }
  .areas--con-cabecera { padding-top: 0; }   /* 6 -> 0 (20 oct 2026) */
}

/* =========================================================
   10g. Tarjetas con ícono y enlace (retícula) — elemento amcham-tarjetas
   Salió de «Beneficios de la membresía» el 20 sep 2026 al dividirlo en piezas (Johann): tarjeta blanca con el
   ícono en caja tintada, título 20, texto 14 gris y enlace azul pegado abajo. Antes .benefits__grid / .benefit-card.
   ========================================================= */
.tcards { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 24 */
.tcards__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.tcards__lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tcards__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcards__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tcard { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.tcard__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 8px; background: color-mix(in srgb, var(--amcham-color-light-blue) 10%, #fff); color: var(--amcham-color-navy); }
.tcard__ic svg { width: 22px; height: 22px; }
.tcard__ic svg > path { fill: currentColor; }
.tcard__titulo { margin: 0 0 8px; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.tcard__texto { margin: 0; font-size: 14px; line-height: 1.6; color: #6F6F6F; }
.tcard__enlace { margin-top: auto; padding-top: 18px; }
/* Tarjeta enlazada (campo «tema», 20 oct 2026): toda la tarjeta es un <a>; el enlace de abajo es un <span>
   y el hover lo dispara la tarjeta, como en el resto de tarjetas enlazadas del sitio. */
.tcards__lista > li { display: flex; }
.tcard--enlazada { flex: 1 1 auto; min-width: 0; color: var(--amcham-ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.tcard--enlazada:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgb(0 0 0 / .08); color: var(--amcham-ink); }
.tcard--enlazada.is-activa { box-shadow: 0 0 0 2px var(--amcham-color-navy), 0 6px 10px rgb(0 0 0 / .05); }
.tcard--enlazada:hover .tcard__enlace { color: var(--amcham-color-blue-hover); }
.tcard--enlazada:hover .tcard__enlace > svg { transform: translateX(3px); }
@media (max-width: 1023px) {
  .tcards__lista--3, .tcards__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .tcards__lista { grid-template-columns: 1fr; }
}

/* =========================================================
   10h. Testimonios (carrusel de citas y video) — elemento amcham-testimonios
   Salió de «Beneficios de la membresía» el 20 sep 2026 (Johann). Splide en fundido: la cabecera con las flechas
   va DENTRO del .splide y los puntos debajo; el video abre el iframe en el mismo espacio (assets/amcham.js).
   La cita usa el mismo lenguaje que la «Cita en degradado» del cuerpo de noticia (bloque 12b, inc/cita.php).
   ========================================================= */
.testi { width: 100%; min-width: 0; }
.testi .sec-head { row-gap: 0; }
.testi__head { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; margin-bottom: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al carrusel; era 10 */
.testi__slider { width: 100%; min-width: 0; }
.testi__slider .splide__track { border-radius: var(--amcham-radius); }
.testi__slider .splide__track { height: auto !important; }   /* el slide activo manda la altura (al abrir el iframe crece) */
.testi__slider .splide__slide { min-width: 0; display: block; text-align: left; }   /* Bricks centra el contenido de los slides anidados */
.testi__slider .testi__video, .testi__slider .testi__quote { width: 100%; }
.testi__video-play[hidden] { display: none; }
.testi__slider .splide__pagination { position: static; width: 100%; left: auto; bottom: auto; transform: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; }
.testi__slider .splide__pagination__page { width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgb(19 62 127 / .25); opacity: 1; transform: none; transition: background .2s, transform .2s; }
.testi__slider .splide__pagination__page.is-active { background: var(--amcham-color-navy); transform: scale(1.25); }
/* Cita sobre el degradado de marca */
.testi__quote { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; width: 100%; display: flex; align-items: flex-start; column-gap: 24px; margin: 0; padding: 32px 168px 32px 36px; border-radius: var(--amcham-radius); background: var(--amcham-color-light-blue) linear-gradient(243deg, var(--amcham-color-light-blue) 0%, var(--amcham-color-dark-blue) 100%); color: #fff; font-family: var(--amcham-font-body); font-style: normal; }
.testi__quote > * { position: relative; z-index: 1; }
/* Isotipo: la marca COMPLETA como sello abajo a la derecha. Va por right/bottom (no top) para que no se mueva cuando la cita crece; el padding-right de 168 (36 + 96 + 36) le reserva la franja. */
.testi__quote::after { content: ''; position: absolute; right: 36px; bottom: 24px; z-index: 0; width: 96px; height: 96px; background: #fff; opacity: .18; pointer-events: none; -webkit-mask: url('assets/icon-amcham-mark.svg') no-repeat center / contain; mask: url('assets/icon-amcham-mark.svg') no-repeat center / contain; }
.testi__quote-mark { flex: 0 0 48px; width: 48px; font-family: var(--amcham-font-heading); font-size: 72px; font-weight: 600; line-height: .8; color: rgb(255 255 255 / .55); }
.testi__quote-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; row-gap: 24px; }
.testi__quote-text { margin: 0; font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 600; line-height: 1.3; color: #fff; }
.testi__quote-by { display: flex; align-items: center; column-gap: 14px; }
.testi__quote-photo { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #fff; }
.testi__quote-photo--empty { display: grid; place-items: center; background: rgb(255 255 255 / .18); color: #fff; }
.testi__quote-photo--empty svg { width: 20px; height: 20px; }
.testi__quote-by span { display: flex; flex-direction: column; row-gap: 1px; }
.testi__quote-by strong { font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 700; line-height: 1.5; color: #fff; }
.testi__quote-by small { font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / .8); }
.testi__quote--sin-firma { padding-right: 148px; }
.testi__quote--sin-firma::after { width: 76px; height: 76px; bottom: 20px; }
/* Video: portada 16:9 con botón de reproducir; al hacer clic se sustituye por el iframe (assets/amcham.js) */
.testi__video { margin: 0; overflow: hidden; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.testi__video-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--amcham-color-navy); cursor: pointer; overflow: hidden; }
.testi__video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--amcham-ease, ease); }
.testi__video-play:hover .testi__video-thumb { transform: scale(1.03); }
.testi__video-play::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(19 62 127 / 0) 40%, rgb(19 62 127 / .55) 100%); }
.testi__video-btn { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--amcham-color-red); color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .25); transition: transform .2s, background .2s; }
.testi__video-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.testi__video-play:hover .testi__video-btn { transform: translate(-50%, -50%) scale(1.06); background: var(--amcham-color-red-hover); }
.testi__video-play:focus-visible { outline: 3px solid var(--amcham-color-light-blue); outline-offset: -3px; }
.testi__video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.testi__video-cap { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px; padding: 18px 24px 20px; text-align: left; }
.testi__video-cap strong { font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.testi__video-cap small { font-size: 13px; line-height: 1.5; color: #6F6F6F; }
.testi__video-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amcham-color-red); }
.testi__video-tag svg { width: 16px; height: 16px; }
/* Bajo 1280 la columna se estrecha (el submenú de la plantilla interior le come ancho): la comilla pasa arriba,
   el padding vuelve a 36 y el sello sube a la esquina superior derecha — igual que la cita del cuerpo de noticia. */
@media (max-width: 1279px) {
  .testi__quote, .testi__quote--sin-firma { flex-direction: column; column-gap: 0; row-gap: 16px; padding-right: 36px; }
  .testi__quote-mark { flex: 0 0 auto; width: auto; font-size: 60px; }
  .testi__quote::after, .testi__quote--sin-firma::after { right: 32px; top: 30px; bottom: auto; width: 76px; height: 76px; }
}
@media (max-width: 767px) {
  .testi__head { flex-wrap: wrap; row-gap: 12px; }
  .testi__video-btn { width: 56px; height: 56px; }
  .testi__video-btn svg { width: 20px; height: 20px; }
  .testi__video-cap { padding: 14px 18px 16px; }
  .testi__quote, .testi__quote--sin-firma { flex-direction: column; row-gap: 16px; padding: 28px 24px; }
  .testi__quote-mark { flex: 0 0 auto; width: auto; height: 40px; line-height: .6; font-size: 60px; }
  .testi__quote-body { row-gap: 20px; }
  .testi__quote-text { font-size: 20px; }
  .testi__quote::after, .testi__quote--sin-firma::after { right: 20px; top: 22px; bottom: auto; width: 48px; height: 48px; opacity: .16; }
}

/* =========================================================
   10i. Pasos numerados como pieza suelta — elemento amcham-pasos
   Solo la cabecera y su aire: la lista la pinta amcham_pasos() con las reglas .pasos* de la sección 7b.
   ========================================================= */
.pasos-sec { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 24 */

/* =========================================================
   11. Personas (Junta directiva / Equipo) y Contacto — campos ACF
   ========================================================= */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 40px; }
.person { display: flex; flex-direction: column; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow); overflow: hidden; }
.person__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.person__img--empty { display: flex; align-items: center; justify-content: center; background: #E6E6E6; color: #9E9E9E; }
.person__img--empty svg { width: 40%; height: auto; }
.person__body { position: relative; padding: 20px 24px 24px; display: flex; flex-direction: column; row-gap: 4px; }
.person__name { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0; color: var(--amcham-ink); padding-right: 32px; }
.person__role { margin: 0; font-size: 15px; line-height: 1.4; color: var(--amcham-ink); }
.person__org { margin: 0; font-size: 14px; line-height: 1.4; color: var(--amcham-muted); }
.person__link { position: absolute; top: 20px; right: 20px; color: var(--amcham-color-blue); display: block; }
.person__link svg { width: 20px; height: 20px; display: block; }
.person__link svg path { fill: currentColor; }
.person__link:hover { color: var(--amcham-color-navy); }


@media (max-width: 1279px) { .people { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 767px)  { .people { grid-template-columns: 1fr; } }


/* =========================================================
   11b. Junta directiva — elemento amcham-junta (Figma Ideas: tarjetas 857:1486 · ficha en modal v2 1412:1148 · estados 1414:855 · 15 sep 2026)
   Intro + grupos (2 col = tarjetas grandes 416×264 · 4 col = 200×200) y ficha en <dialog> (1000: retrato 360 + contenido 640).
   Figtree del Figma = Avenir Next del sitio (regla tipográfica, sección 1).
   ========================================================= */
.junta { display: flex; flex-direction: column; row-gap: 0; width: 100%; }
/* Espaciado de la pagina (Johann, 20 sep): 35px entre la intro y el primer grupo, 20px entre grupos. */
.junta__intro + .junta__group { margin-top: 35px; }
.junta__group + .junta__group { margin-top: 20px; }
.junta__group + .junta__group:has(> .sec-head) { margin-top: 35px; }   /* si el grupo trae antetitulo/titulo, mas aire arriba (Johann, 20 sep) */
.junta__intro, .junta__group { display: flex; flex-direction: column; align-items: flex-start; row-gap: 14px; width: 100%; }
/* Títulos = .section-title del tema (h2 36/600 + línea degradada 75×4, gap 20), como en Quiénes somos (Johann, 15 sep) */
.junta .section-title { width: 100%; }
.junta .sec-head--amplio .section-title { row-gap: 20px; }   /* misma distancia título–línea que en el home (Johann, 16 sep) */
/* Los grupos no llevan línea de marca: su h2 conserva el tamaño del título de sección */
.junta__group .sec-head__h2 { font-size: 36px; line-height: 1.16; max-width: 800px; }
.junta__text { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #4D4D4D; max-width: 760px; }   /* 29 oct 2026 (Johann): titulo y bajada son UN par -> 14 - 4 = 10; antes 6 (=20) */
/* El texto de intro y de grupo se escribe en un editor enriquecido (Johann, 20 sep 2026): parrafos, listas y enlaces dentro del contenedor */
.junta__text > :first-child { margin-top: 0; }
.junta__text > :last-child { margin-bottom: 0; }
.junta__text p { margin: 0 0 16px; }
.junta__text ul, .junta__text ol { margin: 0 0 16px; padding-left: 20px; }
.junta__text li + li { margin-top: 6px; }
.junta__text a { color: var(--amcham-color-blue, #0073C0); text-decoration: underline; }
.junta__text strong, .junta__text b { font-weight: 700; }
.junta__group-text { margin-bottom: 4px; }   /* el texto de cada grupo va entre la cabecera y la rejilla */
.junta__grid { display: grid; width: 100%; margin-top: 12px; }
.junta__grid:first-child { margin-top: 0; }   /* grupo sin antetitulo ni titulo: las tarjetas arrancan en el borde del grupo */
.junta__group > .sec-head + .junta__grid { margin-top: 14px; }   /* 29 oct 2026 (Johann): 14 del row-gap + 14 = los 28 de cabecera->contenido; antes 12 (=26) */
.junta__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
.junta__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 17px; }

/* Tarjeta: toda es un enlace (abre la ficha); el texto «Ver perfil →» es la pista visible y va pegado abajo */
/* Fila con foto de retrato (Figma 1526-876): una tarjeta por línea, foto 200 × 250 a la izquierda.
   Misma proporción para comité ejecutivo, directores y asesores. */
.junta__grid--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 17px; }   /* Johann, 16 sep: dos por fila; a 853 px cada tarjeta mide 418 */
.junta__grid--fila .jcard__link { flex-direction: row; align-items: stretch; }
.junta__grid--fila .jcard__media { flex: 0 0 150px; width: 150px; aspect-ratio: 4 / 5; }
.junta__grid--fila .jcard__body { justify-content: center; row-gap: 0; padding: 24px; }
.junta__grid--fila .jcard__role { margin-bottom: 7px; font-size: 11.5px; letter-spacing: .6px; }
.junta__grid--fila .jcard__name { font-size: 20px; line-height: 1.22; }
.junta__grid--fila .jcard__pos { margin-top: 7px; font-size: 13.5px; line-height: 1.5; }
.junta__grid--fila .jcard__more { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(158 158 158 / .4); }
@media (max-width: 1023px) { .junta__grid--fila { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .junta__grid--fila .jcard__media { flex-basis: 120px; width: 120px; }
  .junta__grid--fila .jcard__body { padding: 20px; }
  .junta__grid--fila .jcard__name { font-size: 18px; }
  .junta__grid--fila .jcard__pos { font-size: 13px; }
}

.jcard { display: flex; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.jcard:hover { box-shadow: 0 10px 18px rgb(0 0 0 / .09); transform: translateY(-2px); }
.jcard__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.jcard__link:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: -2px; border-radius: var(--amcham-radius); }
.jcard__media { display: block; aspect-ratio: 1; background: #DFE5EC; overflow: hidden; }
.jcard--lg .jcard__media { aspect-ratio: 416 / 264; }
.jcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Encuadre por persona (caja «Encuadre del retrato» en Junta y equipo): --fx/--fy = punto de la cara, --fz = acercamiento. Sin valores = centro arriba. */
.jcard__img, .jmodal__img { object-position: var(--fx, 50%) var(--fy, 0%); transform-origin: var(--fx, 50%) var(--fy, 0%); transform: scale(var(--fz, 1)); }
.jcard__img--empty, .jmodal__img--empty { display: flex; align-items: center; justify-content: center; color: #9E9E9E; }
.jcard__img--empty svg.svg-inline--fa, .jmodal__img--empty svg.svg-inline--fa { width: 36%; height: auto; }
.jcard__body { display: flex; flex-direction: column; flex: 1 1 auto; row-gap: 5px; padding: 18px 18px 20px; }
.jcard--lg .jcard__body { row-gap: 6px; padding: 22px 26px 26px; }
.jcard__role { font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .55px; text-transform: uppercase; color: var(--amcham-color-navy); }
.jcard--lg .jcard__role { font-size: 12px; letter-spacing: .6px; }
.jcard__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.24; color: var(--amcham-ink); }
.jcard--lg .jcard__name { font-size: 21px; line-height: 1.22; }
.jcard__pos { margin: 0; font-size: 13px; line-height: 1.48; color: var(--amcham-muted); }
.jcard--lg .jcard__pos { font-size: 14.5px; line-height: 1.52; }
.jcard__more { margin-top: auto; padding-top: 11px; }
.jcard__link:hover .jcard__more { color: var(--amcham-color-blue-hover); }
.jcard__link:hover .jcard__arrow { transform: translateX(3px); }

/* Ficha en modal (<dialog> nativo: Esc cierra; el fondo es el propio dialog a pantalla completa, la caja es .jmodal__box) */
.jmodal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; }
.jmodal:not([open]) { display: none; }
.jmodal[open] { display: grid; place-items: center; }
.jmodal::backdrop { background: rgb(11 27 51 / .62); }
body.jmodal-open { overflow: hidden; }
.jmodal__box { position: relative; display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: min(1000px, 100%); max-height: min(90vh, 1100px); background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgb(5 15 36 / .42); overflow: hidden; }
.jmodal__side { display: flex; flex-direction: column; row-gap: 22px; min-height: 0; padding: 36px; background: #F4F6F9; overflow-y: auto; }
.jmodal__portrait { flex: 0 0 auto; }   /* en pantallas bajas la columna se desplaza, el retrato no se aplasta */
.jmodal__portrait { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #DFE5EC; }
.jmodal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jmodal__actions { display: flex; flex-direction: column; row-gap: 10px; }
.jmodal__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jmodal__links > :only-child { grid-column: 1 / -1; }
.jmodal__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 9px 14px; border-radius: 4px; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.jmodal__btn--primary { background: var(--amcham-color-navy); color: #fff; }
.jmodal__btn--primary:hover { background: var(--amcham-color-blue); color: #fff; }
.jmodal__btn--outline { border: 1px solid var(--amcham-color-navy); color: var(--amcham-color-navy); background: #fff; }
.jmodal__btn--outline:hover { background: var(--amcham-color-navy); color: #fff; }
/* LinkedIn en azul sólido; hover al azul más claro, nunca más oscuro (Johann, 19 oct 2026) */
.jmodal__btn--linkedin { background: var(--amcham-color-blue); color: #fff; }
.jmodal__btn--linkedin:hover { background: var(--amcham-color-blue-hover); color: #fff; }
.jmodal__btn:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 2px; }
.jmodal__btn-ic { font-size: 16px; width: 16px; flex-shrink: 0; text-align: center; }
.jmodal__main { display: flex; flex-direction: column; row-gap: 24px; min-width: 0; min-height: 0; padding: 38px 44px 56px; overflow-y: auto; overscroll-behavior: contain; }
.jmodal__head { display: flex; flex-direction: column; row-gap: 7px; padding: 0 52px 24px 0; border-bottom: 1px solid rgb(0 0 0 / .09); }
.jmodal__role { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .6px; text-transform: uppercase; color: var(--amcham-color-navy); }
.jmodal__name { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.18; color: var(--amcham-ink); }
.jmodal__pos { margin: 0; font-size: 15px; line-height: 1.5; color: var(--amcham-muted); }
.jmodal__bio { display: flex; flex-direction: column; row-gap: 16px; font-size: 15px; line-height: 1.68; color: #3F3F3F; }
.jmodal__bio p { margin: 0; }
.jmodal__close { position: absolute; top: 38px; right: 44px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .05); color: #5A5A5A; font-size: 16px; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s; }
.jmodal__close:hover { background: rgb(0 0 0 / .1); color: var(--amcham-ink); }
.jmodal__close:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 2px; }
/* Laptops de poca altura: la ficha aprovecha el alto disponible en vez de recortarse (Johann, 16 sep) */
@media (min-width: 768px) and (max-height: 900px) {
  .jmodal { padding: 16px; }
  .jmodal__box { max-height: calc(100vh - 32px); }
  .jmodal__side { row-gap: 16px; padding: 24px; }
  .jmodal__main { row-gap: 18px; padding: 28px 32px 48px; }
  .jmodal__head { padding-bottom: 18px; }
  .jmodal__name { font-size: 26px; }
  .jmodal__close { top: 26px; right: 30px; }
}
@media (min-width: 768px) and (max-height: 780px) {
  .jmodal__box { grid-template-columns: 268px minmax(0, 1fr); }
  .jmodal__side { padding: 20px; }
  .jmodal__main { padding: 24px 28px 40px; }
  .jmodal__name { font-size: 24px; }
}

/* Pestañas opcionales (solo las que tienen filas; con una sola, el título ocupa el lugar de la pestaña activa) */
.jtabs { padding-top: 20px; padding-bottom: 8px; }   /* más aire entre el final de la biografía y las pestañas (Johann, 16 sep) */
.jtabs__bar { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid rgb(0 0 0 / .09); }
.jtabs__tab, .jtabs__solo > span { display: inline-block; margin: 0 0 -1px; padding: 2px 0 11px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--amcham-muted); cursor: pointer; }
.jtabs__tab.is-active, .jtabs__tab:hover, .jtabs__solo > span { color: var(--amcham-color-navy); }
.jtabs__tab.is-active, .jtabs__solo > span { border-bottom-color: var(--amcham-color-navy); }
.jtabs__tab:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 2px; }
.jtabs__solo { margin: 0; border-bottom: 1px solid rgb(0 0 0 / .09); font-size: 14px; }
.jtabs__solo > span { cursor: default; }
.jrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 20px; padding: 16px 0; border-bottom: 1px solid rgb(0 0 0 / .09); }
.jrow:last-child { border-bottom: 0; }
.jrow__period { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 22.5px; color: var(--amcham-color-navy); }
.jrow__text { display: flex; flex-direction: column; row-gap: 3px; }
.jrow__title { font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--amcham-ink); }
.jrow__sub { font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }

@media (max-width: 1279px) {
  .junta__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jmodal__box { grid-template-columns: 300px minmax(0, 1fr); }
  .jmodal__side { padding: 28px; }
  .jmodal__main { padding: 32px 32px 36px; }
  .jmodal__close { top: 30px; right: 32px; }
}
@media (max-width: 767px) {
  .junta .section-title__text, .junta__group .sec-head__h2 { font-size: 28px; }
  .junta__grid--2 { grid-template-columns: 1fr; gap: 16px; }
  .junta__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .jcard__body, .jcard--lg .jcard__body { padding: 14px 14px 16px; }
  /* ---- Ficha a pantalla completa con hero (variante B del Figma WIP «Ficha movil» 2072:423,
     Johann 21 sep 2026). Sin margen ni radio: es lo que deja que la foto llegue a los bordes.
     .jmodal__side y .jmodal__main pasan a `display: contents` para que sus hijos sean hijos
     directos del box y se puedan reordenar con `order`: foto, identidad, boton, biografia.
     Asi el boton queda entre el nombre y la divisoria sin tocar el markup ni el escritorio. */
  .jmodal { padding: 0; }
  .jmodal__box { display: flex; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; padding-bottom: 32px; border-radius: 0; overflow-y: auto; }
  .jmodal__side, .jmodal__main { display: contents; }
  /* hero: casi cuadrado (393x400 en el Figma). El encuadre por persona (--fx/--fy/--fz) sigue
     mandando, y pesa mas que antes porque la foto es grande. */
  .jmodal__portrait { order: 1; width: 100%; aspect-ratio: 1 / 1.02; border-radius: 0; }
  .jmodal__head { order: 2; padding: 26px 20px 0; border-bottom: 0; row-gap: 6px; }
  .jmodal__role { font-size: 12px; letter-spacing: 1px; }
  .jmodal__name { font-size: 28px; line-height: 1.18; }
  .jmodal__actions { order: 3; padding: 20px 20px 0; }
  .jmodal__btn { min-height: 46px; font-size: 15px; }
  /* la divisoria se mueve del final del encabezado al inicio de la biografia: en esta variante
     el boton va en medio de los dos */
  .jmodal__bio { order: 4; margin: 20px 20px 0; padding-top: 20px; border-top: 1px solid rgb(0 0 0 / .09); font-size: 16px; line-height: 1.7; }
  /* sobre la foto, no sobre blanco */
  .jmodal__close { position: fixed; top: 16px; right: 16px; z-index: 1; width: 40px; height: 40px; background: rgb(0 0 0 / .42); border: 1px solid rgb(255 255 255 / .35); color: #fff; box-shadow: none; }
  .jmodal__close:hover { background: rgb(0 0 0 / .58); color: #fff; }
  .jmodal__close:focus-visible { outline-color: #fff; }
  .jrow { grid-template-columns: 1fr; row-gap: 4px; }
}

/* =========================================================
   12. Detalle de evento — Figma WIP página «Eventos» 1947:420 (19 sep 2026)
   Estructura de la noticia: cabecera + dos columnas 707 · gap · 426 (variables --amcham-col-*),
   el formulario de registro DENTRO de la columna derecha, y «Próximos eventos» a 1240.
   ========================================================= */
.event { display: flex; flex-direction: column; row-gap: 0; }
.crumbs { font-size: 14px; line-height: 1.5; color: #2C2C2C; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs__current { color: var(--amcham-color-navy); }

/* La línea degradada bajo los títulos solo va en la tarjeta de registro: los demás títulos del evento
   ya no imprimen el <span class="section-title__line"> (ver Element_Amcham_Evento_Detalle::titulo()). */
.event__modulo .reg .section-title { row-gap: 10px; }

/* ---------- Cabecera: columna de 707, como la noticia ---------- */
.event__head { display: flex; flex-direction: column; row-gap: 0; padding-bottom: 20px; border-bottom: 1px solid #DCDCDC; }
.event__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.event__estado { display: inline-flex; align-items: center; padding: 6px 18px; border-radius: 33px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; }
.event__estado--abierto { background: rgb(0 115 192 / .12); color: var(--amcham-color-blue); }
.event__estado--cerrado, .event__estado--lleno { background: rgb(255 0 26 / .10); color: #B00014; }
.event__estado--pasado { background: rgb(19 62 127 / .10); color: var(--amcham-color-navy); }
.event__title { font-size: 42px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); margin: 0 0 26px; }
.event__meta { display: flex; align-items: center; column-gap: 24px; }
.event__meta-texto { font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.4; color: #6F6F6F; }
.event__share { display: inline-flex; align-items: center; column-gap: 15px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.4; color: #6F6F6F; flex-shrink: 0; }
.event__share svg { width: 14px; height: auto; color: rgb(52 48 48 / .53); }
.event__share:hover { color: var(--amcham-color-navy); }
/* ---------- Compartir: botón + panel (redes y copiar enlace) · markup: amcham_share_button() · JS: assets/amcham.js ---------- */
.share { position: relative; margin-left: auto; flex-shrink: 0; }
.share__menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; min-width: 234px; padding: 8px; background: #fff; border: 1px solid #E2E2E2; border-radius: 10px; box-shadow: 0 18px 40px rgb(19 62 127 / .16); display: flex; flex-direction: column; row-gap: 2px; }
.share__menu[hidden] { display: none; }
.share--izq .share__menu { right: auto; left: 0; }
.share__item { display: flex; align-items: center; column-gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left; text-decoration: none; font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.4; color: var(--amcham-ink); }
.share__item:hover, .share__item:focus-visible { background: #F1F5FA; color: var(--amcham-color-navy); }
.share__item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--amcham-color-navy); }
.share__sep { height: 1px; margin: 6px 4px; background: #E6E6E6; }
.share__copy.is-ok, .share__copy.is-ok svg { color: var(--amcham-color-blue); }

/* ---------- Dos columnas: mismas proporciones de la noticia (Apariencia → Columnas) ---------- */
.event__body { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--amcham-col-lateral, 34.35%) + 50px); column-gap: var(--amcham-col-gap, 8.63%); align-items: start; }   /* el lateral va 50 px más ancho que en la noticia (Johann, 20 sep); los 50 salen de la columna de contenido */
.event__main, .event__aside { display: flex; flex-direction: column; min-width: 0; }
.event__main { row-gap: 40px; padding-bottom: 48px; border-bottom: 1px solid #DCDCDC; }
.event__aside { row-gap: 40px; }

/* Afiche: panel gris con la pieza centrada (el archivo real es vertical, 819 × 1024) */
.event__figure { margin: 0; display: flex; justify-content: center; }
.event__figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; border-radius: 4px; box-shadow: 0 8px 20px rgb(0 0 0 / .12); }
.event__main .section-title__text { font-size: 28px; }
.event__proximos .section-title__text { font-size: 32px; }
.event__desc { font-size: 18px; line-height: 1.7; color: var(--amcham-ink); }
.event__desc p, .event__desc ul { margin: 0 0 18px; }
.event__desc li { margin-bottom: 8px; }
.event__desc > :last-child { margin-bottom: 0; }

/* Etiqueta del comité: color del comité + marca al fondo */
.event__badge { position: relative; overflow: hidden; display: flex; align-items: center; column-gap: 12px; padding: 14px 12px; border-radius: var(--amcham-radius); background: var(--chip, var(--amcham-color-navy)); color: #fff; text-decoration: none; min-height: 70px; }
.event__badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / .08) 100%); }
.event__badge::after { content: ''; position: absolute; right: -10px; top: -40px; width: 200px; height: 195px; background: url('assets/amcham-mark.webp') no-repeat center / contain; opacity: .18; filter: brightness(0) invert(1); pointer-events: none; }
.event__badge-icon { position: relative; width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.event__badge-icon svg { width: 32px; height: 32px; color: #fff; }
.event__badge-icon svg path { fill: currentColor; }
.event__badge-text { position: relative; display: flex; flex-direction: column; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: .68px; text-transform: uppercase; }
.event__badge-text small { font-size: 15px; font-weight: 600; letter-spacing: .6px; }

/* ---------- Módulo: detalles + costos + formulario en una sola tarjeta ---------- */
.event__modulo { display: flex; flex-direction: column; row-gap: 16px; }   /* tres tarjetas sueltas: detalles · costos · registro (Johann, opción C del tablero 1980:436) */
.event__card, .event__costos, .event__modulo .reg { background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 16px rgb(0 0 0 / .07); }
.event__card { padding: 28px 32px; display: flex; flex-direction: column; row-gap: 18px; }
.event__card-label { color: var(--amcham-color-navy); }
.event__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 14px; }
.event__rows li { display: flex; align-items: flex-start; column-gap: 12px; font-size: 15px; line-height: 1.55; color: var(--amcham-ink); }
.event__rows svg { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--amcham-color-navy); }
.event__rows li:first-child span { font-family: var(--amcham-font-heading); font-weight: 600; font-size: 16px; }
.event__costos { display: flex; flex-direction: column; row-gap: 12px; padding: 26px 32px; }
.event__costos-label { display: flex; align-items: center; column-gap: 12px; color: var(--amcham-color-navy); }
.event__costos-label svg { width: 16px; height: 16px; color: var(--amcham-color-navy); }
.event__costos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 12px; }
.event__costo-fila { display: flex; align-items: center; column-gap: 8px; }
.event__costo-titulo { font-size: 15px; line-height: 1.5; color: var(--amcham-ink); }
.event__costo-monto { margin-left: auto; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--amcham-color-navy); }
.event__costos-list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }
.event__btn { width: 100%; justify-content: center; }
.event__btn.is-disabled { pointer-events: none; opacity: .7; }
.event__cupo { display: block; margin-top: 8px; font-size: 14px; color: var(--amcham-muted); text-align: center; }
.event__info { display: flex; flex-direction: column; row-gap: 20px; }

/* ---------- Ubicación (lat/lng de geolocation) ---------- */
.event__mapa { border-radius: var(--amcham-radius); overflow: hidden; background: #fff; box-shadow: 0 6px 12px rgb(0 0 0 / .06); }
.event__mapa-lienzo { height: 170px; background: #DCE3EC; }
.event__mapa-lienzo iframe { display: block; width: 100%; height: 100%; border: 0; }
.event__mapa-pie { padding: 26px 32px 28px; display: flex; flex-direction: column; row-gap: 12px; }
.event__mapa-pie .eyebrow { color: var(--amcham-color-navy); }
.event__mapa-lugar { margin: 0; font-size: 15px; line-height: 1.6; color: var(--amcham-ink); }

/* ---------- Oradores y patrocinadores del evento ---------- */
.event__block { display: flex; flex-direction: column; row-gap: 24px; }
.event__h3 { font-size: 28px; font-weight: 600; line-height: 1.2; margin: 0; color: var(--amcham-ink); }
.event__speakers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 20px; }
.event__speakers li { display: flex; flex-direction: column; row-gap: 6px; padding: 24px; border: 1px solid #E2E2E2; border-radius: var(--amcham-radius); background: #fff; }
.event__speakers strong { font-family: var(--amcham-font-heading); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.event__speakers span { font-size: 15px; line-height: 1.5; color: #6F6F6F; }
.event__speakers em { font-style: normal; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .48px; text-transform: uppercase; color: var(--amcham-color-blue); }
.event__sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.event__sponsors img { max-height: 56px; width: auto; display: block; }

/* ---------- Próximos eventos (bloque ancho, como «Noticias relacionadas») ---------- */
.event__proximos { margin-top: 64px; display: flex; flex-direction: column; row-gap: 40px; }
.event__proximos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
/* las tarjetas son .event-card (las de la portada); su CSS vive en la sección 8 «Eventos» */
.event__proximos-foot { display: flex; justify-content: flex-end; }
.event__ver-todos { min-width: 240px; justify-content: center; }
.sec-evento { padding-bottom: 63px; }

/* ---------- Formulario de registro (dentro del módulo, 426 → 362 útiles) ---------- */
.reg { display: flex; flex-direction: column; row-gap: 18px; padding: 30px 32px 32px; background: #fff; }
.reg .section-title__text { font-size: 28px; }
.reg__bajada { margin: 0; font-size: 15px; line-height: 1.6; color: #6F6F6F; }
.reg__pie { width: 100%; margin: 0; font-size: 12px; line-height: 1.6; color: var(--amcham-muted); }
.reg__aviso { display: flex; align-items: center; column-gap: 12px; margin: 0; padding: 14px 16px; border-radius: 6px; background: rgb(0 115 192 / .08); font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--amcham-color-navy); }
.reg__aviso::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--amcham-color-blue); flex-shrink: 0; }
.reg__externo-texto { margin: 0; font-size: 15px; line-height: 1.6; color: #6F6F6F; }
.reg__externo-btn { width: 100%; justify-content: center; }
.reg__closed { margin: 0; font-size: 15px; line-height: 1.6; color: #B00014; }
.reg--cerrado .reg__closed { color: #B00014; }
form.reg-form { display: flex; flex-wrap: wrap; gap: 16px; }
.reg__persona { display: contents; }
.reg__persona--invitado { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; padding: 22px; border-radius: var(--amcham-radius); background: #F5F7FA; }
.reg__subtitle { width: 100%; margin: 0; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: var(--amcham-color-navy); }
.reg__group { width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; position: relative; }
.reg__group--mitad { width: calc(50% - 8px); }
.reg__group--full, .reg__group--submit, .reg__cupo, .reg__msg { width: 100%; }
.reg__group--submit .btn { width: 100%; justify-content: center; }
.reg__invitados { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.reg__invitados:empty { display: none; }
.reg__label { display: block; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--amcham-ink); margin-bottom: 10px; }
.reg__sr, .reg-form input.reg__hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reg__options { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 10px; margin-top: 4px; }
.reg__option { display: flex; align-items: center; column-gap: 10px; font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.5; color: var(--amcham-ink); cursor: pointer; }
.reg-form input[type=text], .reg-form input[type=email], .reg-form select {
  width: 100%; height: 50px; padding: 12px 16px; border: 1px solid #C7CED8; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.5; color: var(--amcham-ink); box-shadow: none; appearance: none; -webkit-appearance: none;
}
.reg-form input::placeholder { color: var(--amcham-muted); }
.reg-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' width='11'%3E%3Cpath fill='%23133E7F' d='M224.1 422.6l11.3-11.3 208-208 11.3-11.3-22.6-22.6-11.3 11.3-196.7 196.7-196.7-196.7-11.3-11.3-22.6 22.6 11.3 11.3 208 208 11.3 11.3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 11px auto; padding-right: 40px; }
.reg-form input:focus, .reg-form select:focus { outline: 2px solid var(--amcham-color-blue); outline-offset: 0; border-color: var(--amcham-color-blue); }
.reg-form input:disabled, .reg-form select:disabled { background-color: #f1f1f1; color: var(--amcham-muted); }
.reg-form input[type=radio] { appearance: none; -webkit-appearance: none; box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; margin: 0; padding: 0; border: 2px solid var(--amcham-color-blue); border-radius: 50%; background: #fff; display: grid; place-content: center; cursor: pointer; flex-shrink: 0; }
.reg-form input[type=radio]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amcham-color-blue); transform: scale(0); transition: transform .12s; }
.reg-form input[type=radio]:checked::before { transform: scale(1); }
.reg-form input[type=radio]:not(:checked) { border-color: #949494; border-width: 1px; }
.reg-form input[type=radio]:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 2px; }
.reg-form input[type=text].reg__hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reg-form .btn { border: 0; cursor: pointer; font-family: var(--amcham-font-heading); }
.reg-form .btn:disabled { opacity: .6; cursor: wait; }
/* Autocompletado de empresas miembro (lista propia) */
.reg__ac { position: relative; }
.reg__ac-icon { position: absolute; z-index: 2; left: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--amcham-color-navy); pointer-events: none; display: flex; }
.reg__ac-icon svg { width: 15px; height: 15px; fill: currentColor; }
.reg__ac-icon svg path { fill: currentColor; }
.reg-form .reg__ac input[type=text] { padding-left: 40px; }
.reg__ac.is-elegida input { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 6.5 6 11 14.5 1.5' stroke='%231A7F37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.reg__ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: .5px solid #949494; border-radius: 4px; box-shadow: 0 8px 22px rgb(0 0 0 / .12); max-height: 276px; overflow-y: auto; text-align: left; }
.reg__ac-item { padding: 10px 16px; font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.4; color: var(--amcham-ink); cursor: pointer; }
.reg__ac-item + .reg__ac-item { border-top: 1px solid rgb(44 44 44 / .08); }
.reg__ac-item:hover, .reg__ac-item.is-active { background: #EEF4FA; color: var(--amcham-color-navy); }
.reg__ac-item mark { background: none; color: var(--amcham-color-navy); font-weight: 700; }
.reg__ac-status { padding: 10px 16px; font-size: 14px; line-height: 1.4; color: var(--amcham-muted); }
.reg__ac-status--pie { padding-top: 8px; margin-top: 4px; border-top: 1px solid rgb(44 44 44 / .08); font-size: 12px; }
@media (hover: none) { .reg__ac-teclas { display: none; } }
.reg__ac-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--amcham-muted); }
.reg__cupo { margin: 0; font-size: 14px; color: var(--amcham-muted); }
.reg__msg { margin: 0; padding: 14px 16px; border-radius: 4px; font-size: 15px; line-height: 1.5; }
.reg__msg--ok { background: #E6F4EA; color: #1A7F37; }
.reg__msg--error { background: #FDECEC; color: #B00020; }

/* El elemento suelto (/brick-components/ o una plantilla aparte) conserva el ancho de antes */
.sec-registro { background: rgb(30 56 72 / .04); padding: 56px 0; }
.reg--suelto { max-width: 706px; padding: 0; background: none; box-shadow: none; border-radius: 0; row-gap: 46px; }
.reg--suelto form.reg-form { gap: 37px 23px; }
.reg--suelto .reg__group { width: calc(50% - 12px); }
.reg--suelto .reg__group--full, .reg--suelto .reg__group--submit { width: 100%; }
.reg--suelto .reg__label { font-size: 18px; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .event__body { grid-template-columns: minmax(0, 1fr) calc(var(--amcham-col-lateral-md, 360px) + 50px); column-gap: var(--amcham-col-gap-md, 40px); }
  .event__title { font-size: 36px; }
  .event__proximos-grid { gap: 32px; }
}
@media (max-width: 1023px) {
  .event__body { display: flex; flex-direction: column; row-gap: 32px; }
  .event__aside { display: contents; }
  .event__badge { order: 1; }
  .event__main { order: 2; }
  .event__modulo { order: 3; }
  .event__mapa { order: 4; }
  .event__info { order: 5; }
  .event__proximos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .event__head { padding-bottom: 18px; }
  .event__title { font-size: 28px; line-height: 1.25; margin-bottom: 20px; }
  .event__meta { flex-direction: column; align-items: flex-start; row-gap: 12px; }
  .share { margin-left: 0; }
  .event__card { padding: 24px 22px; }
  .event__costos { padding: 22px 22px; }
  .reg { padding: 24px 22px 26px; }
  .reg__group--mitad { width: 100%; }
  .event__proximos-grid { grid-template-columns: 1fr; gap: 16px; }
  .event__proximos-foot { justify-content: stretch; }
  .event__ver-todos { width: 100%; }
  .event__h3 { font-size: 24px; }
}

/* Noticia (detalle) — template single de post con el layout interior */
.news__head { display: flex; flex-direction: column; row-gap: 12px; }
.news__title { font-size: 36px; font-weight: 600; line-height: 1.2; color: var(--amcham-color-dark-blue); margin: 0; }
.news__meta { font-size: 14px; line-height: 1.5; color: var(--amcham-muted); text-transform: capitalize; }
.news__meta a { color: var(--amcham-color-blue); text-decoration: none; }
.news__img { border-radius: var(--amcham-radius); overflow: hidden; }
.news__img img { width: 100%; height: auto; display: block; }
.news__body img { max-width: 100%; height: auto; border-radius: var(--amcham-radius); }
.news__body h2, .news__body h3 { font-size: 24px; font-weight: 600; line-height: 1.25; margin: 8px 0 0; color: var(--amcham-ink); }
.news__body blockquote { margin: 0; padding: 20px 24px; border-left: 4px solid var(--amcham-color-blue); background: #fff; border-radius: 0 var(--amcham-radius) var(--amcham-radius) 0; }
@media (max-width: 767px) { .news__title { font-size: 26px; } }

/* =========================================================
   12b. Detalle de noticia — Figma WIP «Detalle de Evento» 1600-683 = plantilla de post (elemento amcham-noticia, 18 sep 2026; antes 1218-2311)
   Migas en la banda del header (blanco 70 %, 13) → columna de 707 [cabecera (píldora navy → 24 → título 42/1.3 → 42 → meta 15 → 8 → línea)
   → 37 → artículo] · 107 · lateral 426 (arranca a la altura del título, 54 bajo la píldora) → 53 → relacionadas (3 × 386 gap 40) + botón navy.
   Cuerpo desde el editor de WordPress (.noticia__body): entradilla 18/1.7, párrafos 18/1.6, h2 24/1.3, cita = tarjeta degradada con la marca,
   línea de cierre. Radios: 8 en fotos y boletín, 10 en cita y tarjeta de evento (como el Figma).
   ========================================================= */
.noticia { display: flex; flex-direction: column; width: 100%; }

/* Las migas de la banda (.crumbs--banda) viven en la sección 4: aplican a todas las vistas (inc/migas.php). */

/* Cabecera (dentro de la columna de 707): píldora → 24 → título → 42 → meta → 8 → línea → 37 → artículo */
.noticia__head { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 8px; margin-bottom: 37px; border-bottom: 1px solid #DCDCDC; }
.noticia__cat { display: inline-block; padding: 6px 18px; border-radius: 33px; background: rgb(19 62 127 / .15); color: var(--amcham-color-navy); font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .48px; text-transform: uppercase; text-decoration: none; margin-bottom: 24px; }
.noticia__cat:hover { background: var(--amcham-color-navy); color: #fff; }
.noticia__title { font-size: 42px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); margin: 0 0 28px; }
.noticia__meta-row { display: flex; align-items: center; justify-content: space-between; column-gap: 40px; width: 100%; }
.noticia__meta { margin: 0; font-size: 15px; line-height: 1.4; color: #6F6F6F; display: flex; flex-wrap: wrap; align-items: center; }
.noticia__meta-sep { margin: 0 12px; }
.noticia__share { flex-shrink: 0; }

/* Dos columnas desde arriba: [cabecera + artículo] 707 · 107 · lateral 426 sobre 1240 (en el contenedor fluido se escalan) */
.noticia__cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--amcham-col-lateral, 34.35%); column-gap: var(--amcham-col-gap, 8.63%); align-items: start; }   /* configurable en Apariencia → Columnas */
.noticia__main { display: flex; flex-direction: column; min-width: 0; }
.noticia__article { display: flex; flex-direction: column; min-width: 0; padding-bottom: 48px; border-bottom: 1px solid #DCDCDC; }
.noticia__figure { margin: 0 0 40px; }
.noticia__img { display: block; width: 100%; aspect-ratio: 707 / 398; object-fit: cover; height: auto; border-radius: 8px; }
/* Imagen destacada vertical o casi cuadrada (afiches): completa, sin recorte */
.noticia__figure--completa { display: flex; justify-content: center; padding: 20px; background: var(--amcham-bg, #F7F7F7); border-radius: 8px; }
.noticia__img--completa { width: auto; max-width: min(100%, 440px); height: auto; max-height: 620px; aspect-ratio: auto; object-fit: contain; border-radius: 4px; }
.noticia__figure--completa .noticia__caption { text-align: center; }
.noticia__caption { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #6F6F6F; text-align: left; }   /* WP/Bricks centran los figcaption */
/* Cuerpo: primer párrafo como entradilla */
.noticia__body { font-size: 18px; line-height: 1.6; color: var(--amcham-ink); }
.noticia__body > p:first-child { line-height: 1.7; margin-bottom: 28px; }
.noticia__body p, .noticia__body ul, .noticia__body ol { margin: 0 0 22px; }
.noticia__body > :last-child { margin-bottom: 0; }
.noticia__body h2 { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); margin: 40px 0 20px; }
.noticia__body h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); margin: 32px 0 14px; }
.noticia__body h2:first-child, .noticia__body h3:first-child { margin-top: 0; }
/* Cita pegada con el bloque nativo «Cita»: caja sobria de respaldo y nada más.
   El diseño AmCham de la cita (las dos opciones del Figma «Blockquotes») vive en el BLOQUE PROPIO
   amcham/cita — plugin amcham-bloques, assets/bloques.css, clases .ab-cita. */
.noticia__body blockquote:not(.ab-cita), .noticia__body .wp-block-quote:not(.ab-cita) {
  margin: 36px 0; padding: 24px 28px; border: 0; border-left: 3px solid var(--amcham-color-blue); border-radius: var(--amcham-radius);
  background: #F5F7FA; color: var(--amcham-ink); font-family: var(--amcham-font-body); font-style: normal;
}
.noticia__body blockquote:not(.ab-cita) p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--amcham-color-navy); }
.noticia__body blockquote:not(.ab-cita) p + p { margin-top: 14px; }
.noticia__body blockquote:not(.ab-cita) cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; font-weight: 600; color: #767676; text-transform: none; opacity: 1; }

.noticia__body img { max-width: 100%; height: auto; border-radius: 8px; }
.noticia__body figure { margin: 28px 0; }
.noticia__body figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #6F6F6F; }
.noticia__body a { color: var(--amcham-color-navy); overflow-wrap: anywhere; } /* direcciones largas en referencias: sin desborde en móvil */
/* Temas (etiquetas, apagados por defecto): chips grises bajo el cuerpo */
.noticia__temas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 40px; }
.noticia__temas-label { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.4; color: #6F6F6F; }
.noticia__tema { display: inline-block; padding: 8px 14px; border-radius: 4px; background: #F1F1F1; color: var(--amcham-ink); font-size: 14px; line-height: 1; text-decoration: none; }
.noticia__tema:hover { background: var(--amcham-color-navy); color: #fff; }

/* Barra lateral: arranca a la altura del título (54 bajo la píldora) y sus bloques van a 42 */
.noticia__side { display: flex; flex-direction: column; row-gap: 42px; min-width: 0; margin-top: 54px; }
.noticia__side .section-title__text { font-size: 28px; line-height: 1.1; }
.noticia__side .section-title { row-gap: 22px; }
.noticia__side-head { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 20px; margin-bottom: 26px; }
.noticia__side-head .splide__arrows.custom { position: static; display: flex; gap: 6px; flex-shrink: 0; }
.noticia__side-head .splide__arrows.custom .splide__arrow { position: static; transform: none; }
/* Boletín: degradado de la banda + marca grande al 70 % (Figma: 122 % de ancho, desplazada 5.86 % / −33 %) */
.noticia__boletin { position: relative; overflow: hidden; isolation: isolate; padding: 36px; border-radius: 8px; color: #fff; background: var(--amcham-color-navy) linear-gradient(205deg, var(--amcham-color-light-blue) 22%, var(--amcham-color-dark-blue) 94%); }
.noticia__boletin::after { content: ''; position: absolute; left: 5.86%; top: -33%; width: 122.14%; aspect-ratio: 1298 / 1265; background: url(/wp-content/uploads/2026/09/amcham-mark-hero.webp) center / contain no-repeat; opacity: .7; pointer-events: none; z-index: 0; }
.noticia__boletin > * { position: relative; z-index: 1; }
.noticia__boletin-eyebrow { display: block; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: rgb(255 255 255 / .85); margin-bottom: 16px; }
.noticia__boletin-title { font-size: 26px; font-weight: 600; line-height: 1.25; color: #fff; margin: 0 0 14px; }
.noticia__boletin-text { font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / .85); margin: 0 0 26px; }
.noticia__boletin-form { display: flex; flex-direction: column; row-gap: 14px; }
.noticia__boletin-input { width: 100%; height: 50px; padding: 0 20px; border: 0; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 15px; line-height: 1.4; color: var(--amcham-ink); box-shadow: none; appearance: none; }
.noticia__boletin-input::placeholder { color: #9A9A9A; }
.noticia__boletin-input:focus { outline: 2px solid var(--amcham-color-light-blue); outline-offset: 0; }
.noticia__boletin-btn { width: 100%; justify-content: center; }
/* Próximos eventos (carrusel de 1): tarjeta blanca 50/35 con sombra suave, como la del Figma */
.noticia__eventos .event-card { min-height: 0; padding: 50px 35px; border: 0; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.noticia__eventos .event-card__title { font-size: 20px; line-height: 1.35; margin-bottom: 20px; }
.noticia__eventos .event-card__meta { font-size: 15px; line-height: 1.6; margin-bottom: 30px; }
.noticia__eventos .splide__list { align-items: flex-start; }
.noticia__eventos .splide__slide > .event-card { width: 100%; }
/* Categorías: filas de 54 con línea */
.noticia__cat-list { list-style: none; margin: 26px 0 0; padding: 0; }
.noticia__cat-list li { border-bottom: 1px solid #E6E6E6; }
.noticia__cat-list li:last-child { border-bottom: 0; }
.noticia__cat-list a { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; padding: 16px 0; font-size: 16px; line-height: 1.4; color: var(--amcham-ink); text-decoration: none; }
.noticia__cat-list a:hover span:first-child, .noticia__cat-list a[aria-current] span:first-child { color: var(--amcham-color-navy); font-weight: 600; }
.noticia__cat-count { font-size: 14px; color: #6F6F6F; }

/* Noticias relacionadas: 53 bajo la línea del artículo, 3 tarjetas 386/217, botón navy a la derecha */
.noticia__related { margin-top: 53px; }
.noticia__related .section-title__text { font-size: 32px; line-height: 1.1; }
.noticia__related .section-title { row-gap: 22px; }
.noticia__related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 44px; }
.noticia__related-grid .news-card { row-gap: 22px; }
.noticia__related-grid .news-card__img { aspect-ratio: 387 / 217; border-radius: 8px; }
.noticia__related-grid .news-card__body { row-gap: 14px; }
.noticia__related-grid .news-card__title { font-size: 20px; line-height: 1.35; }
.noticia__related-grid .news-card__date { font-size: 16px; line-height: 1.5; color: #6F6F6F; }
.noticia__related-foot { display: flex; justify-content: flex-end; margin-top: 44px; }
.noticia__ver-todas { }   /* = .btn base */

@media (max-width: 1279px) {
  .noticia__cols { grid-template-columns: minmax(0, 1fr) var(--amcham-col-lateral-md, 360px); column-gap: var(--amcham-col-gap-md, 40px); }
  .noticia__title { font-size: 36px; }
  .noticia__eventos .event-card { padding: 36px 30px; }
}
@media (max-width: 1023px) {
  .noticia__cols { grid-template-columns: 1fr; row-gap: 56px; }
  .noticia__side { max-width: 560px; margin-top: 0; }
  .noticia__head { margin-bottom: 32px; }
  .noticia__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 767px) {
  .noticia__head { padding-bottom: 8px; }
  .noticia__cat { margin-bottom: 18px; }
  .noticia__title { font-size: 28px; line-height: 1.25; margin-bottom: 16px; }
  .noticia__meta-row { flex-direction: column; align-items: flex-start; row-gap: 12px; }
  .noticia__meta { font-size: 14px; }
  .noticia__cols { row-gap: 44px; }
  .noticia__head { margin-bottom: 28px; }
  .noticia__article { padding-bottom: 36px; }
  .noticia__figure { margin-bottom: 28px; }
  .noticia__img { aspect-ratio: 16 / 10; }
  .noticia__figure--completa { padding: 14px; }
  .noticia__img--completa { aspect-ratio: auto; max-width: 100%; max-height: 460px; }
  .noticia__caption { font-size: 14px; }
  .noticia__body { font-size: 17px; }
  .noticia__body h2 { font-size: 22px; margin-top: 32px; }
  .noticia__body blockquote:not(.ab-cita), .noticia__body .wp-block-quote:not(.ab-cita) { padding: 20px 22px; margin: 28px 0; }
  .noticia__body blockquote:not(.ab-cita) p { font-size: 18px; }
  .noticia__temas { margin-top: 32px; }
  .noticia__side { row-gap: 40px; max-width: none; }
  .noticia__boletin { padding: 28px 24px; }
  .noticia__eventos .event-card { padding: 28px 24px; }
  .noticia__related { margin-top: 48px; }
  .noticia__related-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .noticia__related-foot { justify-content: flex-start; margin-top: 32px; }
}
@media (max-width: 478px) {
  .noticia__meta { flex-direction: column; align-items: flex-start; row-gap: 4px; }   /* fecha y autor en dos líneas, sin el punto colgando */
  .noticia__meta-sep { display: none; }
}

/* =========================================================
   12c. Archivo de noticias (categoría / etiqueta / listado) — elemento amcham-noticias-archivo, template «Noticias (archivo)» (15 sep 2026)
   Mismo lenguaje del detalle: migas gris, título 42, contador, chips de categoría, grilla 3 × news-card (387/217), paginación numerada.
   ========================================================= */
.narch { display: flex; flex-direction: column; width: 100%; }
.narch__head { display: flex; align-items: flex-end; justify-content: space-between; column-gap: 40px; row-gap: 12px; flex-wrap: wrap; }   /* 19 oct 2026: sin la regla gris; el título lleva la línea de marca como .section-title del home */
.narch__head-main { display: flex; flex-direction: column; row-gap: 14px; max-width: 820px; }
.narch__title { font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--amcham-ink); margin: 0; }   /* = .section-title__text (36/600/1.1) */
.narch__title::after { content: ''; display: block; width: 75px; height: 4px; margin-top: 20px; background: linear-gradient(90deg, var(--amcham-color-red), var(--amcham-color-blue)); }   /* = .section-title__line */
.narch__bajada { margin: 0; font-size: 16px; line-height: 1.6; color: var(--amcham-muted); }
.narch__count { margin: 0 0 6px; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: var(--amcham-muted); white-space: nowrap; }   /* = .eyebrow (13/600) en gris */
/* Filtro por categorías */
.narch__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.narch__chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 4px; background: color-mix(in srgb, var(--amcham-color-navy) 8%, transparent); color: var(--amcham-ink); font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color .15s var(--amcham-ease, ease), color .15s var(--amcham-ease, ease); }   /* fondo navy al 8 % (como el chip de eventos), no un gris propio */
.narch__chip-n { font-size: 12px; font-weight: 600; color: var(--amcham-muted); }
.narch__chip:hover { background: color-mix(in srgb, var(--amcham-color-navy) 14%, transparent); color: var(--amcham-ink); }
.narch__chip.is-active { background: var(--amcham-color-navy); color: #fff; }
.narch__chip.is-active .narch__chip-n { color: rgb(255 255 255 / .7); }
/* Grilla */
.narch__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; margin-top: 44px; }
.narch__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* La tarjeta es la misma .news-card del home (19 oct 2026): row-gap 20, body 10, título 18/1.35, fecha 13, imagen 16/9 — aquí solo se añade el extracto (3 líneas) */
.narch__grid .news-card { row-gap: 20px; }
.narch__grid .news-card__img { aspect-ratio: 16 / 9; }
.narch__grid .news-card__body { row-gap: 10px; }
.narch .news-card__cat { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .48px; text-transform: uppercase; color: var(--amcham-color-navy); }   /* etiqueta = eyebrow navy (como el chip de eventos); el PHP solo la imprime cuando hay más de una categoría con noticias */
.narch__grid .news-card__title { font-size: 18px; }
.narch__grid .news-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--amcham-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.narch__grid .news-card__date { font-size: 13px; }
/* Vacío */
.narch__empty { display: flex; flex-direction: column; align-items: flex-start; row-gap: 22px; margin-top: 44px; padding: 44px 40px; border-radius: var(--amcham-radius); background: #F7F7F7; }
.narch__empty-text { margin: 0; font-size: 18px; line-height: 1.5; color: var(--amcham-ink); }
.narch__latest { margin-top: 64px; }
.narch__latest .section-title__text { font-size: 32px; }
.narch__latest .section-title { row-gap: 22px; }
.narch__latest .narch__grid { margin-top: 44px; }
/* Paginación (markup de paginate_links) */
.narch__pag { margin-top: 56px; }
.narch__pag ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; gap: 8px; }
.narch__pag .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 4px; background: color-mix(in srgb, var(--amcham-color-navy) 8%, transparent); color: var(--amcham-ink); font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; text-decoration: none; }
.narch__pag a.page-numbers:hover { background: color-mix(in srgb, var(--amcham-color-navy) 14%, transparent); }
.narch__pag .page-numbers.current { background: var(--amcham-color-navy); color: #fff; }
.narch__pag .page-numbers.dots { background: none; min-width: 24px; padding: 0; }
.narch__pag .page-numbers svg { width: 8px; height: auto; }
@media (max-width: 1023px) {
  .narch__grid, .narch__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .narch__title { font-size: 32px; }
}
@media (max-width: 767px) {
  .narch__head { padding-bottom: 20px; }
  .narch__title { font-size: 28px; }
  .narch__bajada { font-size: 15px; }
  .narch__filters { margin-top: 20px; gap: 8px; }
  .narch__chip { padding: 9px 12px; font-size: 13px; }
  .narch__grid, .narch__grid--2 { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .narch__empty { padding: 28px 24px; }
  .narch__pag { margin-top: 40px; }
}

/* =========================================================
   12e. Noticias (lista/archivo) — Figma WIP página «Noticias» 1848:421 (elemento amcham-noticias-lista, 19 sep 2026)
   Página /noticias/ y sus hijas por sección. Reusa .narch / .narch__grid / .narch__chip / .narch__pag del bloque 12c;
   aquí van las destacadas (= bloque «Noticias» del home, desde el 19 oct 2026), la barra de filtros (chips + año + búsqueda) y la banda del boletín.
   ========================================================= */
.nlist { row-gap: 0; }
.nlist__eyebrow { display: block; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: var(--amcham-color-navy); }   /* = .eyebrow--navy */

/* Destacadas = el bloque «Noticias» del home (Johann, 19 oct 2026): mismas clases (.home-news__grid, .news-card--featured,
   .home-news__list), así que el CSS y las media queries son los del bloque 12 «Noticias». Aquí solo el aire alrededor. */
.nlist__destacadas.home-news__grid { margin-top: 0; margin-bottom: 64px; }
/* Cabecera y filtros (la cabecera .narch__head viene del 12c, ya a 36 con línea) */
.nlist__filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; margin-top: 28px; }
.nlist__filtros .narch__filters { margin-top: 0; }
.nlist__tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nlist__select { position: relative; display: inline-flex; align-items: center; }
.nlist__select select { appearance: none; -webkit-appearance: none; height: 42px; padding: 0 38px 0 14px; border: 1px solid #C7CED8; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 14px; color: var(--amcham-ink); cursor: pointer; }
.nlist__select > svg, .nlist__select > i { position: absolute; right: 14px; width: 12px; height: 12px; pointer-events: none; color: var(--amcham-ink); }
.nlist__search { position: relative; display: inline-flex; align-items: center; }
.nlist__search > svg, .nlist__search > i { position: absolute; left: 14px; width: 16px; height: 16px; color: #767676; pointer-events: none; }
.nlist__search input { height: 42px; width: 260px; padding: 0 14px 0 40px; border: 1px solid #C7CED8; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 14px; color: var(--amcham-ink); }
.nlist__search input::placeholder { color: var(--amcham-muted); }
.nlist__search input:focus, .nlist__select select:focus { outline: 2px solid var(--amcham-color-blue); outline-offset: 0; border-color: var(--amcham-color-blue); }   /* campos = .reg-form (borde #C7CED8, foco blue) */
.nlist__submit { height: 42px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--amcham-color-navy); color: #fff; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; cursor: pointer; }
.nlist__submit:hover { background: var(--amcham-color-blue); }
.js .nlist__submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* con JS el año y la búsqueda se envían solos */
.nlist .narch__empty .btn { }

/* Banda del boletín (degradado + isotipo como la tarjeta del lateral de la noticia) */
.nlist__boletin { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; column-gap: 40px; row-gap: 24px; flex-wrap: wrap; margin-top: 64px; padding: 44px 48px; border-radius: var(--amcham-radius); color: #fff; background: linear-gradient(90deg, var(--amcham-color-dark-blue, #1C407D) 0%, var(--amcham-color-light-blue, #006EB7) 100%); }   /* padding e isotipo = .cta-band--apilado */
.nlist__boletin::after { content: ''; position: absolute; right: -6%; top: -60%; width: 34%; aspect-ratio: 1298 / 1265; background: url(/wp-content/uploads/2026/09/amcham-mark-hero.webp) center / contain no-repeat; opacity: .2; pointer-events: none; z-index: 0; }
.nlist__boletin > * { position: relative; z-index: 1; }
.nlist__boletin-text { display: flex; flex-direction: column; row-gap: 10px; max-width: 600px; }
.nlist__boletin-eyebrow { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: var(--amcham-eyebrow-blanco); }
.nlist__boletin-title { margin: 0; font-family: var(--amcham-font-heading); font-size: 30px; font-weight: 600; line-height: 1.2; color: #fff; }   /* = .cta-band__titulo */
.nlist__boletin-p { margin: 0; font-size: 15px; line-height: 1.6; color: #D9E5F7; }   /* = .cta-band__desc */
.nlist__boletin-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nlist__boletin-input { width: 320px; max-width: 100%; height: 48px;   /* = .btn--grande de al lado */ padding: 0 16px; border: 0; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 15px; color: var(--amcham-ink); }
.nlist__boletin-input::placeholder { color: var(--amcham-muted); }
.nlist__boletin-input:focus { outline: 2px solid var(--amcham-color-light-blue, #006EB7); outline-offset: 0; }
.nlist__boletin-btn { border: 0; justify-content: center; cursor: pointer; }

@media (max-width: 1279px) {
  .nlist__destacadas { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; }
  .nlist__hero-title { font-size: 28px; }
  .nlist__search input { width: 220px; }
}
@media (max-width: 1023px) {
  .nlist__destacadas.home-news__grid { margin-bottom: 48px; }
  .nlist__filtros { flex-direction: column; align-items: stretch; }
  .nlist__tools { margin-left: 0; }
  .nlist__search { flex: 1 1 auto; } .nlist__search input { width: 100%; }
  .nlist__boletin { padding: 32px 24px; }
}
@media (max-width: 767px) {
  .nlist__hero-title { font-size: 24px; }
  .nlist__hero-excerpt { font-size: 16px; }
  .nlist__mini { grid-template-columns: 96px minmax(0, 1fr); }
  .news-card__img.nlist__mini-img, .nlist__mini-img { width: 96px; }
  .nlist__tools { flex-wrap: wrap; }
  .nlist__select, .nlist__select select { width: 100%; }
  .nlist__boletin { padding: 28px 22px; margin-top: 48px; }
  .nlist__boletin-title { font-size: 24px; }
  .nlist__boletin-form { width: 100%; flex-direction: column; }
  .nlist__boletin-input, .nlist__boletin-btn { width: 100%; }
}

/* =========================================================
   12f. Legal Updates (biblioteca) — Figma WIP página «Legal Updates» 1865:421 (elemento amcham-legal-updates, 19 sep 2026)
   Página /noticias/legal-updates/ (112) sobre el CPT `legal_update`. Una sola columna de 1240, sin submenú.
   Reusa del 12c/12e: .narch__head, .narch__chip, .narch__pag, .narch__empty, .nlist__tools/__select/__search/__submit.
   Lo propio: el reproductor (.lu__player: miniatura de YouTube + botón que el JS cambia por el iframe), la firma
   que produce cada video (.lu__firma), el destacado 813 + «Más recientes» 387, la retícula de 3 y la franja de firmas.
   ========================================================= */
.lu { display: flex; flex-direction: column; row-gap: 64px; width: 100%; }
.lu__intro { display: flex; flex-direction: column; row-gap: 20px; }
.lu__intro .sec-head { max-width: 800px; }
.lu__lead { margin: 0; max-width: 800px; font-size: 17px; line-height: 1.6; color: #6F6F6F; }

/* Reproductor (miniatura + botón → iframe) */
.lu__player { position: relative; overflow: hidden; border-radius: var(--amcham-radius); background: #1B2330; aspect-ratio: 16 / 9; }
.lu__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lu__img--vacia { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--amcham-color-dark-blue, #1C407D), #0E2550); }
.lu__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--amcham-color-red, #FF001A); color: #fff; cursor: pointer; transition: transform .2s var(--amcham-ease), background .2s var(--amcham-ease); }
.lu__play .lu__play-icono, .lu__play svg, .lu__play i { width: 19px; height: 19px; font-size: 19px; margin-left: 3px; color: #fff; }
.lu__player:hover .lu__play { transform: scale(1.08); }
.lu__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lu__dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; border-radius: 4px; background: rgb(0 0 0 / .78); color: #fff; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.4; }
.lu__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lu__player--activo .lu__dur { display: none; }

/* Firma que produce el video */
.lu__firma { display: inline-flex; align-items: center; column-gap: 10px; text-decoration: none; color: inherit; }
.lu__logo { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #E2E2E2; border-radius: 5px; background: #F1F4F7; }
.lu__logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lu__logo-ini { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 700; line-height: 1; color: var(--amcham-color-navy); }
.lu__firma-nombre { font-family: var(--amcham-font-heading); font-size: 14.5px; font-weight: 500; line-height: 1.3; color: #333; }
.lu__firma--link:hover .lu__firma-nombre { color: var(--amcham-color-blue); }
.lu__firma--grande .lu__logo { width: 44px; height: 44px; border-radius: 6px; }
.lu__firma--grande .lu__logo-ini { font-size: 15px; }
.lu__firma--grande .lu__firma-nombre { font-size: 17px; font-weight: 600; color: var(--amcham-color-navy); }
.lu__firma-etiqueta { display: block; margin-bottom: 6px; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #767676; }

/* Meta (área · fecha) */
.lu__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 13px; color: #767676; }
.lu__area { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.4; text-transform: uppercase; color: var(--amcham-color-red, #FF001A); }
.lu__sep { color: #C9CDD3; }

/* Destacado + más recientes (813 · 40 · 387 sobre 1240) */
.lu__destacadas { display: grid; grid-template-columns: minmax(0, 1fr) 31.2%; column-gap: 3.23%; align-items: start; }
.lu__hero { display: flex; flex-direction: column; row-gap: 24px; }
.lu__hero-body { display: flex; flex-direction: column; row-gap: 14px; }
.lu__hero-titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 32px; font-weight: 600; line-height: 1.24; color: var(--amcham-ink); }
.lu__hero-resumen { margin: 0; max-width: 700px; font-size: 17px; line-height: 1.6; color: #6F6F6F; }
.lu__hero-player .lu__play { width: 84px; height: 84px; }
.lu__hero-player .lu__play .lu__play-icono, .lu__hero-player .lu__play svg, .lu__hero-player .lu__play i { width: 29px; height: 29px; font-size: 29px; margin-left: 5px; }
.lu__hero-player .lu__dur { right: 12px; bottom: 12px; padding: 4px 8px; font-size: 12px; }
.lu__hero-firma { margin-top: 2px; }
.lu__recientes { display: flex; flex-direction: column; }
/* Vista con un solo destacado (última página o filtro con pocos resultados): no hay «Más recientes»,
   así que el destacado toma la fila entera y la ficha va al costado del reproductor, no debajo. */
.lu__destacadas.lu__destacadas--solo { grid-template-columns: minmax(0, 1fr); }
.lu__destacadas--solo .lu__hero { display: grid; grid-template-columns: minmax(0, 1fr) 31.2%; column-gap: 3.23%; align-items: start; }
.lu__recientes-eyebrow { margin-bottom: 16px; }
.lu__mini { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid #E2E2E2; }
.lu__mini:last-child { border-bottom: 1px solid #E2E2E2; }
.lu__mini-player { border-radius: 6px; }
.lu__mini-player .lu__play { width: 30px; height: 30px; }
.lu__mini-player .lu__play .lu__play-icono, .lu__mini-player .lu__play svg, .lu__mini-player .lu__play i { width: 11px; height: 11px; font-size: 11px; margin-left: 2px; }
.lu__mini-body { display: flex; flex-direction: column; row-gap: 7px; }
.lu__mini-titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.34; color: var(--amcham-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lu__mini-meta { margin: 0; font-size: 13px; color: #767676; }

/* Cabecera y filtros */
.lu .narch__head { margin-bottom: 0; }
.lu .narch__title { font-size: 30px; }
.lu__filtros { display: flex; flex-direction: column; row-gap: 18px; margin-top: -40px; }
.lu__chips { margin-top: 0; }
.lu__tools { margin-left: 0; flex-wrap: wrap; }

/* Retícula de videos */
.lu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.lu-card { display: flex; flex-direction: column; row-gap: 20px; }
.lu-card__body { display: flex; flex-direction: column; row-gap: 12px; }
.lu-card__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.34; color: var(--amcham-ink); }
.lu-card .lu__firma { margin-top: 2px; }
.lu__pag { margin-top: -24px; }

/* Franja de firmas */
.lu__firmas { display: flex; flex-direction: column; row-gap: 26px; padding: 40px; border-radius: var(--amcham-radius); background: #F7F9FB; }
.lu__firmas-head { display: flex; flex-direction: column; row-gap: 10px; }
.lu__firmas-texto { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: #6F6F6F; }
.lu__firmas-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.lu__firma-caja { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 16px; border: 1px solid #E2E2E2; border-radius: 8px; background: #fff; text-align: center; text-decoration: none; transition: border-color .15s var(--amcham-ease); }
.lu__firma-caja:hover { border-color: var(--amcham-color-blue); }
.lu__firma-caja-nombre { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 500; line-height: 1.25; color: #59616B; }
.lu__firma-logo { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }

/* El video que subió al destacado queda marcado en su tarjeta / miniatura */
.lu-card.is-activo .lu__player::after, .lu__mini.is-activo .lu__player::after { content: 'En el reproductor'; position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: rgb(28 64 125 / .94); color: #fff; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; letter-spacing: .3px; }
.lu__mini.is-activo .lu__player::after { padding: 4px 4px; font-size: 9px; }
.lu-card.is-activo .lu-card__titulo, .lu__mini.is-activo .lu__mini-titulo { color: var(--amcham-color-navy); }
.lu-card.is-activo .lu__play, .lu__mini.is-activo .lu__play { background: var(--amcham-color-navy); }


@media (max-width: 1279px) {
  .lu__destacadas { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; }
  .lu__hero-titulo { font-size: 28px; }
  .lu__grid { gap: 40px 32px; }
  .lu__firmas-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .lu { row-gap: 52px; }
  .lu__destacadas { grid-template-columns: 1fr; row-gap: 40px; }
  .lu__destacadas--solo .lu__hero { grid-template-columns: 1fr; row-gap: 24px; }
  .lu__recientes { max-width: 640px; }
  .lu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lu__firmas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lu__hero-player .lu__play { width: 68px; height: 68px; }
}
@media (max-width: 767px) {
  .lu { row-gap: 44px; }
  .lu .narch__title { font-size: 26px; }
  .lu__hero-titulo { font-size: 24px; }
  .lu__hero-resumen { font-size: 16px; }
  .lu__mini { grid-template-columns: 104px minmax(0, 1fr); }
  .lu__grid { grid-template-columns: 1fr; gap: 36px; }
  .lu__firmas { padding: 26px 20px; }
  .lu__firmas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lu__firma-caja { height: 62px; padding: 0 10px; }
  .lu__firma-caja-nombre { font-size: 12.5px; }
}

/* =========================================================
   12g. Boletines (archivo del correo) — Figma WIP página «Boletines» 1898:421 (elemento amcham-boletines, 19 sep 2026)
   Página /noticias/boletines/ (117) sobre el CPT `boletin`. Una sola columna de 1240, sin submenú.
   Reusa del 12c/12e: .narch__head, .narch__chip, .narch__pag, .narch__empty, .nlist__tools/__search/__submit y
   la banda .nlist__boletin. Lo propio: la vista previa del correo (iframe a /?amcham_boletin=ID dentro de una
   «hoja» de 600), la tarjeta de edición y el popup, que es el correo y nada más.
   ========================================================= */
.bol { display: flex; flex-direction: column; row-gap: 64px; width: 100%; }
.bol__intro { display: flex; flex-direction: column; row-gap: 20px; }
.bol__intro .sec-head { max-width: 800px; }
.bol__lead { margin: 0; max-width: 800px; font-size: 17px; line-height: 1.6; color: #6F6F6F; }

/* Última edición — 813 · 40 · 387 sobre 1240 */
.bol__destacada { display: grid; grid-template-columns: minmax(0, 1fr) 31.2%; column-gap: 3.23%; align-items: start; }
.bol__prev { position: relative; display: block; width: 100%; aspect-ratio: 813 / 457; padding: 0; border: 0; border-radius: var(--amcham-radius); overflow: hidden; background: #E8EEF5; cursor: pointer; }
.bol__prev-hoja { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); width: 600px; height: 520px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 10px 24px rgb(10 28 58 / .16); transition: transform .25s var(--amcham-ease, ease); }
.bol__prev-frame { width: 600px; height: 1400px; border: 0; display: block; background: #FAFAFA; pointer-events: none; }
.bol__prev-hoja--img { display: flex; align-items: flex-start; justify-content: center; }
.bol__prev-img { width: 100%; height: auto; display: block; }
.bol__prev-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; background: linear-gradient(180deg, rgb(232 238 245 / 0) 0%, rgb(232 238 245 / .96) 72%, #E8EEF5 100%); }
.bol__prev-tag { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 17px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .08); font-family: var(--amcham-font-heading); font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--amcham-color-navy); }
.bol__prev:hover .bol__prev-hoja { transform: translateX(-50%) translateY(-4px); }
.bol__prev:focus-visible { outline: 3px solid var(--amcham-color-navy); outline-offset: 3px; }

.bol__ficha { display: flex; flex-direction: column; align-items: flex-start; row-gap: 18px; }
.bol__chip { display: inline-flex; padding: 7px 12px; border-radius: 4px; background: var(--amcham-color-red, #FF001A); color: #fff; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .5px; text-transform: uppercase; }
.bol__ficha-titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 32px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.bol__ficha-fecha { font-size: 15px; line-height: 1.4; color: #6F6F6F; }
.bol__ficha-texto { margin: 0; font-size: 16px; line-height: 1.6; color: #6F6F6F; }
.bol__btn { height: 50px; padding: 0 28px; border: 0; cursor: pointer; }
.bol__ext { display: inline-flex; align-items: center; column-gap: 8px; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 500; color: var(--amcham-color-blue, #0073C0); text-decoration: none; }
.bol__ext svg, .bol__ext i { width: 13px; height: 13px; font-size: 13px; }
.bol__ext:hover { color: var(--amcham-color-navy); }

/* Cabecera y filtros */
.bol .narch__title { font-size: 32px; }
.bol__filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; }
.bol__filtros .narch__filters { margin-top: 0; }
.bol__chips .narch__chip { border-radius: 18px; }

/* Retícula de ediciones */
.bol__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.bol-card { display: flex; }
.bol-card__btn { display: flex; flex-direction: column; row-gap: 18px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bol-card__foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #E8EEF5; }
.bol-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--amcham-ease, ease); }
.bol-card__img--vacia { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--amcham-color-dark-blue, #1C407D), #0E2550); }
.bol-card__btn:hover .bol-card__img { transform: scale(1.04); }
.bol-card__chip { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 4px; background: rgb(28 64 125 / .92); color: #fff; font-family: var(--amcham-font-heading); font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .5px; text-transform: uppercase; }
.bol-card__body { display: flex; flex-direction: column; row-gap: 10px; }
.bol-card__fecha { font-size: 13.5px; line-height: 1.4; color: #6F6F6F; }
.bol-card__titulo { font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--amcham-ink); transition: color .15s var(--amcham-ease, ease); }
.bol-card__btn:hover .bol-card__titulo { color: var(--amcham-color-navy); }
.bol-card__meta { font-size: 14px; line-height: 1.4; color: #6F6F6F; }
.bol-card__enlace { display: inline-flex; align-items: center; column-gap: 8px; margin-top: 4px; font-family: var(--amcham-font-heading); font-size: 14.5px; font-weight: 500; color: var(--amcham-color-blue, #0073C0); }
.bol-card__enlace svg { width: 16px; height: auto; }
.bol-card__btn:focus-visible { outline: 3px solid var(--amcham-color-navy); outline-offset: 4px; border-radius: 8px; }

/* Lista por año (diseño «lista», Figma 1906:427) — sin imágenes: la más reciente es la primera fila */
.bol__lista { display: flex; flex-direction: column; row-gap: 44px; }
.bol-grupo { display: flex; flex-direction: column; row-gap: 22px; }
.bol-grupo__head { display: flex; align-items: center; column-gap: 12px; }
.bol-grupo__anio { margin: 0; font-family: var(--amcham-font-heading); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.bol-grupo__n { padding: 5px 10px; border-radius: 12px; background: #E8F1FA; font-family: var(--amcham-font-heading); font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--amcham-color-navy); }
.bol-filas { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: var(--amcham-radius); overflow: hidden; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.bol-fila + .bol-fila { border-top: 1px solid #E6E6E6; }
.bol-fila__btn { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; column-gap: 22px; width: 100%; padding: 20px 28px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s var(--amcham-ease, ease); }
.bol-fila__btn:hover { background: #F5F9FD; }
.bol-fila__btn:focus-visible { outline: 3px solid var(--amcham-color-navy); outline-offset: -3px; }
.bol-fila__num { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 8px; background: #E8F1FA; font-family: var(--amcham-font-heading); font-size: 21px; font-weight: 700; line-height: 1; color: var(--amcham-color-navy); }
.bol-fila__texto { display: flex; flex-direction: column; row-gap: 6px; min-width: 0; }
.bol-fila__titular { display: flex; align-items: center; column-gap: 10px; row-gap: 6px; flex-wrap: wrap; }
.bol-fila__titulo { font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); transition: color .15s var(--amcham-ease, ease); }
.bol-fila__btn:hover .bol-fila__titulo { color: var(--amcham-color-navy); }
.bol-fila__chip { padding: 5px 9px; border-radius: 4px; background: var(--amcham-color-red, #FF001A); color: #fff; font-family: var(--amcham-font-heading); font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .5px; text-transform: uppercase; }
.bol-fila__fecha { font-size: 14px; line-height: 1.4; color: #6F6F6F; }
.bol-fila__accion { display: inline-flex; align-items: center; column-gap: 8px; font-family: var(--amcham-font-heading); font-size: 14.5px; font-weight: 500; color: var(--amcham-color-blue, #0073C0); white-space: nowrap; }
.bol-fila__accion svg { width: 16px; height: auto; }

/* El popup: el correo y la ✕, nada más */
.bol-modal { width: min(680px, 100vw - 120px); max-width: none; height: min(88vh, 1000px); max-height: none; padding: 0; border: 0; border-radius: var(--amcham-radius); background: #FAFAFA; overflow: visible; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.bol-modal[open] { display: flex; }
.bol-modal::backdrop { background: rgb(10 23 48 / .74); }
.bol-modal__frame { flex: 1 1 auto; width: 100%; height: 100%; border: 0; border-radius: var(--amcham-radius); background: #FAFAFA; }
.bol-modal__cerrar { position: absolute; left: calc(100% + 16px); top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--amcham-color-navy); cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .2); transition: background .15s var(--amcham-ease, ease), color .15s var(--amcham-ease, ease); }
.bol-modal__cerrar svg, .bol-modal__cerrar i { width: 17px; height: 17px; font-size: 17px; }
.bol-modal__cerrar:hover { background: var(--amcham-color-navy); color: #fff; }
body.bol-modal-open { overflow: hidden; }

@media (max-width: 1279px) {
  .bol__destacada { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; }
  .bol__ficha-titulo { font-size: 28px; }
}
@media (max-width: 1023px) {
  .bol { row-gap: 48px; }
  .bol__destacada { grid-template-columns: 1fr; row-gap: 32px; }
  .bol__ficha { max-width: 640px; }
  .bol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .bol__filtros { flex-direction: column; align-items: stretch; }
  .bol__tools { margin-left: 0; }
  .bol__tools .nlist__search { flex: 1 1 auto; }
  .bol__tools .nlist__search input { width: 100%; }
  .bol-modal { width: calc(100vw - 24px); height: 92vh; }
  .bol-modal__cerrar { left: auto; right: 10px; top: 10px; }
}
@media (max-width: 767px) {
  .bol__lista { row-gap: 32px; }
  .bol-fila__btn { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 18px 18px; }
  .bol-fila__num { width: 44px; height: 44px; font-size: 17px; }
  .bol-fila__titulo { font-size: 16px; }
  .bol-fila__accion { grid-column: 2; }
  .bol-grupo__anio { font-size: 20px; }
  .bol__prev { aspect-ratio: 16 / 11; }
  .bol__prev-hoja { top: 22px; transform: translateX(-50%) scale(.72); transform-origin: top center; }
  .bol__prev:hover .bol__prev-hoja { transform: translateX(-50%) scale(.72); }
  .bol__prev-tag { left: 14px; bottom: 14px; height: 30px; padding: 0 12px; font-size: 11.5px; }
  .bol__ficha-titulo { font-size: 24px; }
  .bol .narch__title { font-size: 28px; }
  .bol__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 479px) {
  .bol__prev-hoja { transform: translateX(-50%) scale(.54); }
  .bol__prev:hover .bol__prev-hoja { transform: translateX(-50%) scale(.54); }
}

/* =========================================================
   12d. Página 404 — Figma WIP «Página 404 · B (corporativa)» 1376:1488 (elemento amcham-404, template «Página 404», 15 sep 2026)
   Mensaje centrado en 760 (eyebrow navy, h1 44, texto 18, botones) → 96 → «Le puede interesar»: 3 tarjetas blancas iguales.
   ========================================================= */
.e404 { display: flex; flex-direction: column; width: 100%; }
.e404__msg { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 760px; margin: 0 auto; }
.e404__eyebrow { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1; text-transform: uppercase; color: var(--amcham-color-navy); margin-bottom: 22px; }
.e404__title { font-size: 44px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); margin: 0 0 20px; }
.e404__text { font-size: 18px; line-height: 1.6; color: #6F6F6F; max-width: 640px; margin: 0 0 36px; }
.e404__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.e404__btns .btn { }
.e404__more { margin-top: 96px; }
.e404__more .section-title__text { font-size: 32px; }
.e404__more .section-title { row-gap: 20px; }
.e404__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.e404-card { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 34px; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow, 0 6px 10px rgb(0 0 0 / .05)); text-decoration: none; color: inherit; transition: transform .25s var(--amcham-ease, ease), box-shadow .25s var(--amcham-ease, ease); }
a.e404-card:hover { transform: translateY(-4px); }
.e404-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: color-mix(in srgb, var(--amcham-color-navy) 10%, transparent); color: var(--amcham-color-navy); margin-bottom: 20px; }
.e404-card__icon svg { width: 48px; height: 48px; display: block; }
.e404-card__icon svg path, .e404-card__icon svg circle, .e404-card__icon svg rect { fill: currentColor; }
.e404-card__title { font-family: var(--amcham-font-heading); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); margin-bottom: 12px; }
.e404-card__text { font-size: 15px; line-height: 1.6; color: #6F6F6F; margin-bottom: 22px; }
.e404-card__more { margin-top: auto; line-height: 1; }
a.e404-card:hover .e404-card__more { color: var(--amcham-color-blue); }
a.e404-card:hover .e404-card__more > svg { transform: translateX(3px); }
.sec-404 { padding-bottom: 110px; }
@media (max-width: 1023px) {
  .e404__title { font-size: 36px; }
  .e404__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 767px) {
  .e404__title { font-size: 28px; line-height: 1.25; }
  .e404__text { font-size: 16px; margin-bottom: 28px; }
  .e404__btns { flex-direction: column; align-items: stretch; width: 100%; }
  .e404__btns .btn { justify-content: center; }
  .e404__more { margin-top: 64px; }
  .e404__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .e404-card { padding: 28px 24px; }
  .sec-404 { padding-bottom: 72px; }
}

/* =========================================================
   13. Comités — Figma 731:1357 «Nuestros Comités»
   3 columnas de 387 · gap 40/38 · banda 70 (color del comité + marca) · cuerpo 167, padding 20/18
   Markup del elemento amcham-comites: .comites > article.comite[--chip] > .comite__band + .comite__body
   ========================================================= */
.sec-comites, #brx-content > .sec-comites:last-child { padding-top: 13px; padding-bottom: 73px; }   /* header 275 + 60 + 13 = 348 (Figma 1195:1300: intro a 72 del hero); última tarjeta → footer 73 */
.comites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 40px; }
.comite { display: flex; flex-direction: column; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); background: #fff; }
.comite__band {
  position: relative; overflow: hidden; display: flex; align-items: center; column-gap: 12px; min-height: 70px; padding: 8px 12px;
  border-radius: var(--amcham-radius) var(--amcham-radius) 0 0; color: #fff; text-decoration: none;
  background: var(--chip, var(--amcham-color-navy)) linear-gradient(104deg, color-mix(in srgb, var(--chip, #133E7F) 82%, #fff) 0%, var(--chip, #133E7F) 42%, color-mix(in srgb, var(--chip, #133E7F) 82%, #000) 100%);
}
.comite__band::before {   /* franjas diagonales claras de la imagen del Figma */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgb(255 255 255 / 0) 0 60px, rgb(255 255 255 / .05) 60px 110px, rgb(255 255 255 / 0) 110px 190px);
}
.comite__band::after {   /* marca AmCham oscura al fondo derecho */
  content: ''; position: absolute; right: 22px; top: -14px; width: 98px; height: 98px; pointer-events: none;
  background: url('assets/amcham-mark.webp') no-repeat center / contain; filter: brightness(0); opacity: .14;
}
.comite__icon { position: relative; z-index: 1; width: 42px; height: 42px; flex-shrink: 0; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.comite__icon svg { width: 36px; height: 36px; color: #fff; display: block; }
.comite__icon svg .ic-accent, .event__badge svg .ic-accent { fill: var(--chip, #133E7F); }
.event-card__chip svg .ic-accent { fill: color-mix(in srgb, var(--chip, #133E7F) 10%, #fff); }
.comite__title { position: relative; z-index: 1; display: flex; flex-direction: column; font-family: var(--amcham-font-heading); line-height: 1.1; text-transform: uppercase; }
.comite__title small { font-size: 15px; font-weight: 600; letter-spacing: .6px; }
.comite__title strong { font-size: 17px; font-weight: 700; letter-spacing: .68px; }
a.comite__band:hover .comite__title strong { text-decoration: underline; text-underline-offset: 3px; }
.comite__body { flex: 1 1 auto; min-height: 167px; padding: 20px 18px; border-radius: 0 0 var(--amcham-radius) var(--amcham-radius); }
.comite__body p { margin: 0; font-size: 15px; line-height: 1.5; color: #000; }
.comite__empty { color: var(--amcham-muted); font-style: italic; }
@media (max-width: 1279px) { .comites { gap: 30px; } }
@media (max-width: 1023px) { .comites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .comites { grid-template-columns: minmax(0, 1fr); gap: 24px; } .comite__body { min-height: 0; } .sec-comites { padding-top: 8px; padding-bottom: 40px; } }

/* Archivo de un comité (template Bricks «Comité (archivo)»): banda del comité + lista de sus eventos, con el submenú de Networking */
.comites--actual { grid-template-columns: minmax(0, 1fr); }
.comites--actual .comite__body { min-height: 0; }
.comites--actual .comite__body p { font-size: 16px; line-height: 1.6; }

/* --- Mosaico de comités (Figma 1195:1300 «Comités» · hover 992:851) — Johann, 14 sep 2026 ---
   Intro a dos columnas (texto 853 + selector 260, alineados abajo) → 40 → mosaico de 3 × 387, gap 40, filas de 40 px.
   Regla de Johann (14 sep, Figma 1218:14398): dentro de cada columna todas las tarjetas miden lo mismo; solo cambia el alto
   entre columnas para que cierren parejas → con 13 comités, externas 4 × 360 (span 5) y central 5 × 280 (span 4).
   Cada tarjeta trae --col y --span por posición (amcham-comites.php::plan); al reordenar, amcham.js los reasigna. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.comites-wrap { display: flex; flex-direction: column; row-gap: 28px; width: 100%; }   /* 29 oct 2026 (Johann): sistema 14 / 28 */   /* era 40 */
.comites-intro { display: flex; align-items: flex-end; justify-content: space-between; column-gap: 40px; row-gap: 24px; flex-wrap: wrap; }
.comites-intro__texto { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 560px; max-width: 853px; }
.comites-intro__eyebrow { font-family: var(--amcham-font-heading); font-size: 14px; margin-bottom: 14px; }   /* 29 oct 2026 (Johann): sistema 14 / 28 */   /* era 12 */
.comites-intro__title { margin: 0 0 25px; max-width: 764px; font-family: var(--amcham-font-heading); font-size: 36px; font-weight: 600; line-height: 1.16; color: var(--amcham-ink); }
.comites-intro__texto .section-title__line { margin-bottom: 28px; }   /* 29 oct 2026 (Johann): sistema 14 / 28 */   /* era 40 */
.comites-intro__p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--amcham-ink); }
.comites-orden { position: relative; flex: 0 0 260px; }
.comites-orden__select { width: 100%; height: 48px; padding: 0 44px 0 20px; border: .5px solid #949494; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 14px; line-height: 1.5; color: var(--amcham-ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.comites-orden__select:focus { outline: 2px solid var(--amcham-color-blue); outline-offset: 1px; }
.comites-orden > svg { position: absolute; right: 20px; top: 50%; width: 12px; height: 8px; transform: translateY(-50%); pointer-events: none; color: var(--amcham-color-navy); }
.comites--mosaico { grid-auto-rows: 40px; grid-auto-flow: row dense; gap: 40px; }   /* dense: cada tarjeta con --col empieza a buscar hueco desde la primera fila de su columna (con «row» a secas se apilarían columna tras columna) */
.comite-tile { grid-row: span 4; position: relative; border-radius: var(--amcham-radius); overflow: hidden; background: var(--chip, var(--amcham-color-navy)); box-shadow: 0 6px 10px rgb(0 0 0 / .05); isolation: isolate; }
/* Escritorio (3 columnas): columna fija y alto por posición. En tablet (2 col) y móvil (1 col) todas iguales (span 4) y flujo normal:
   con 13 la última fila del tablet queda con una sola tarjeta, que es lo honesto para un impar. */
@media (min-width: 1024px) { .comite-tile { grid-column: var(--col, auto); grid-row: span var(--span, 4); } }
.comites--mosaico.is-sorting > .comite-tile { transition: transform .6s var(--amcham-ease), height .6s var(--amcham-ease) !important; transition-delay: 0s !important; will-change: transform, height; }   /* animación FLIP al reordenar (amcham.js); el !important pisa el retardo escalonado del revelado */
.comites--mosaico.is-sorting > .comite-tile--ext { z-index: 1; }   /* las externas pasan por encima al cruzarse */
.comite-tile__link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; border-radius: inherit; overflow: hidden; }
.comite-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--amcham-ease); }
.comite-tile__img--vacia { background: var(--chip, var(--amcham-color-navy)); }
.comite-tile__panel {   /* banda de 85 (padding 16/36) que al hover sube hasta cubrir la tarjeta (padding 38/36, contenido centrado) */
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(100% - 85px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 16px 36px; overflow: hidden; transition: top .4s var(--amcham-ease), padding .4s var(--amcham-ease);
}
.comite-tile__bg {   /* el arte de la banda del Figma: degradado vertical claro → oscuro (75 %) + isotipo AmCham gigante a la derecha (svg .comite-tile__marca) */
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--chip, #133E7F);   /* respaldo; el degradado real va en el svg */
  transition: opacity .4s var(--amcham-ease);
}
/* el arte de la banda (.banda-svg.comite-tile__marca) y sus colores viven en la sección 7c: amcham_banda_svg() */
.comite-tile__head { position: relative; z-index: 1; display: flex; align-items: center; column-gap: 12px; }
.comite-tile__icon { display: flex; align-items: center; flex-shrink: 0; }
.comite-tile__icon svg { width: auto; height: 38px; max-width: 40px; color: #fff; display: block; }   /* Figma: íconos de 22–43 de alto según su proporción, sin círculo */
.comite-tile__icon svg .ic-accent { fill: var(--chip, #133E7F); }
.comite-tile__name { font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: .72px; text-transform: uppercase; }
.comite-tile__more { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--amcham-ease), opacity .3s var(--amcham-ease); }
.comite-tile__more-in { min-height: 0; overflow: hidden; }
.comite-tile__desc { display: block; padding-top: 12px; font-family: var(--amcham-font-body); font-size: 16px; line-height: 1.45; }
.comite-tile__cta { display: inline-flex; align-items: center; column-gap: 13px; margin-top: 18px; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.5; }
.comite-tile__cta .btn__arrow { width: 17px; transition: transform .2s; }
@media (hover: hover) {
  .comite-tile__link:hover .comite-tile__img { transform: scale(1.04); }
  .comite-tile__link:hover .comite-tile__panel, .comite-tile__link:focus-visible .comite-tile__panel { top: 0; padding: 38px 36px; }
  .comite-tile__link:hover .comite-tile__bg, .comite-tile__link:focus-visible .comite-tile__bg { opacity: .9; }   /* Figma: la imagen de la banda al 80–95 % sobre la foto */
  .comite-tile__link:hover .comite-tile__more, .comite-tile__link:focus-visible .comite-tile__more { grid-template-rows: 1fr; opacity: 1; }
  .comite-tile__link:hover .comite-tile__cta .btn__arrow { transform: translateX(4px); }
}
.comite-tile__link:focus-visible { outline: 3px solid var(--amcham-color-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .comite-tile__img, .comite-tile__panel, .comite-tile__bg, .comite-tile__more { transition: none; } }
@media (max-width: 1279px) { .comites--mosaico { gap: 30px; grid-auto-rows: 40px; }   /* 4 filas = 250 · 5 filas = 320 */ .comite-tile__panel { padding-left: 28px; padding-right: 28px; } .comites-intro__title { font-size: 32px; } }
@media (max-width: 1023px) { .comites-intro { align-items: flex-start; flex-direction: column; } .comites-intro__texto, .comites-orden { flex: 0 0 auto; }   /* en columna, flex-basis sería el alto */ .comites-orden { width: 260px; } }
@media (max-width: 639px)  { .comites--mosaico { gap: 24px; grid-auto-rows: 48px; }   /* 4 filas = 264 */ .comites-intro__title { font-size: 28px; } .comites-intro__p { font-size: 16px; } .comites-orden { width: 100%; } .comite-tile__panel { padding-left: 24px; padding-right: 24px; } }
/* Lista de eventos (página /networking/eventos/ y archivo de comité) — sin Figma: tarjetas del home + resumen, filtros como el directorio */
.events { display: flex; flex-direction: column; row-gap: 28px; width: 100%; }
.events__filters { display: flex; align-items: center; justify-content: space-between; column-gap: 24px; flex-wrap: wrap; row-gap: 16px; }
.events__tabs { display: inline-flex; background: #fff; border-radius: 4px; padding: 4px; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.events__tab { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 3px; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; color: var(--amcham-ink); text-decoration: none; }
.events__tab.is-active { background: var(--amcham-color-navy); color: #fff; }
.events__tab:not(.is-active):hover { color: var(--amcham-color-navy); }
.events__campos { display: flex; flex: 1 1 380px; column-gap: 12px; row-gap: 12px; flex-wrap: wrap; }   /* comité + modalidad: caben al lado de las pestañas y, si no, bajan juntos a una segunda línea */
.events__campos > .dir__field { flex: 1 1 0; min-width: 190px; max-width: 280px; }
.events__comite { flex: 0 1 320px; }
.events__count { margin: -8px 0 0; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.1; color: var(--amcham-ink); }
.events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.events-grid .event-card { padding: 32px 36px; min-height: 0; }
.event-card__abstract { margin: -12px 0 28px; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.events-grid__empty { grid-column: 1 / -1; margin: 0; padding: 32px; background: #fff; border-radius: var(--amcham-radius); color: var(--amcham-muted); }
.events__pager { margin-top: 12px; }
/* Formato lista: filas dentro de una tarjeta blanca, fecha a la izquierda */
.events-list { display: flex; flex-direction: column; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); padding: 8px 40px; }
.event-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 32px; align-items: start; padding: 32px 0; border-bottom: .5px solid rgb(158 158 158 / .4); }
.event-row:last-child { border-bottom: 0; }
/* Ficha de fecha «línea de marca» (Figma 1498-1634): caja clara con la barra rojo→azul arriba */
.event-row__date { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; padding-top: 6px; border-radius: 8px; overflow: hidden; background: #F4F6F9; color: var(--amcham-color-navy); text-decoration: none; font-family: var(--amcham-font-heading); line-height: 1; }   /* cuadrada: el padding-top compensa la barra para que día y mes queden centrados */
.event-row__date::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: var(--amcham-linea-marca); }
.event-row__day { font-size: 28px; font-weight: 600; line-height: 1.1; }
.event-row__month { margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; color: #6F6F6F; }
.event-row__body { display: flex; flex-direction: column; row-gap: 10px; min-width: 0; }
.event-row__body .event-card__chip { margin-bottom: 2px; align-self: flex-start; }
.event-row__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.event-row__title a { color: inherit; text-decoration: none; }
.event-row__title a:hover { color: var(--amcham-color-navy); }
.event-row__metas { display: flex; flex-direction: column; row-gap: 2px; }   /* hora y lugar en dos líneas pegadas, no separadas por el row-gap del cuerpo */
.event-row__meta { margin: 0; font-size: 15px; line-height: 1.5; color: var(--amcham-muted); }
.event-row__abstract { margin: 0; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* «Más información» como botón azul (Figma 1491-1488); align-self lo centra en la fila sin mover la ficha de fecha */
.event-row__more { align-self: center; margin-top: 0; gap: 10px; height: 44px; padding: 0 22px 0 20px; border-radius: 4px; background: var(--amcham-color-blue); color: #fff; font-size: 14px; font-weight: 600; font-family: var(--amcham-font-heading); white-space: nowrap; transition: background-color .2s; }
.event-row__more:hover { background: var(--amcham-color-blue-hover); color: #fff; }
.event-row__more .btn__arrow { width: 16px; }
.events-list .events-grid__empty { padding: 24px 0; box-shadow: none; }
@media (max-width: 1023px) { .event-row { grid-template-columns: 64px minmax(0, 1fr); } .event-row__more { grid-column: 2; margin-top: 4px; } .event-row__date { width: 64px; height: 64px; } .event-row__day { font-size: 26px; } }
@media (max-width: 767px) { .events-list { padding: 4px 20px; } .event-row { padding: 22px 0; column-gap: 16px; grid-template-columns: 56px minmax(0, 1fr); } .event-row__date { width: 56px; height: 56px; } .event-row__day { font-size: 22px; } .event-row__title { font-size: 18px; } }
/* Vista calendario (?ver=calendario): tarjeta blanca con cabecera de mes, cuadrícula lun–dom y agenda en móvil */
.events__tab svg { width: 16px; height: 16px; margin-right: 8px; fill: currentColor; }
.events__tab svg path { fill: currentColor; }
.cal { display: flex; flex-direction: column; row-gap: 20px; width: 100%; }
.cal__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.cal__nav { display: flex; align-items: center; column-gap: 14px; }
.cal__title { margin: 0; min-width: 220px; text-align: center; font-family: var(--amcham-font-heading); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.cal__btn { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid #DDD; border-radius: 4px; background: #fff; color: var(--amcham-color-navy); text-decoration: none; }
.cal__btn:first-child svg { transform: rotate(180deg); }
.cal__btn svg { width: 7px; height: 12px; }
.cal__btn:hover { background: var(--amcham-color-navy); color: #fff; border-color: var(--amcham-color-navy); }
.cal__meta { display: flex; align-items: center; column-gap: 18px; }
.cal__count { margin: 0; }
.cal__hoy { font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; color: var(--amcham-color-navy); text-decoration: underline; text-underline-offset: 3px; }
.cal__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }
.cal__table th { padding: 14px 8px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .48px; text-transform: uppercase; color: var(--amcham-muted); text-align: left; border-bottom: 1px solid rgb(158 158 158 / .3); }
.cal__day { vertical-align: top; height: 118px; padding: 8px 8px 10px; border-right: 1px solid rgb(158 158 158 / .2); border-bottom: 1px solid rgb(158 158 158 / .2); background: #fff; }
.cal__day:last-child { border-right: 0; }
.cal__table tr:last-child .cal__day { border-bottom: 0; }
.cal__day--out { background: #FAFAFA; }
.cal__day--out .cal__num { color: #B5B5B5; }
.cal__num { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; margin-bottom: 6px; border-radius: 50%; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; color: var(--amcham-ink); }
.cal__day--today .cal__num { background: var(--amcham-color-navy); color: #fff; }
.cal__ev { display: flex; flex-direction: column; row-gap: 1px; margin-top: 4px; padding: 4px 8px 4px 7px; border-left: 3px solid var(--chip, #133E7F); border-radius: 4px; background: color-mix(in srgb, var(--chip, #133E7F) 9%, #fff); color: var(--amcham-ink); text-decoration: none; font-size: 13px; line-height: 1.35; }
.cal__ev:hover { background: color-mix(in srgb, var(--chip, #133E7F) 18%, #fff); }
.cal__ev-hora { flex-shrink: 0; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 700; color: var(--chip, #133E7F); white-space: nowrap; }
.cal__ev-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
.cal__agenda { display: none; flex-direction: column; row-gap: 20px; }
.cal__dia { background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); padding: 16px 20px 18px; }
.cal__dia-titulo { display: flex; align-items: center; column-gap: 10px; margin: 0 0 8px; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; color: var(--amcham-ink); }
.cal__dia-num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--amcham-color-navy) 10%, #fff); color: var(--amcham-color-navy); font-size: 15px; }
.cal__dia-titulo.is-today .cal__dia-num { background: var(--amcham-color-navy); color: #fff; }
.cal__agenda .cal__ev { flex-direction: row; align-items: baseline; column-gap: 10px; margin-top: 8px; padding: 10px 12px 10px 11px; font-size: 15px; }
.cal__agenda .cal__ev-hora { flex-shrink: 0; min-width: 62px; }
.cal__agenda .cal__ev-hora { font-size: 12px; }
.cal__agenda .cal__ev-titulo { -webkit-line-clamp: 3; }
@media (max-width: 1023px) { .cal__day { height: 96px; padding: 6px 5px 8px; } .cal__table .cal__ev { font-size: 12px; padding: 3px 5px 3px 5px; } .cal__table .cal__ev-hora { display: none; } .cal__num { min-width: 24px; height: 24px; font-size: 13px; } }
@media (max-width: 767px) { .cal__table { display: none; } .cal__agenda { display: flex; } .cal__head { flex-direction: column; align-items: stretch; } .cal__nav { justify-content: space-between; } .cal__title { min-width: 0; font-size: 22px; } .cal__meta { justify-content: space-between; } .events__tab svg { display: none; } }
@media (max-width: 1023px) { .events__campos { flex-basis: 100%; } }
@media (max-width: 767px) { .events__campos > .dir__field { max-width: none; } }   /* apilados y a todo el ancho en móvil */
@media (max-width: 767px) { .events-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .events__tabs { width: 100%; } .events__tab { flex: 1; justify-content: center; } }

/* =========================================================
   14. Directorio de miembros — Figma 534:367
   Filtros 1240×155 montados −25 sobre el header · tarjetas 1240×280 (padding 50/70) · paginación 45×45
   Markup del elemento amcham-directorio: .dir > form.dir__filters + .dir__meta + .dir__list (article.dir-card) + nav.dir__pager
   ========================================================= */
.sec-dir, #brx-content > .sec-dir:last-child { padding-top: 0; padding-bottom: 71px; }
.dir { display: flex; flex-direction: column; width: 100%; }   /* el contenedor de Bricks alinea al inicio: sin width el bloque encoge */
.dir__filters { position: relative; z-index: 2; margin-top: -91px;   /* Figma: y 250 = header 281 + margen 60 − 91 */ background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); height: 155px; padding: 39px 67px 38px 50px; display: flex;   /* Figma: el bloque interior mide 1123 (50 izq, 67 der) */ flex-direction: column; row-gap: 12px; }
.dir__eyebrow { display: inline-flex; align-items: center; column-gap: 8px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #858585; }
.dir__eyebrow svg { width: 15px; height: 10px; }
.dir__row { display: flex; align-items: center; justify-content: space-between; column-gap: 21px; }   /* Figma: 482 · 421 · 136 repartidos en 1140 */
.dir__field { position: relative; display: block; height: 48px; }
.dir__field--q { flex: 0 1 482px; }
.dir__field--ind { flex: 0 1 421px; }
.dir__field input, .dir__field select { width: 100%; height: 48px; padding: 0 20px; border: .5px solid #949494; border-radius: 4px; background: #fff; font-family: var(--amcham-font-body); font-size: 14px; line-height: 1.5; color: var(--amcham-ink); appearance: none; -webkit-appearance: none; }
.dir__field input::placeholder { color: #767676; }
.dir__field select { padding-right: 44px; color: var(--amcham-ink); cursor: pointer; }
.dir__field select:has(option[value=""]:checked) { color: #767676; }   /* placeholder gris mientras no hay industria elegida */
.dir__field--ind > svg, .dir__field--ind > .amcham-ic { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--amcham-color-navy); }
.dir__field--ind > svg { width: 12px; height: 8px; }
.dir__field--ind > i.amcham-ic { font-size: 12px; line-height: 1; }   /* el ícono del registro sale como <i>: su tamaño es el font-size */
.dir__field input:focus, .dir__field select:focus { outline: 2px solid var(--amcham-color-blue); outline-offset: 1px; }
.dir__btn { display: inline-flex; align-items: center; justify-content: center; column-gap: 11px; height: 48px; padding: 0 30px; border: 0; border-radius: 4px; background: var(--amcham-color-navy); color: #fff; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; cursor: pointer; }
.dir__btn svg { width: 15px; height: 15px; }
.dir__btn:hover { background: var(--amcham-color-blue); }
.dir__meta { display: flex; align-items: center; justify-content: space-between; column-gap: 24px; margin: 69px 0 25px; }
.dir__count { margin: 0; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.1; color: var(--amcham-ink); }
.dir__export { display: flex; align-items: center; column-gap: 12px; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; letter-spacing: .52px; text-transform: uppercase; color: var(--amcham-ink); }
.dir__export-btn { display: inline-flex; align-items: center; column-gap: 8px; height: 36px; padding: 0 14px; border-radius: 4px; background: #E2E2E2; color: #434242; font-family: var(--amcham-font-body); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; }
.dir__export-btn svg { width: 14px; height: 16px; }
.dir__export-btn:hover { background: #d5d5d5; }
.dir__list { display: flex; flex-direction: column; row-gap: 28px; }
.dir__empty { margin: 0; padding: 40px; background: #fff; border-radius: var(--amcham-radius); color: var(--amcham-muted); }

/* Tarjeta */
.dir-card { position: relative; display: grid; grid-template-columns: 229px minmax(0, 400px) 295px; justify-content: space-between; align-items: center; column-gap: 44px; min-height: 280px; padding: 50px 70px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }
.dir-card__media { display: flex; flex-direction: column; align-items: center; row-gap: 0; }
.dir-card--platinum .dir-card__media, .dir-card--gold .dir-card__media { row-gap: 12px; }   /* Johann (20 oct): el logo quedaba pegado a la etiqueta cuando la tinta llena los 91 px (Chevron 81x91). La tarjeta la manda la columna de texto (158), asi que el aire es gratis. */
.dir-card--platinum .dir-card__logo, .dir-card--gold .dir-card__logo { height: 91px; }   /* Figma: etiqueta 20 + logo 91 = 111 */
.dir-card__logo { display: block; width: 229px; height: 110px; object-fit: contain; }
.dir-card__logo--empty { display: flex; align-items: center; justify-content: center; font-family: var(--amcham-font-heading); font-size: 48px; font-weight: 700; color: #C9D1DA; background: #F3F5F7; border-radius: 6px; }
.dir-card__level { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .52px; text-transform: uppercase; text-align: center; color: #80919B; }
.dir-card--gold .dir-card__level { color: #B9944A; }
.dir-card--platinum::before, .dir-card--gold::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(180deg, #7D8E98, #C7DAE4); }
.dir-card--gold::before { background: linear-gradient(180deg, #B69045, #EBDAB7); }
.dir-card__main { display: flex; flex-direction: column; row-gap: 18px; }
.dir-card__head { display: flex; flex-direction: column; row-gap: 10px; }
.dir-card__name { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.1; color: var(--amcham-color-navy); }
.dir-card__industry { margin: 0; font-size: 16px; line-height: 1.5; color: var(--amcham-ink); }
.dir-card__reps { margin: 0; font-size: 14px; line-height: 1.5; color: var(--amcham-ink); }
.dir-card__reps strong { font-weight: 700; }
.dir-card__info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 20px; font-size: 14px; line-height: 1.5; color: var(--amcham-ink); }
.dir-card__info li { display: flex; align-items: flex-start; column-gap: 12px; }
.dir-card__info li:first-child { line-height: 1.4; }
.dir-card__info svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--amcham-color-navy); }   /* Font Awesome (registro de íconos): tamaño fijo, antes cada SVG traía el suyo */
.dir-card__info a { color: var(--amcham-color-navy); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.dir-card__info a[href^="tel:"] { color: var(--amcham-ink); text-decoration: none; }

/* Paginación */
.dir__pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; margin-top: 69px; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; }
.dir__page { display: inline-flex; align-items: center; justify-content: center; min-width: 45px; height: 45px; padding: 0 10px; border: 1px solid #DDD; border-radius: 4px; background: var(--amcham-bg); color: var(--amcham-ink); text-decoration: none; }
.dir__page.is-current { background: var(--amcham-color-navy); border-color: var(--amcham-color-navy); color: #F7F7F7; }
.dir__page--dots { border: 0; min-width: 28px; }
.dir__page--ctl { padding: 0 20px; column-gap: 10px; }
.dir__page--ctl svg { height: 10px; width: auto; }
.dir__page--ctl:first-of-type { margin-left: 24px; }
a.dir__page:hover { border-color: var(--amcham-color-navy); }

/* Impresión (Exportar → PDF abre la lista con ?imprimir=1 y llama a window.print) */
@media print {
  body.imprimir .site-header, body.imprimir .site-footer, body.imprimir .dir__filters, body.imprimir .dir__export, body.imprimir .dir__pager { display: none !important; }
  body.imprimir .dir-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; min-height: 0; padding: 24px 30px; }
  body.imprimir .dir__meta { margin: 0 0 16px; }
}

@media (max-width: 1279px) {
  .dir-card { grid-template-columns: 180px minmax(0, 1fr) 260px; column-gap: 32px; padding: 40px; }
  .dir-card__logo { width: 180px; height: 90px; }
  .dir__field--q, .dir__field--ind { flex-basis: 0; flex-grow: 1; }
}
@media (max-width: 1023px) {
  .dir-card { grid-template-columns: 160px minmax(0, 1fr); }
  .dir-card__info { grid-column: 2; }
  .dir__row { flex-wrap: wrap; row-gap: 12px; }
  .dir__field--q, .dir__field--ind { flex-basis: calc(50% - 11px); }
  .dir__btn { margin-left: 0; }
}
@media (max-width: 767px) {
  .dir__filters { margin-top: -20px; padding: 24px 20px; }
  .dir__field--q, .dir__field--ind { flex-basis: 100%; }
  .dir__btn { width: 100%; }
  .dir__meta { flex-direction: column; align-items: flex-start; row-gap: 16px; margin: 32px 0 20px; }
  .dir__list { row-gap: 20px; }
  .dir-card { grid-template-columns: 1fr; row-gap: 20px; padding: 28px 22px; min-height: 0; }
  .dir-card__media { align-items: flex-start; }
  .dir-card__logo { width: 180px; height: 86px; }
  .dir-card__info { grid-column: 1; row-gap: 12px; }
  .dir__pager { margin-top: 32px; }
  .dir__page--ctl:first-of-type { margin-left: 0; }
}

/* =========================================================
   16. Styleguide (/styleguide/) — solo el andamiaje .sg-*; los componentes usan sus clases reales
   ========================================================= */
.sg { display: flex; flex-direction: column; row-gap: 72px; width: 100%; }
.sg-intro { margin: 0; max-width: 760px; font-size: 18px; line-height: 1.5; color: var(--amcham-ink); }
.sg-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -40px; }
.sg-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid rgb(19 62 127 / .25); border-radius: 33px; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; color: var(--amcham-color-navy); text-decoration: none; background: #fff; }
.sg-nav a:hover { background: var(--amcham-color-navy); color: #fff; }
.sg-sec { display: flex; flex-direction: column; row-gap: 28px; scroll-margin-top: 24px; }
.sg-sec__head { display: flex; flex-direction: column; row-gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgb(34 34 34 / .15); }
.sg-sec__title { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--amcham-ink); }
.sg-sec__desc { margin: 0; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--amcham-muted); }
.sg-sec__desc code, .sg-note code, .sg-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #fff; padding: 1px 5px; border-radius: 3px; border: 1px solid rgb(0 0 0 / .08); }
.sg-h3 { margin: 12px 0 0; font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.sg-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--amcham-muted); max-width: 900px; }
.sg-grid { display: grid; gap: 24px; }
.sg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg-grid--cards { align-items: start; }
.sg-grid--cards > * { width: 100%; }
.sg-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sg-item--wide { grid-column: span 2; }
.sg-item { display: flex; flex-direction: column; background: #fff; border: 1px solid rgb(0 0 0 / .06); border-radius: var(--amcham-radius); overflow: hidden; }
.sg-item__demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 28px 24px; min-height: 120px; background: var(--amcham-bg); }
.sg-item__demo > * { max-width: 100%; }
.sg-item__demo > svg { width: 48px; height: 48px; color: var(--amcham-color-navy); }
.sg-item--navy .sg-item__demo { background: var(--amcham-color-dark-blue); }
.sg-item__meta { display: flex; flex-direction: column; row-gap: 4px; padding: 12px 16px 14px; border-top: 1px solid rgb(0 0 0 / .06); }
.sg-item__label { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; color: var(--amcham-ink); }
.sg-item__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--amcham-muted); white-space: normal; }
/* colores */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.sg-swatch { display: flex; flex-direction: column; background: #fff; border-radius: var(--amcham-radius); overflow: hidden; border: 1px solid rgb(0 0 0 / .06); }
.sg-swatch__color { display: flex; align-items: flex-end; height: 96px; padding: 10px 12px; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sg-swatch__color--claro { color: var(--amcham-ink); }
.sg-swatch__meta { display: flex; flex-direction: column; row-gap: 3px; padding: 10px 12px 12px; }
.sg-swatch__meta strong { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; color: var(--amcham-ink); }
.sg-swatch__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--amcham-color-navy); }
.sg-swatch__meta small { font-size: 12px; line-height: 1.4; color: var(--amcham-muted); }
.sg-swatches--comites .sg-swatch__color { height: 64px; }
/* tipografía */
.sg-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sg-font { display: flex; align-items: center; column-gap: 24px; padding: 24px; background: #fff; border-radius: var(--amcham-radius); border: 1px solid rgb(0 0 0 / .06); }
.sg-font__specimen { flex-shrink: 0; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: var(--amcham-radius); background: var(--amcham-color-navy); color: #fff; font-size: 64px; line-height: 1; }
.sg-font__specimen--heading { font-family: var(--amcham-font-heading); font-weight: 600; }
.sg-font__specimen--body { font-family: var(--amcham-font-body); font-weight: 400; background: var(--amcham-color-light-blue); }
.sg-font__meta { display: flex; flex-direction: column; row-gap: 4px; }
.sg-font__meta strong { font-family: var(--amcham-font-heading); font-size: 22px; font-weight: 600; color: var(--amcham-ink); }
.sg-font__meta span { font-size: 14px; color: var(--amcham-color-navy); font-weight: 600; }
.sg-font__meta small { font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }
.sg-font__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--amcham-muted); }
.sg-types { display: flex; flex-direction: column; background: #fff; border-radius: var(--amcham-radius); border: 1px solid rgb(0 0 0 / .06); overflow: hidden; }
.sg-type { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; align-items: center; padding: 22px 24px; border-bottom: 1px solid rgb(0 0 0 / .06); }
.sg-type:last-child { border-bottom: 0; }
.sg-type--navy { background: var(--amcham-color-dark-blue); }
.sg-type--navy .sg-type__meta { color: rgb(255 255 255 / .8); }
.sg-type--navy .sg-type__meta code { color: #fff; }
.sg-type--navy .sg-type__demo > * { color: #fff; }
.sg-type__demo .news-card--featured { font-size: 30px; line-height: 1.1; }
.sg-type__demo > * { margin: 0 !important; max-width: none; }
.sg-type__demo .page-title { margin-top: 0; }
.sg-type__meta { display: flex; flex-direction: column; row-gap: 4px; font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }
.sg-type__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--amcham-color-navy); }
.sg-type__demo .sg-inline { display: block; }
.sg-type__demo .event-card__chip { display: inline-flex; }
/* fondos */
.sg-fondo { width: 100%; height: 120px; border-radius: var(--amcham-radius); }
.sg-fondo--header { position: relative; overflow: hidden; background-image: linear-gradient(186deg, var(--amcham-color-light-blue) 22%, var(--amcham-color-dark-blue) 94%); }
.sg-fondo--header::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(90deg, var(--amcham-color-red), var(--amcham-color-blue)); }
.sg-fondo--header::after { content: ''; position: absolute; right: -20px; top: -30px; width: 170px; height: 170px; background: url('assets/amcham-mark.webp') no-repeat center / contain; opacity: .18; filter: brightness(0) invert(1); }
.sg-fondo--hero { background-color: #9fb3c8; background-image: linear-gradient(90deg, #1C407D 0%, #1C407D 12.2%, #006EB7 48.9%, rgb(0 110 183 / 0) 82.1%, rgb(0 110 183 / 0) 100%), repeating-linear-gradient(135deg, #9fb3c8 0 14px, #b7c6d6 14px 28px); }   /* el rayado simula el video debajo del velo */
.sg-fondo--quote { position: relative; overflow: hidden; background: var(--amcham-color-light-blue) linear-gradient(243deg, var(--amcham-color-light-blue) 0%, var(--amcham-color-dark-blue) 100%); }
.sg-fondo--quote::before { content: ''; position: absolute; right: -30px; top: -60px; width: 220px; height: 220px; background: url('assets/amcham-mark.webp') no-repeat center / contain; opacity: .2; }
.sg-fondo--footer { background: var(--amcham-footer-bg); }
.sg-lineas { display: flex; flex-direction: column; row-gap: 18px; }
.sg-line--platinum { background: linear-gradient(90deg, #7D8E98, #C7DAE4) !important; }
.sg-line--gold { background: linear-gradient(90deg, #B69045, #EBDAB7) !important; }
.sg-card-demo { width: 100%; height: 90px; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow); }
/* etiquetas */
.sg-eyebrow-gris { color: #858585; }
.sg-eyebrow-blanco { color: rgb(245 245 245 / .6); background: var(--amcham-color-navy); padding: 6px 10px; border-radius: 4px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-chips .event-card__chip { margin-bottom: 0; }
.sg-item__demo .event__badge { width: 100%; }
.sg-head-demo .home-services__title { font-size: 28px; }
.sg-arrows .splide__arrows.custom { position: static; display: flex; gap: 6px; }
.sg-pager { margin-top: 0; justify-content: flex-start; }
/* tarjetas */
.sg-comites { display: block; }
.sg-comites .comite { width: 100%; }
.sg-event-card { width: 100%; }
.sg-event-card .btn { align-self: stretch; justify-content: center; }
.sg .quote { width: 100%; max-width: 853px; }
/* formularios */
.sg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; max-width: 706px; }
.sg-form .reg__group--full, .sg-form .reg__group--submit { grid-column: 1 / -1; }
.sg-form .reg__group { display: flex; flex-direction: column; row-gap: 8px; min-width: 0; }
.sg-form .reg__msg { margin-bottom: 8px; }
.sg-form .reg__ac { position: relative; }
/* íconos */
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sg-icon { display: flex; flex-direction: column; align-items: center; row-gap: 10px; padding: 18px 10px 14px; background: #fff; border-radius: var(--amcham-radius); border: 1px solid rgb(0 0 0 / .06); }
.sg-icon__glyph { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--amcham-color-navy); }
.sg-icon__glyph svg { width: 26px; height: 26px; }
.sg-icon__glyph svg[viewBox='0 0 48 48'] { width: 40px; height: 40px; }
.sg-icon code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--amcham-muted); text-align: center; word-break: break-all; }
/* navegación */
.sg-subnav { width: 100%; flex-basis: auto; }
.sg-cal { display: flex; flex-direction: column; row-gap: 8px; width: 100%; max-width: 320px; }
.sg-cal .cal__ev { display: flex; flex-direction: column; }
/* medidas */
.sg-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--amcham-radius); overflow: hidden; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); }
.sg-table th, .sg-table td { padding: 14px 18px; border-bottom: 1px solid rgb(0 0 0 / .06); text-align: left; vertical-align: top; }
.sg-table th { width: 220px; font-family: var(--amcham-font-heading); font-weight: 600; color: var(--amcham-color-navy); white-space: nowrap; }
.sg-table tr:last-child th, .sg-table tr:last-child td { border-bottom: 0; }
@media (max-width: 1023px) {
  .sg-grid--3, .sg-grid--2, .sg-fonts, .sg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-type { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}
@media (max-width: 767px) {
  .sg { row-gap: 48px; }
  .sg-grid--3, .sg-grid--2, .sg-fonts, .sg-form, .sg-row { grid-template-columns: minmax(0, 1fr); }
  .sg-sec__title { font-size: 26px; }
  .sg-table th { width: auto; white-space: normal; }
  .sg-table tr { display: grid; }
}

/* =========================================================
   17. Brick components (/brick-components/) — andamiaje .bc-*; cada demo es el elemento real
   ========================================================= */
.sec-components { overflow: hidden; }   /* el carrusel de eventos asoma fuera del contenedor (igual que .home-sec--events) */
.sec-components .brxe-container { row-gap: 56px; }
.bc-intro { max-width: 760px; font-size: 18px; line-height: 1.5; color: var(--amcham-ink); margin: 0; }
.bc-block { display: flex; flex-direction: column; row-gap: 18px; width: 100%; padding-top: 40px; border-top: 1px solid rgb(34 34 34 / .15); }
.bc-title code { display: inline-block; vertical-align: middle; margin-left: 12px; padding: 3px 9px; border-radius: 4px; background: #fff; border: 1px solid rgb(19 62 127 / .25); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 500; color: var(--amcham-color-navy); }
.bc-desc { max-width: 900px; color: var(--amcham-muted); }
.bc-desc a { color: var(--amcham-color-blue); }
.bc-demo { position: relative; width: 100%; margin-top: 10px; padding: 32px 0 0; border-top: 1px dashed rgb(19 62 127 / .3); display: flex; flex-direction: column; row-gap: 40px; }
.bc-demo::before { content: 'Demo'; position: absolute; top: -9px; left: 0; padding: 0 8px; background: var(--amcham-bg); font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--amcham-color-navy); }
.bc-demo > * { width: 100%; }
.bc-demo .home-stats { margin-top: 0; }
.bc-demo .home-events__slider .splide__track { clip-path: inset(-40px 0 -40px -40px); }
.bc-demo .subnav { max-width: 320px; }
.bc-demo .bc-on-navy { display: flex; gap: 24px; padding: 24px; background: var(--amcham-color-dark-blue); border-radius: var(--amcham-radius); width: max-content; }
.bc-demo .dir__filters { margin-top: 0; }

/* =========================================================
   18. Beneficios de la membresía (/membresia/beneficios/) — lo que queda tras dividir el elemento amcham-beneficios
   en piezas sueltas (20 sep 2026, Johann): la retícula de tarjetas se fue a la 10g (.tcards), el carrusel de
   testimonios a la 10h (.testi) y los pasos a la 10i (.pasos-sec). Estas reglas siguen vivas porque las usa
   amcham-requisitos (.benefits.benefits--v2.benefits--req); la página 104 ya no las toca.
   ========================================================= */
.benefits { display: flex; flex-direction: column; row-gap: 48px; width: 100%; min-width: 0; }
.benefits__sec { display: flex; flex-direction: column; row-gap: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido; era 24 */
.benefits__sec--tight { row-gap: 10px; }
.benefits__lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--amcham-ink); }
.benefits__intro .benefits__lead + .cifras { margin-top: 8px; }
@media (max-width: 767px) {
  .benefits { row-gap: 36px; }
}

/* Tarjeta CTA bajo el submenú (elemento amcham-subnav, controles cta*) */
.subnav-cta { display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-radius: var(--amcham-radius); background: var(--amcham-color-navy); color: #fff; }
.subnav-cta__eyebrow { margin-bottom: 14px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #99BFF2; }
.subnav-cta__title { margin: 0 0 10px; font-family: var(--amcham-font-heading); font-size: 22px; font-weight: 600; line-height: 1.25; color: #fff; }
.subnav-cta__text { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / .8); }
.subnav-cta .btn { width: 100%; justify-content: center; }

/* =========================================================
   18b. Requisitos de afiliación (/membresia/requisitos-de-afiliacion/) — elemento amcham-requisitos
   Figma WIP «Membresía · Requisitos de afiliación» 1218:12322 (15 sep 2026). Reusa la cabecera, los pasos y el CTA de
   Beneficios (sección 18); aquí solo lo propio: tarjetas de categoría, lista de documentos con marca y tabla de cuotas.
   ========================================================= */
.req-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.req-cat { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.req-cat__name { margin: 0 0 8px; font-family: var(--amcham-font-heading); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--amcham-color-navy); }
.req-cat__text { margin: 0; font-size: 15px; line-height: 1.55; color: #6F6F6F; }
.req-cat__note { display: block; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid rgb(158 158 158 / .35); font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--amcham-ink); }
.req-cat__text + .req-cat__note { margin-top: 16px; }
/* Documentos: una tarjeta con filas separadas por líneas */
.req-docs { list-style: none; margin: 0; padding: 32px 36px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.req-doc { display: flex; align-items: flex-start; column-gap: 16px; padding: 18px 0; }
.req-doc:first-child { padding-top: 0; }
.req-doc:last-child { padding-bottom: 0; }
.req-doc + .req-doc { border-top: 1px solid rgb(158 158 158 / .3); }
.req-doc__check { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--amcham-color-light-blue) 12%, #fff); color: var(--amcham-color-light-blue); font-size: 12px; }
.req-doc__check svg { width: 12px; height: 12px; }
.req-doc__check svg > path { fill: currentColor; }
.req-doc__body { display: flex; flex-direction: column; row-gap: 3px; min-width: 0; }
.req-doc__title { margin: 0; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--amcham-ink); }
.req-doc__text { margin: 0; font-size: 14px; line-height: 1.55; color: #6F6F6F; }
/* Tabla de cuotas */
.req-table-wrap { padding: 8px 36px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.req-table { width: 100%; border-collapse: collapse; }
.req-table th, .req-table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid rgb(158 158 158 / .3); }
.req-table thead th { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 1.5px; text-transform: uppercase; color: #6F6F6F; border-bottom-color: rgb(158 158 158 / .6); }
.req-table tbody th { font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--amcham-ink); }
.req-table tbody td { font-size: 15px; line-height: 1.5; color: var(--amcham-ink); }
.req-table tbody tr:last-child th, .req-table tbody tr:last-child td { border-bottom: 0; }
.req-table th:nth-child(2), .req-table td:nth-child(2) { width: 160px; }   /* 220 con la columna de 853 */
.req-table th:nth-child(3), .req-table td:nth-child(3) { width: 200px; }
.req-table__pending { font-style: italic; color: #6F6F6F; }
.req-table__note { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: #6F6F6F; }
@media (max-width: 1023px) {
  .req-table th:nth-child(2), .req-table td:nth-child(2) { width: 30%; }
  .req-table th:nth-child(3), .req-table td:nth-child(3) { width: 26%; }
}
@media (max-width: 767px) {
  .req-cats { grid-template-columns: 1fr; }
  .req-cat { padding: 24px; }
  .req-docs { padding: 22px 20px; }
  .req-doc { padding: 16px 0; }
  /* La tabla se apila: cada fila es una tarjeta con la categoría arriba y «etiqueta · valor» debajo */
  .req-table-wrap { padding: 6px 20px; }
  .req-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .req-table, .req-table tbody, .req-table tr, .req-table th, .req-table td { display: block; width: auto !important; }
  .req-table tr { padding: 14px 0; border-bottom: 1px solid rgb(158 158 158 / .3); }
  .req-table tr:last-child { border-bottom: 0; }
  .req-table th, .req-table td { padding: 0; border: 0; }
  .req-table tbody th { margin-bottom: 6px; }
  .req-table tbody td { display: flex; justify-content: space-between; column-gap: 16px; font-size: 14px; padding: 3px 0; }
  .req-table tbody td::before { content: attr(data-label); flex: 0 0 auto; color: #6F6F6F; }
}

/* =========================================================
   19. Listado de documentos (/amcham/memorias-y-documentos/) — elemento amcham-documentos-lista
   Intro 18 · destacado (portada 200 | texto, botón) · grupos por categoría con filas: portada 56×74, título 18, meta 14, acción
   La portada «generada» (sin imagen) es un degradado navy con el isotipo y el año.
   ========================================================= */
.doclist { display: flex; flex-direction: column; row-gap: 40px; width: 100%; }
.doclist__lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--amcham-ink); }
.doc-cover--gen.doc-cover--gen { position: relative; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; color: #fff; background: var(--amcham-color-navy) linear-gradient(200deg, var(--amcham-color-light-blue) -10%, var(--amcham-color-navy) 55%, var(--amcham-color-dark-blue) 100%); }
.doc-cover--gen svg { position: absolute; right: -18%; top: -14%; width: 78%; height: auto; opacity: .18; }
.doc-cover--gen svg path { fill: #fff; }
.doc-cover--gen b { position: relative; display: block; font-family: var(--amcham-font-heading); font-weight: 700; line-height: 1; letter-spacing: -.5px; }
/* destacado */
.doc-featured { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; align-items: center; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow); overflow: hidden; color: inherit; text-decoration: none; }
.doc-featured__cover { display: block; align-self: stretch; min-height: 270px; background: color-mix(in srgb, var(--amcham-color-navy) 8%, #fff); }
.doc-featured__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-featured__cover.doc-cover--gen { padding: 22px; }
.doc-featured__cover.doc-cover--gen b { font-size: 44px; }
.doc-featured__body { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 40px 36px 0; }
.doc-featured__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; }
.doc-featured__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--amcham-color-blue) 12%, transparent); color: var(--amcham-color-blue); font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .3px; }
.doc-featured__title { display: block; margin: 0 0 12px; font-family: var(--amcham-font-heading); font-size: 28px; font-weight: 600; line-height: 1.15; color: var(--amcham-ink); transition: color .15s; }
.doc-featured:hover .doc-featured__title { color: var(--amcham-color-blue); }
.doc-featured__text { display: block; margin: 0; font-size: 16px; line-height: 1.6; color: var(--amcham-ink); }
.doc-featured__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 24px; }
.doc-featured__btn svg { width: 12px; height: auto; flex-shrink: 0; }
.doc-featured:hover .doc-featured__btn { background: var(--amcham-color-blue-hover); }
/* meta compartida */
.doc-meta { display: inline-flex; align-items: center; font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }
.doc-meta i { font-style: normal; margin: 0 8px; opacity: .6; }
/* grupos */
.doclist__group { display: flex; flex-direction: column; row-gap: 6px; }
.doclist__group-title { display: flex; align-items: center; column-gap: 10px; margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.doclist__group-intro { margin: -2px 0 10px; font-size: 16px; line-height: 1.6; color: var(--amcham-muted); }
.doclist__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--amcham-color-navy) 8%, transparent); color: var(--amcham-color-navy); font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; }
.doclist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: #fff; border-radius: var(--amcham-radius); box-shadow: var(--amcham-shadow); overflow: hidden; }
.doclist__items li + li { border-top: 1px solid #E6E6E6; }
.doc-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 22px; align-items: center; padding: 18px 28px 18px 22px; color: inherit; text-decoration: none; transition: background .15s; }
.doc-row:hover { background: color-mix(in srgb, var(--amcham-color-blue) 5%, #fff); }
.doc-row__cover { display: block; width: 56px; height: 74px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / .18); background: color-mix(in srgb, var(--amcham-color-navy) 8%, #fff); }
.doc-row__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-row__cover.doc-cover--gen { padding: 7px; }
.doc-row__cover.doc-cover--gen b { font-size: 13px; letter-spacing: 0; }
.doc-row__body { display: flex; flex-direction: column; row-gap: 3px; min-width: 0; }
.doc-row__title { font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); transition: color .15s; }
.doc-row:hover .doc-row__title { color: var(--amcham-color-blue); }
.doc-row__action { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--amcham-color-navy); }
.doc-row__action svg { width: 12px; height: auto; flex-shrink: 0; transition: transform .2s; }
.doc-row:hover .doc-row__action { color: var(--amcham-color-blue); }
.doc-row:hover .doc-row__action svg { transform: translateY(2px); }
.doc-row__action--muted { color: var(--amcham-muted); font-weight: 500; }
.doc-row--pendiente { cursor: default; }
.doc-row--pendiente:hover { background: transparent; }
.doc-row--pendiente:hover .doc-row__title { color: var(--amcham-ink); }
@media (max-width: 1279px) {
  .doc-featured { grid-template-columns: 170px minmax(0, 1fr); column-gap: 28px; }
  .doc-featured__body { padding: 28px 28px 28px 0; }
  .doc-featured__title { font-size: 24px; }
}
@media (max-width: 767px) {
  .doclist { row-gap: 28px; }
  .doclist__lead { font-size: 16px; }
  .doc-featured { grid-template-columns: minmax(0, 1fr); }
  .doc-featured__cover { min-height: 0; aspect-ratio: 16 / 9; }
  .doc-featured__cover.doc-cover--gen b { font-size: 40px; }
  .doc-featured__body { padding: 22px 22px 26px; }
  .doc-featured__title { font-size: 22px; }
  .doc-featured__foot .btn { width: 100%; justify-content: center; }
  .doc-row { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 16px 18px; row-gap: 8px; }
  .doc-row__cover { width: 48px; height: 64px; }
  .doc-row__title { font-size: 16px; }
  .doc-row__action { grid-column: 2; }
}


/* =========================================================
   19b. Documentos en «portadas» — elemento amcham-documentos-lista con Diseño = «Portadas (retícula) + filas»
   Figma «Documentos» 1887:421 (19 sep 2026): tarjeta 216×281 con la portada de fondo y degradado, título 24
   y botón azul abajo; chip «Más reciente» sobre la primera. Las demás categorías siguen en las filas de la 19.
   ========================================================= */
.doclist--portadas { row-gap: 60px; }
.doclist__portadas { display: flex; flex-direction: column; row-gap: 22px; }
.doclist__portadas > .sec-head + .doclist__lead { margin-top: 6px; }   /* 29 oct 2026 (Johann): 22 + 6 = 28, igual que todo lo que sigue a un titulo */
.doclist__portadas .doclist__lead { font-size: 17px; }
.doclist__portadas > .sec-head + .doc-covers { margin-top: 6px; }   /* 29 oct 2026 (Johann): 22 del row-gap + 6 = los 28 de cabecera->contenido; antes 4 (=26) */
.doc-covers { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 30px; }
.doc-cover-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 216 / 281; padding: 24px; border-radius: var(--amcham-radius); overflow: hidden; color: #fff; text-decoration: none; background: var(--amcham-color-navy); transition: transform .25s ease, box-shadow .25s ease; }
.doc-cover-card__img, .doc-cover-card__img.doc-cover--gen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.doc-cover-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.doc-cover-card__img.doc-cover--gen { padding: 24px; }
.doc-cover-card__img.doc-cover--gen b { font-size: 46px; }
.doc-cover-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 28 58 / .04) 0%, rgb(10 28 58 / .26) 32%, rgb(10 28 58 / .72) 62%, rgb(10 28 58 / .94) 100%); }
.doc-cover-card > *:not(.doc-cover-card__img):not(.doc-cover-card__chip) { position: relative; z-index: 1; }
.doc-cover-card__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: 18px; }
.doc-cover-card__title { font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; text-shadow: 0 1px 12px rgb(10 28 58 / .45); }
.doc-cover-card__btn { pointer-events: none; }
.doc-cover-card__btn svg { width: 12px; height: auto; flex-shrink: 0; }
.doc-cover-card__estado { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.5; color: rgb(255 255 255 / .75); }
.doc-cover-card__chip { position: absolute; top: 24px; left: 24px; z-index: 1; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--amcham-color-navy); font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.3; }
.doc-cover-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(12 34 68 / .22); }
.doc-cover-card:hover .doc-cover-card__img img { transform: scale(1.04); }
.doc-cover-card:hover .doc-cover-card__btn { background: var(--amcham-color-blue-hover); }
.doc-cover-card--pendiente { cursor: default; }
.doc-cover-card--pendiente:hover { transform: none; box-shadow: none; }
@media (max-width: 1023px) {
  .doc-covers { gap: 22px; }
  .doc-cover-card { padding: 20px; }
  .doc-cover-card__title { font-size: 21px; }
  .doc-cover-card__body { row-gap: 14px; }
}
@media (max-width: 767px) {
  .doclist--portadas { row-gap: 40px; }
  .doc-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .doc-cover-card__title { font-size: 19px; }
  .doc-cover-card__chip { top: 18px; left: 18px; }
}
@media (max-width: 479px) {
  .doc-covers { grid-template-columns: minmax(0, 1fr); }
  .doc-cover-card { aspect-ratio: 16 / 11; padding: 24px; }
  .doc-cover-card__title { font-size: 22px; }
}

/* =========================================================
   Archivo de un comité (Figma «Comité · Individual» 1040:981)
   Cabecera con el ícono del comité, ficha lateral, noticias del comité y otros comités.
   ========================================================= */
.page-eyebrow { display: block;   /* solo elementos PHP del tema (comité); en Bricks usar Texto básico → Estilo AmCham */ font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: var(--amcham-color-navy); }

/* Cabecera */
.comite-head { display: flex; flex-direction: column; row-gap: 24px; }
.comite-head__id { display: flex; align-items: center; column-gap: 20px; }
.comite-head__icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--amcham-radius); color: #fff;
  background: var(--chip, var(--amcham-color-navy)) linear-gradient(104deg, color-mix(in srgb, var(--chip, #133E7F) 82%, #fff) 0%, var(--chip, #133E7F) 42%, color-mix(in srgb, var(--chip, #133E7F) 82%, #000) 100%);
}
.comite-head__icon svg { width: 38px; height: 38px; }
.comite-head__title { margin: 0; font-family: var(--amcham-font-heading); font-size: 40px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.comite-head__title small { display: block; font-size: 14px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #6f6f6f; margin-bottom: 4px; }
.comite-head__desc { margin: 0; font-size: 19px; line-height: 1.7; color: var(--amcham-ink); }
.comite-head__freq {
  margin: 0; display: flex; align-items: center; column-gap: 16px; padding: 20px 26px; border: 1px solid #e4e7ec; border-radius: 8px;
  background: #f4f6f9; font-size: 16px; line-height: 1.5; color: var(--amcham-ink);
}
.comite-head__freq svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--amcham-color-navy); }

/* Columna lateral */
.comite-side { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; row-gap: 32px; }
.comite-card { border-radius: var(--amcham-radius); padding: 32px; background: #fff; }
.comite-card--ficha { box-shadow: 0 4px 18px rgb(0 0 0 / .08); }
.comite-card--dirs { border: 1px solid #e4e7ec; }
.comite-card__eyebrow { display: block; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #6f6f6f; margin-bottom: 18px; }
.comite-ficha { margin: 0; display: flex; flex-direction: column; }
.comite-ficha__row + .comite-ficha__row { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee; }
.comite-ficha dt { font-size: 13px; line-height: 1.5; color: #6f6f6f; }
.comite-ficha dd { margin: 5px 0 0; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--amcham-ink); }
.comite-dirs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 20px; }
.comite-dir { display: flex; align-items: center; column-gap: 16px; }
.comite-dir__avatar, .comite-dir__foto { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.comite-dir__avatar {
  display: grid; place-items: center; color: #fff; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600;
  background: var(--chip, var(--amcham-color-navy)) linear-gradient(104deg, color-mix(in srgb, var(--chip, #133E7F) 82%, #fff) 0%, var(--chip, #133E7F) 42%, color-mix(in srgb, var(--chip, #133E7F) 82%, #000) 100%);
}
.comite-dir__txt { display: flex; flex-direction: column; row-gap: 3px; min-width: 0; }
.comite-dir__txt strong { font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--amcham-ink); }
.comite-dir__txt em { font-style: normal; font-size: 13px; line-height: 1.45; color: var(--amcham-color-light-blue); }
.comite-dir__txt small { font-size: 13px; line-height: 1.45; color: #6f6f6f; }
/* La tarjeta «Únase al comité» usa .subnav-cta (ver «Tarjeta «Únase al comité»» más abajo); las reglas .comite-card--cta se retiraron el 19 oct 2026. */

/* Noticias del comité */
.comite-news { display: flex; flex-direction: column; row-gap: 14px; }
.comite-news__head { display: flex; align-items: baseline; justify-content: space-between; column-gap: 20px; }
.comite-news__count { font-size: 14px; line-height: 1.5; color: #6f6f6f; }
.comite-news__intro { margin: 0 0 10px; font-size: 16px; line-height: 1.65; color: #444; }
.comite-news__list { list-style: none; margin: 0; padding: 0; }
.comite-news__item + .comite-news__item { border-top: 1px solid #e4e7ec; }
.comite-news__item a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo flecha" "fecha flecha";
  align-items: center; column-gap: 20px; padding: 20px 0; text-decoration: none;
}
.comite-news__title { grid-area: titulo; font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--amcham-ink); }
.comite-news__date { grid-area: fecha; font-size: 13px; line-height: 1.5; color: #6f6f6f; margin-top: 6px; }
.comite-news__item .btn__arrow { grid-area: flecha; align-self: center; color: var(--amcham-color-red); transition: transform .2s ease; }
.comite-news__item a:hover .comite-news__title { color: var(--amcham-color-navy); }
.comite-news__item a:hover .btn__arrow { transform: translateX(4px); }
.comite-news__all { display: inline-flex; align-items: center; column-gap: 12px; margin-top: 12px; color: var(--amcham-color-red); font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; text-decoration: none; }

/* Otros comités */
.comite-otros { display: flex; flex-direction: column; row-gap: 14px; }
.comite-otros__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.comite-chip {
  display: flex; align-items: center; column-gap: 12px; min-height: 72px; padding: 12px 18px; border-radius: 8px; overflow: hidden;
  color: #fff; text-decoration: none;
  background: var(--chip, var(--amcham-color-navy)) linear-gradient(104deg, color-mix(in srgb, var(--chip, #133E7F) 82%, #fff) 0%, var(--chip, #133E7F) 42%, color-mix(in srgb, var(--chip, #133E7F) 82%, #000) 100%);
}
.comite-chip__icon { flex: 0 0 auto; display: grid; place-items: center; }
.comite-chip__icon svg { width: 26px; height: 26px; }
.comite-chip__name { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.3; text-transform: uppercase; }
.comite-chip:hover { filter: brightness(1.06); }

@media (max-width: 1023px) {
  .comite-side { flex-basis: auto; width: 100%; }
  .comite-head__title { font-size: 32px; }
  .comite-head__icon { width: 60px; height: 60px; }
  .comite-head__icon svg { width: 32px; height: 32px; }
  .comite-otros__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .comite-head__desc { font-size: 17px; }
  .comite-head__freq { align-items: flex-start; padding: 16px 18px; font-size: 15px; }
  .comite-otros__grid { grid-template-columns: minmax(0, 1fr); }
  .comite-news__item a { column-gap: 14px; padding: 16px 0; }
  .comite-news__title { font-size: 16px; }
}




/* ---------------------------------------------------------------------------------------------
   Comité individual · Figma «Comité · Individual» 1617:1405 (19 oct 2026, Ronda 2):
   título «Comité de …» en una línea, tarjeta «Únase» navy
   (opción B de 1622:572), reuniones sin chip y con contador, noticias en tarjetas de dos columnas.
   --------------------------------------------------------------------------------------------- */
.comite-side { row-gap: 24px; }
/* Tarjeta «Únase al comité» (19 oct 2026, Johann): la misma tarjeta navy de membresía de Contacto — .subnav-cta.subnav-cta--marca.comite-cta.
   Figma WIP 3010:494. El plugin AmCham Comités cambia el <a data-comite-cta> por un <button class="btn btn--red"> que abre el diálogo. */
.subnav-cta button.btn { border: 0; cursor: pointer; font-family: var(--amcham-font-heading); }
.subnav-cta__nota { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / .8); }
.subnav-cta__nota a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.subnav-cta__nota a:hover, .subnav-cta__nota a:focus-visible { color: #99BFF2; }
.events__cab { display: flex; flex-direction: column; row-gap: 14px; }
.comite-news__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.comite-news__card { position: relative; display: flex; flex-direction: column; row-gap: 10px; padding: 26px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 4px 18px rgb(0 0 0 / .06); }
.comite-news--tarjetas .comite-news__date { margin: 0; }
.comite-news--tarjetas .comite-news__title { margin: 0; font-size: 18px; line-height: 1.4; transition: color .2s; }
.comite-news__title a { color: inherit; text-decoration: none; }
.comite-news--tarjetas .comite-news__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* toda la tarjeta lleva a la noticia */
.comite-news__card:hover .comite-news__title { color: var(--amcham-color-blue); }
.comite-news__ext { margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 14.5px; line-height: 1.6; color: #6f6f6f; }
.comite-news__leer { margin-top: auto; padding-top: 8px; }
.comite-news__card:hover .comite-news__leer > svg { transform: translateX(3px); }
@media (max-width: 1023px) {
  /* Móvil y tableta: cabecera → reuniones → «Únase» → noticias → otros comités */
  .tax-comite .page-cols > .page-main, .tax-comite .page-cols > .comite-side { display: contents; }
  .tax-comite .page-cols .comite-head { order: 1; }
  .tax-comite .page-cols > .page-main > .page-block { order: 3; }
  .tax-comite .page-cols > .comite-side > .comite-card, .tax-comite .page-cols > .comite-side > .subnav-cta { order: 4; }
  .tax-comite .page-cols .comite-news { order: 5; }
  .tax-comite .page-cols .comite-otros { order: 6; }
}
@media (max-width: 639px) {
  .comite-news__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .comite-news__card { padding: 22px; }
  .comite-side .subnav-cta { padding: 24px; }
  .comite-head__title { font-size: 28px; }
  .comite-head__id { column-gap: 16px; }
  .comite-news__head { flex-direction: column; align-items: flex-start; row-gap: 4px; }
}

/* Página «Auditoría de diseño»: sin submenú, la columna de texto mantiene el ancho de una interior (853) */
.page-main--audit { max-width: 853px; }
.audit-btns { display: flex; flex-wrap: wrap; gap: 12px; }

body.header-claro:not(.home):not(.home-copia) .site-header { margin-bottom: 60px; }   /* interiores con header claro conservan el aire bajo el header; las copias del home no (22 oct 2026) */


/* =========================================================
   14. Buscador: panel de la lupa (escritorio) y hoja a pantalla completa (móvil)
   Markup: elements/amcham-buscador.php · JS: assets/amcham.js · Figma 1133:994, 1136:995, 1136:1130 / 1140:997, 1140:1067, 1140:1131
   ========================================================= */
.buscador { position: fixed; inset: 0; z-index: 1200; opacity: 0; transition: opacity .2s ease; }
.buscador.is-abierto { opacity: 1; }
.buscador [hidden], .sres [hidden] { display: none !important; }
.buscador__aviso-builder { margin: 8px 0; padding: 10px 14px; border: 1px dashed #B5C2D3; border-radius: 6px; background: #fff; font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }   /* solo en el builder */   /* el atributo hidden gana a los display de las clases */
body.buscador-abierto { overflow: hidden; }
.buscador__fondo { position: absolute; inset: 0; background: rgb(0 0 0 / .32); }   /* cubre también el header: sin corte a la altura de la barra (Johann, 13 sep) */
.buscador__panel {
  /* misma altura y ancho que los megamenús: pegado al borde inferior de la barra (el JS mide .navbar y pone --buscador-top, así cuenta la barra de admin) */
  position: absolute; top: var(--buscador-top, var(--amcham-navbar-h, 100px)); left: 50%; transform: translateX(-50%);
  width: var(--amcham-container); max-width: calc(100% - 40px); max-height: calc(100vh - var(--buscador-top, var(--amcham-navbar-h, 100px)) - 24px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05), 0 24px 48px rgb(0 0 0 / .1);
}
.buscador__cabecera { display: none; }
/* campo */
.buscador__campo { display: flex; align-items: center; column-gap: 16px; height: 83px; padding: 0 32px 0 40px; margin: 0; border-bottom: 1px solid rgb(0 0 0 / .1); }
.buscador__lupa { display: flex; color: var(--amcham-color-navy); }
.buscador__lupa svg { width: 22px; height: 22px; }
.buscador__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; padding: 0; font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--amcham-ink); caret-color: var(--amcham-color-navy); outline: 0; -webkit-appearance: none; appearance: none; border-radius: 0; }
.buscador__input::placeholder { color: var(--amcham-muted); opacity: 1; }
.buscador__input::-webkit-search-cancel-button, .buscador__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.buscador__borrar, .buscador__cerrar, .buscador__cerrar-movil { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--amcham-ink); cursor: pointer; }
.buscador__borrar { width: 22px; height: 22px; border-radius: 50%; background: #BDBDBD; color: #fff; }
.buscador__borrar:hover { background: var(--amcham-muted); }
.buscador__borrar svg { width: 9px; height: 9px; }
.buscador__esc { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--amcham-muted); background: #F1F1F1; border-radius: 4px; padding: 4px 8px; }
.buscador__cerrar svg { width: 16px; height: 16px; }
/* cuerpo */
.buscador__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 28px 40px 36px; }
.buscador__inicio { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.buscador__titulo { display: flex; align-items: baseline; column-gap: 8px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid rgb(0 0 0 / .1); font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amcham-color-navy); }
.buscador__titulo-n { font-weight: 500; letter-spacing: 0; color: var(--amcham-muted); }
.buscador__lista { list-style: none; margin: 0; padding: 0; }
.buscador__sugerencia { display: flex; align-items: center; column-gap: 12px; height: 40px; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 500; color: var(--amcham-ink); text-decoration: none; }
.buscador__sugerencia svg { width: 8px; height: 8px; color: var(--amcham-muted); flex-shrink: 0; }
.buscador__sugerencia:hover { color: var(--amcham-color-blue); }
.buscador__acceso { display: flex; align-items: flex-start; column-gap: 12px; padding: 8px 0; text-decoration: none; }
.buscador__acceso .btn__arrow { width: 16px; margin-top: 8px; color: var(--amcham-color-blue); flex-shrink: 0; transition: transform .2s; }
.buscador__acceso:hover .btn__arrow { transform: translateX(3px); }
.buscador__acceso-texto { display: flex; flex-direction: column; }
.buscador__acceso-titulo { font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--amcham-color-navy); }
.buscador__acceso-desc { font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }
/* resultados en vivo */
.buscador__grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.buscador__resultado { display: block; padding: 14px 0; border-bottom: 1px solid rgb(0 0 0 / .06); text-decoration: none; }
.buscador__resultado-titulo { display: block; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--amcham-ink); }
.buscador__resultado:hover .buscador__resultado-titulo { color: var(--amcham-color-blue); }
.buscador__resultado-titulo mark, .sres-item__title mark { background: none; color: inherit; font-weight: inherit; }  /* sin resaltado (19 oct) */
.buscador__resultado-meta { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }
.buscador__mas { display: inline-block; padding: 12px 0 0; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; color: var(--amcham-color-blue); text-decoration: none; }
.buscador.is-cargando .buscador__cuerpo { opacity: .6; }
/* sin resultados */
.buscador__vacio { text-align: center; padding: 20px 0 12px; }
.buscador__vacio-titulo { margin: 0 0 8px; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.buscador__vacio-texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--amcham-muted); }
.buscador__chips, .sres__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.buscador__chip, .sres__chip { display: inline-flex; align-items: center; column-gap: 6px; padding: 8px 16px; border: 1px solid var(--amcham-color-blue); border-radius: 999px; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--amcham-color-blue); text-decoration: none; }
.buscador__chip:hover, .sres__chip:hover { background: var(--amcham-color-blue); color: #fff; }
/* pie */
.buscador__pie { display: flex; align-items: center; justify-content: space-between; column-gap: 20px; padding: 18px 40px; background: var(--amcham-bg); border-top: 1px solid rgb(0 0 0 / .08); }
.buscador__conteo { font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }

@media (max-width: 1023px) {
  .buscador__fondo { display: none; }
  .buscador__panel { top: 0; left: 0; transform: none; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
  /* Con la barra de administracion de WP el contenido baja 46px (32 desde 783) pero la hoja es
     fixed en top:0: el logo y la X quedaban esos 46px mas arriba que los de la barra. Mismo
     criterio que el panel del menu (v0.82.0): padding, no top, para que el blanco siga cubriendo
     toda la pantalla aunque la pagina estuviera desplazada al abrir. */
  body.admin-bar .buscador__panel { box-sizing: border-box; padding-top: 46px; }
  @media (min-width: 783px) { body.admin-bar .buscador__panel { padding-top: 32px; } }
  /* cabecera de la hoja: logo a color y X donde van el logo y la hamburguesa del header móvil */
  .buscador__cabecera { display: flex; align-items: center; justify-content: space-between; height: var(--amcham-navbar-h, 100px); padding: 9px 24px 0 20px; flex-shrink: 0; }
  .buscador__logo img { display: block; width: 171px; height: auto; }
  .buscador__cerrar-movil { color: var(--amcham-color-navy); }
  .buscador__cerrar-movil svg { width: 21px; height: 21px; }
  .buscador__campo { height: 48px; margin: 0 20px 16px; padding: 0 14px; column-gap: 10px; border: 0; border-radius: 8px; background: #F2F2F2; flex-shrink: 0; }
  .buscador__lupa svg { width: 18px; height: 18px; }
  .buscador__input { font-size: 16px; }
  .buscador__esc, .buscador__cerrar { display: none; }
  .buscador__borrar { width: 20px; height: 20px; }
  .buscador__cuerpo { padding: 8px 0 0; }
  .buscador__inicio { display: block; }
  .buscador__col, .buscador__grupo { padding: 0 20px; }
  .buscador__col + .buscador__col, .buscador__grupo + .buscador__grupo { margin-top: 24px; }
  .buscador__sugerencia { height: 44px; column-gap: 14px; }
  .buscador__acceso { padding: 10px 0; column-gap: 14px; }
  .buscador__grupos { display: block; }
  .buscador__resultado { padding: 12px 0; }
  .buscador__resultado-titulo { line-height: 1.4; }
  .buscador__vacio { padding: 40px 20px 0; }
  .buscador__vacio-titulo { font-size: 18px; }
  .buscador__vacio-texto { font-size: 15px; }
  .buscador__chips { gap: 10px; }
  .buscador__pie { flex-direction: column; align-items: stretch; row-gap: 8px; padding: 12px 20px 20px; background: #fff; box-shadow: 0 -6px 16px rgb(0 0 0 / .08); flex-shrink: 0; }
  .buscador__conteo { font-size: 13px; }
  .buscador__ver { height: 50px; justify-content: center; }
}

/* =========================================================
   15. Página de resultados de búsqueda (elemento amcham-resultados · Figma 1142:997 / 1143:1008)
   ========================================================= */
.sres__inner { width: var(--amcham-container); max-width: 100%; margin-inline: auto; }
.sres__main { flex: 1 1 auto; min-width: 0; }
.sres__aside { flex: 0 0 var(--amcham-col-lateral, 34.35%); width: var(--amcham-col-lateral, 34.35%); display: flex; flex-direction: column; row-gap: 32px; min-width: 0; }   /* = .subnav-col (antes 25.8%; 19 oct) */
@media (max-width: 1279px) { .sres__aside { flex-basis: var(--amcham-col-lateral-md, 360px); width: var(--amcham-col-lateral-md, 360px); } }   /* = .subnav-col bajo 1280 */
.sres__title { margin: 14px 0 24px; font-size: 36px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.sres__form { display: flex; align-items: center; column-gap: 14px; height: 56px; margin: 0; padding: 0 6px 0 20px; background: #fff; border: 1px solid #CFD6E0; border-radius: 4px; }
.sres__form:focus-within { border-color: var(--amcham-color-navy); }
.sres__lupa { display: flex; color: var(--amcham-color-navy); }
.sres__lupa svg { width: 20px; height: 20px; }
.sres__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; padding: 0; font-family: var(--amcham-font-body); font-size: 17px; color: var(--amcham-ink); outline: 0; -webkit-appearance: none; appearance: none; border-radius: 0; }
.sres__input::placeholder { color: var(--amcham-muted); opacity: 1; }
.sres__input::-webkit-search-cancel-button, .sres__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sres__borrar { display: flex; color: var(--amcham-muted); }
.sres__btn { height: 44px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--amcham-color-navy); color: #fff; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s; }
.sres__btn:hover { background: var(--amcham-color-blue); }
.sres__meta { display: flex; align-items: center; justify-content: space-between; column-gap: 20px; margin: 18px 0 0; padding-bottom: 20px; border-bottom: 1px solid #E4E7EC; }
.sres__count { margin: 0; font-size: 15px; line-height: 1.5; color: #6F6F6F; }
.sres__orden { display: flex; align-items: center; column-gap: 10px; margin: 0; font-size: 14px; color: #6F6F6F; }
.sres__select { position: relative; display: inline-flex; align-items: center; }
.sres__select select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0 18px 0 0; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; color: var(--amcham-ink); cursor: pointer; }
.sres__select svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 9px; height: auto; pointer-events: none; }
.sres__tipos { display: none; }
.sres__list { list-style: none; margin: 0; padding: 0; }
.sres-item { display: flex; align-items: flex-start; column-gap: 28px; padding: 28px 0; border-bottom: 1px solid #E4E7EC; }
.sres-item:last-child { border-bottom: 0; }
.sres-item__thumb { display: block; flex: 0 0 200px; width: 200px; height: 130px; border-radius: 6px; overflow: hidden; background: #E6ECF5; }
.sres-item__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sres-item__tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--amcham-color-navy); }
.sres-item__tile svg { width: 30px; height: 30px; }
.sres-item__body { flex: 1 1 auto; min-width: 0; }
.sres-item__pill { display: inline-block; padding: 5px 10px; border-radius: 4px; background: var(--amcham-muted); color: #fff; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; }
.sres-item--eventos .sres-item__pill { background: var(--amcham-color-blue); }
.sres-item--noticias .sres-item__pill { background: var(--amcham-color-navy); }
.sres-item__title { margin: 12px 0 8px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.sres-item__title a { color: var(--amcham-ink); text-decoration: none; }
.sres-item__title a:hover { color: var(--amcham-color-blue); }
.sres-item__excerpt { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: #6F6F6F; }
.sres-item__excerpt mark { background: none; color: inherit; font-weight: inherit; }  /* sin resaltado (19 oct) */
.sres-item__meta { margin: 0; font-size: 13px; line-height: 1.5; color: #6F6F6F; }
.sres__pager { margin-top: 40px; }
.sres__help { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid #E4E7EC; font-size: 15px; line-height: 1.5; color: #6F6F6F; }
.sres__help a { display: inline-flex; align-items: center; column-gap: 10px; margin-left: 6px; font-family: var(--amcham-font-heading); font-weight: 600; color: var(--amcham-color-blue); text-decoration: none; }
.sres__help .btn__arrow { width: 16px; }
.sres__vacio { text-align: center; padding: 48px 0 24px; }
.sres__vacio-titulo { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.sres__vacio-texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--amcham-muted); }
/* lateral */
.sres-card { background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 4px 18px rgb(0 0 0 / .08); padding: 32px; }
.sres-card .subnav__eyebrow { display: block; margin: 0; }
.sres-card__sep { margin-top: 28px !important; }
.sres-filtros, .sres-frecuentes { list-style: none; margin: 12px 0 0; padding: 0; }
.sres-filtros li, .sres-frecuentes li { border-bottom: 1px solid #EEE; }
.sres-filtros li:last-child, .sres-frecuentes li:last-child { border-bottom: 0; }
.sres-filtros a, .sres-frecuentes a { display: flex; align-items: center; justify-content: space-between; column-gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); text-decoration: none; }
.sres-filtros a:hover, .sres-frecuentes a:hover { color: var(--amcham-color-blue); }
.sres-filtros li.is-current a { font-family: var(--amcham-font-heading); font-weight: 600; color: var(--amcham-color-blue); }
.sres-filtros li[aria-disabled="true"] a { opacity: .45; pointer-events: none; }
.sres-filtros__n { font-size: 13px; color: #6F6F6F; }
.sres-frecuentes a { justify-content: flex-start; padding: 11px 0; }
.sres-frecuentes svg { width: 8px; height: 8px; color: var(--amcham-muted); flex-shrink: 0; }
.sres-card--contacto { background: var(--amcham-color-navy); color: #fff; }
.sres-card__eyebrow { display: block; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #99BFF2; }
.sres-card__title { margin: 14px 0 10px; font-size: 22px; font-weight: 600; line-height: 1.25; color: #fff; }
.sres-card__text { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / .8); }
.sres-card__btn { width: 100%; justify-content: center; }
#brx-content > .brxe-amcham-resultados:last-child { padding-bottom: 80px; }

@media (max-width: 1023px) {
  .sres__inner { flex-direction: column; row-gap: 32px; }
  .sres__aside { width: 100%; flex-basis: auto; }
  .sres__aside .sres-filtros, .sres__aside .sres-filtros + .subnav__eyebrow { display: none; }   /* en móvil los tipos van como chips bajo el conteo */
  .sres-card__sep { margin-top: 0 !important; }
  .sres__title { font-size: 26px; margin: 10px 0 18px; }
  .sres__form { height: 50px; padding: 0 6px 0 14px; column-gap: 10px; }
  .sres__lupa svg { width: 18px; height: 18px; }
  .sres__input { font-size: 16px; }
  .sres__btn { height: 40px; padding: 0 16px; font-size: 14px; }
  .sres__meta { flex-direction: column; align-items: flex-start; row-gap: 10px; margin-top: 14px; padding-bottom: 0; border-bottom: 0; }
  .sres__count { font-size: 14px; }
  .sres__tipos { display: flex; column-gap: 8px; margin: 14px -20px 0; padding: 0 20px 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #E4E7EC; }
  .sres__tipos::-webkit-scrollbar { display: none; }
  .sres__tipos .sres__chip { flex-shrink: 0; padding: 7px 14px; border-color: #CFD6E0; color: var(--amcham-ink); font-weight: 400; }
  .sres__tipos .sres__chip b { font-weight: 400; color: #6F6F6F; }
  .sres__tipos .sres__chip.is-current { background: var(--amcham-color-navy); border-color: var(--amcham-color-navy); color: #fff; font-weight: 600; }
  .sres__tipos .sres__chip.is-current b { color: #fff; }
  .sres-item { column-gap: 14px; padding: 22px 0; }
  .sres-item__thumb { flex-basis: 96px; width: 96px; height: 72px; }
  .sres-item__tile svg { width: 22px; height: 22px; }
  .sres-item__pill { padding: 4px 8px; font-size: 10px; letter-spacing: 1.2px; }
  .sres-item__title { margin: 8px 0 8px; font-size: 17px; }
  .sres-item__excerpt { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
  .sres-item__meta { font-size: 12px; }
  .sres__pager { margin-top: 24px; }
  .sres__help { margin-top: 24px; font-size: 14px; }
  .sres-card { padding: 24px; }
  .sres__vacio { padding: 32px 0 8px; }
  #brx-content > .brxe-amcham-resultados:last-child { padding-bottom: 48px; }
}


/* ---------- Evento destacado del sidebar (Figma 1510-1495) ----------
   Misma tarjeta con o sin imagen destacada: la foto solo se suma como cabecera cuando existe. */
.ev-dest-sec { display: flex; flex-direction: column; row-gap: 14px; }   /* el antetítulo va fuera de la tarjeta, que se usa tal cual viene del home */
.ev-dest { display: flex; flex-direction: column; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }
.ev-dest__media { display: block; }
.ev-dest__img { display: block; width: 100%; height: 176px; object-fit: cover; }
.ev-dest__eyebrow { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .6px; text-transform: uppercase; color: var(--amcham-color-navy); }
.ev-dest__body { display: flex; flex-direction: column; row-gap: 12px; padding: 24px 24px 26px; }
.ev-dest__body .event-card__chip { align-self: flex-start; margin-bottom: 0; }
.ev-dest__title { margin: 0; font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.ev-dest__title a { color: inherit; text-decoration: none; }
.ev-dest__title a:hover { color: var(--amcham-color-navy); }
.ev-dest__metas { display: flex; flex-direction: column; row-gap: 2px; }
.ev-dest__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }
.ev-dest__btn { justify-content: center; height: 44px; }


/* =========================================================
   16. Movimiento (portada y banda de las interiores): una curva, recorridos cortos, solo opacity/transform, una sola vez.
   El JS (assets/amcham.js, bloque «Movimiento») pone html.js-motion, .reveal / .reveal-stagger, --i, .is-visible,
   .home-hero.is-loaded, .home-hero__video.is-ready y anima las cifras. Sin JS o con reduced-motion: todo visible, nada se mueve.
   ========================================================= */
:root { --amcham-ease: cubic-bezier(.2, .7, .2, 1); }

/* revelado al hacer scroll */
.js-motion .reveal { opacity: 0; transform: translateY(20px); }
.js-motion .reveal.is-visible { opacity: 1; transform: none; transition: opacity .55s var(--amcham-ease), transform .55s var(--amcham-ease); }
.js-motion .reveal-stagger > * { opacity: 0; transform: translateY(16px); }
.js-motion .reveal-stagger.is-visible > * { opacity: 1; transform: none; transition: opacity .5s var(--amcham-ease), transform .5s var(--amcham-ease); transition-delay: calc(var(--i, 0) * 70ms); }
/* Las transiciones van SOLO en el estado visible: así ocultar es instantáneo. Si el estado oculto también transicionara,
   al cargar (contenido pintado → js-motion lo oculta con retardo) la entrada se cancelaría contra ese fundido pendiente. */
.js-motion .reveal-stagger.is-visible > *:hover { transition-delay: 0s; }   /* que el hover no herede el retardo */

/* la línea rojo→azul del título crece después del texto */
.js-motion body.home .section-title__line, .js-motion body.home-copia .section-title__line { transform: scaleX(0); transform-origin: left center; }
.js-motion body.home .section-title--center .section-title__line, .js-motion body.home-copia .section-title--center .section-title__line { transform-origin: center; }
.js-motion body.home .section-title.is-visible .section-title__line, .js-motion body.home-copia .section-title.is-visible .section-title__line { transform: scaleX(1); transition: transform .6s var(--amcham-ease) .2s; }

/* hero: titular, párrafo y botón entran juntos y despacio (Johann, 13 sep); la tarjeta de cifras sube después */
.js-motion .home-hero__content > * { opacity: 0; transform: translateY(28px); }
.js-motion .home-hero.is-loaded .home-hero__content > * { opacity: 1; transform: none; transition: opacity .9s var(--amcham-ease) .25s, transform .9s var(--amcham-ease) .25s; }   /* primero se asienta la página (nav, video), luego entra el mensaje */
.js-motion .home-hero + .home-stats { opacity: 0; }
.js-motion .home-hero.is-loaded + .home-stats { opacity: 1; transition: opacity .5s var(--amcham-ease) .5s; }
/* cada cifra entra con fade up, escalonadas (Johann, 13 sep) */
.js-motion .home-hero + .home-stats .home-stats__item { opacity: 0; transform: translateY(22px); }
.js-motion .home-hero.is-loaded + .home-stats .home-stats__item { opacity: 1; transform: none; transition: opacity .8s var(--amcham-ease), transform .8s var(--amcham-ease); }
.js-motion .home-hero.is-loaded + .home-stats .home-stats__item:nth-of-type(1) { transition-delay: .6s; }
.js-motion .home-hero.is-loaded + .home-stats .home-stats__item:nth-of-type(2) { transition-delay: .7s; }
.js-motion .home-hero.is-loaded + .home-stats .home-stats__item:nth-of-type(3) { transition-delay: .8s; }
.js-motion .home-hero.is-loaded + .home-stats .home-stats__item:nth-of-type(4) { transition-delay: .9s; }
.js-motion .home-hero__video { opacity: 0; }
.js-motion .home-hero__video.is-ready { opacity: 1; transition: opacity .8s var(--amcham-ease); }

/* ---------------------------------------------------------
   16b. Banda de las páginas interiores (Johann, 19 sep 2026): al abrir la página entran en secuencia
   migas → título → isotipo. El JS (assets/amcham.js) pone .is-loaded en .site-header con el mismo
   arranque que el hero de la portada (primer pintado con contenido). La portada lleva header claro
   y sin banda, por eso `body:not(.header-claro)`.
   Recorrido corto y ~1,02 s de punta a punta a propósito (migas .05→.55 · título .16→.76 · isotipo .22→1,02; [stated] Johann: «que la animación donde entra el isotipo comience un poco antes»):
   esta banda se repite en TODAS las interiores, así que nada puede durar lo que dura el hero de la portada.
   --------------------------------------------------------- */
.js-motion body:not(.header-claro) .site-header .crumbs--banda,
.js-motion body:not(.header-claro) .site-header .page-title { opacity: 0; transform: translateY(14px); }
.js-motion body:not(.header-claro) .site-header.is-loaded .crumbs--banda { opacity: 1; transform: none; transition: opacity .5s var(--amcham-ease) .05s, transform .5s var(--amcham-ease) .05s; }
.js-motion body:not(.header-claro) .site-header.is-loaded .page-title { opacity: 1; transform: none; transition: opacity .6s var(--amcham-ease) .16s, transform .6s var(--amcham-ease) .16s; }
/* el isotipo entra desde la derecha con un roce de escala, después del texto */
.js-motion body:not(.header-claro) .site-header__bg::after { opacity: 0; transform: translate(40px, -10px) scale(1.04); }
.js-motion body:not(.header-claro) .site-header.is-loaded .site-header__bg::after { opacity: 1; transform: none; transition: opacity .72s var(--amcham-ease) .22s, transform .8s var(--amcham-ease) .22s; }

/* hover: tarjetas que suben un poco */
.event-card, .news-card { transition: transform .25s var(--amcham-ease), box-shadow .25s var(--amcham-ease); }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgb(0 0 0 / .1); }
.news-card:hover { transform: translateY(-4px); }   /* ⚠ en el home no actúa: .reveal-stagger.is-visible > * pone transform:none con más especificidad; por eso en /noticias/ se anula abajo */
.narch .news-card:hover { transform: none; }   /* = lo que se ve en el home: solo el título a blue (19 oct) */
.news-card__title { transition: color .15s var(--amcham-ease); }
.news-card:hover .news-card__title { color: var(--amcham-color-blue); }
.nlist__hero-title, .nlist__mini-title { transition: color .15s var(--amcham-ease); }
.mega__item-title, .buscador__sugerencia, .buscador__resultado-titulo, .sres-item__title a, .subnav__item a { transition: color .15s var(--amcham-ease); }

/* overlays del header: megamenú y buscador entran con fade + 6 px */
@keyframes amcham-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes amcham-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 1024px) {
  .js-motion .nav-main .brxe-dropdown.open > .mega { animation: amcham-drop .18s var(--amcham-ease) both; }
  .js-motion .nav-main .brxe-dropdown.open > .brx-submenu-toggle::after { transform-origin: center; animation: amcham-grow .25s var(--amcham-ease) both; }
  .js-motion .buscador__panel { transform: translate(-50%, -6px); transition: transform .2s var(--amcham-ease); }
  .js-motion .buscador.is-abierto .buscador__panel { transform: translate(-50%, 0); }
}
@media (max-width: 1023px) {
  .js-motion .buscador__panel { transform: translateY(8px); transition: transform .22s var(--amcham-ease); }
  .js-motion .buscador.is-abierto .buscador__panel { transform: none; }
}

/* 16c. Diagrama de anillos (Johann, 20 sep 2026): el gráfico se arma de adentro hacia afuera al entrar en pantalla
   —núcleo AmCham → isotipo → AACCLA → U.S. Chamber— y cada ítem de la leyenda entra con su anillo. Excepción
   deliberada al «sin revelado en las interiores»: es un gráfico que se explica al construirse. JS: bloque «Movimiento». */
@keyframes amcham-anillo-in { from { opacity: 0; transform: scale(.55); } }
@keyframes amcham-iso-in    { from { opacity: 0; transform: scale(.72); } }
@keyframes amcham-nivel-in  { from { opacity: 0; transform: translateY(12px); } }
.js-motion .anillos__card .anillo { transform-box: view-box; transform-origin: 150px 150px; }
.js-motion .anillos__card .anillo-iso { transform-box: fill-box; transform-origin: center; }
.js-motion .anillos__card:not(.is-visible) :is(.anillo, .anillo-iso, .anillos__item, .anillos__chip) { opacity: 0; }
/* «backwards» y no «both»: al terminar, la regla deja de pesar y el resalte por hover vuelve a mandar sobre la opacidad. */
.js-motion .anillos__card.is-visible .anillo { animation: amcham-anillo-in .6s var(--amcham-ease) backwards; }
.js-motion .anillos__card.is-visible .anillo--local    { animation-delay: 0s; }
.js-motion .anillos__card.is-visible .anillo-iso       { animation: amcham-iso-in .5s var(--amcham-ease) .22s backwards; }
.js-motion .anillos__card.is-visible .anillo--regional { animation-delay: .36s; }
.js-motion .anillos__card.is-visible .anillo--global   { animation-delay: .58s; }
.js-motion .anillos__card.is-visible .anillos__item { animation: amcham-nivel-in .5s var(--amcham-ease) backwards; }
.js-motion .anillos__card.is-visible .anillos__item--1 { animation-delay: .30s; }
.js-motion .anillos__card.is-visible .anillos__item--2 { animation-delay: .55s; }
.js-motion .anillos__card.is-visible .anillos__item--3 { animation-delay: .80s; }
@keyframes amcham-chip-in { from { opacity: 0; } to { opacity: 1; } }
.js-motion .anillos__card.is-visible .anillos__chip { animation: amcham-chip-in .5s var(--amcham-ease) backwards; }
.js-motion .anillos__card.is-visible .anillos__chip--regional { animation-delay: .46s; }
.js-motion .anillos__card.is-visible .anillos__chip--global { animation-delay: .68s; }
.js-motion .anillos__card:not(.is-visible) .anillos__pila > * { opacity: 0; }
.js-motion .anillos__card.is-visible .anillos__pila > * { animation: amcham-chip-in .5s var(--amcham-ease) backwards; }
.js-motion .anillos__card.is-visible .anillos__pila > *:nth-child(2) { animation-delay: .10s; }
.js-motion .anillos__card.is-visible .anillos__pila > *:nth-child(3) { animation-delay: .20s; }
.js-motion .anillos__card.is-visible .anillos__pila > *:nth-child(4) { animation-delay: .30s; }
.js-motion .anillos__card.is-visible .anillos__pila > *:nth-child(5) { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal, .js-motion .reveal-stagger > *, .js-motion body.home .section-title__line, .js-motion .home-hero__content > *, .js-motion .home-hero + .home-stats, .js-motion .home-hero + .home-stats .home-stats__item, .js-motion .home-hero__video { opacity: 1; transform: none; transition: none; }
  .js-motion body:not(.header-claro) .site-header .crumbs--banda, .js-motion body:not(.header-claro) .site-header .page-title, .js-motion body:not(.header-claro) .site-header__bg::after { opacity: 1; transform: none; transition: none; }
  .js-motion .nav-main .brxe-dropdown.open > .mega, .js-motion .nav-main .brxe-dropdown.open > .brx-submenu-toggle::after { animation: none; }
  .js-motion .anillos__card :is(.anillo, .anillo-iso, .anillos__item, .anillos__chip), .js-motion .anillos__card .anillos__pila > * { opacity: 1; animation: none; transition: none; }
  .event-card, .news-card, .buscador__panel { transition: none; }
  .event-card:hover, .news-card:hover { transform: none; }
}

/* =========================================================
   20. Scroll suave (Lenis) — todo el sitio, salvo el builder. JS: assets/amcham-scroll.js + assets/lenis.min.js (1.3.26, MIT).
   Son las reglas que pide la librería. html.lenis solo existe mientras Lenis está activo (functions.php, filtro amcham/scroll_suave).
   ========================================================= */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }                /* Lenis ya anima; un scroll-behavior: smooth lo duplicaría */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } /* lenis.stop() mientras el menú móvil, un popup o el buscador bloquean el scroll */
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }   /* paneles con scroll propio: al llegar al borde no arrastran la página */
.lenis.lenis-smooth iframe { pointer-events: none; }            /* mientras se desplaza, los iframes no capturan la rueda */

/* =========================================================
   10j. Línea de tiempo · Preguntas frecuentes · Enlaces
   (amcham-hitos, amcham-preguntas, amcham-enlaces — Figma WIP «Comercio Panamá-EE. UU.» 2493:10909, 7 oct 2026)
   ========================================================= */
.hitos, .faq, .enlaces { display: flex; flex-direction: column; width: 100%; min-width: 0; }

/* Línea de tiempo: hitos en fila separados por una línea vertical (2503:187) */
.hitos { row-gap: 20px; }
.hitos__lista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 68px; margin: 0; padding: 36px 40px; list-style: none; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.hitos__item { position: relative; display: flex; flex-direction: column; row-gap: 10px; min-width: 0; margin: 0; }
.hitos__item + .hitos__item::before { content: ""; position: absolute; top: 0; bottom: 0; left: -34px; width: 1px; background: #E4E7EC; }
.hitos__fecha { font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--amcham-color-navy); }
.hitos__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 24px; font-weight: 600; line-height: 1.4; color: var(--amcham-ink); }
.hitos__texto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--amcham-muted); }

/* Preguntas frecuentes: acordeón con <details> (2504:557) */
.faq { row-gap: 28px; interpolate-size: allow-keywords; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 40 */
.faq__lista { margin: 0; padding: 12px 48px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.faq__item { margin: 0; }
.faq__item + .faq__item { border-top: 1px solid rgb(0 0 0 / .09); }
.faq__pregunta { display: flex; align-items: flex-start; justify-content: space-between; column-gap: 28px; padding: 26px 0; list-style: none; cursor: pointer; font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.22; color: var(--amcham-ink); transition: color .15s ease, padding-bottom .34s cubic-bezier(.22,.61,.36,1); }
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::marker { content: ""; }
.faq__pregunta:hover, .faq__pregunta:focus-visible { color: var(--amcham-color-navy); }
.faq__pregunta:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 4px; border-radius: 2px; }
.faq__icono { position: relative; flex: 0 0 14px; width: 14px; height: 14px; margin-top: 4px; color: var(--amcham-ink); }
.faq__icono::before, .faq__icono::after { content: ""; position: absolute; top: 6px; left: 0; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.faq__icono::after { transform: rotate(90deg); }
.faq__item[open] > .faq__pregunta { padding-bottom: 12px; }
.faq__item[open] .faq__icono::after { transform: rotate(0deg); }
/* Apertura animada sin JS (21 oct 2026): ::details-content es la caja que <details> crea alrededor de la
   respuesta; se anima de 0 a auto gracias al interpolate-size de .faq. content-visibility entra en la
   transicion con allow-discrete para que el contenido siga visible mientras se cierra. Navegador sin
   soporte = abre de golpe, como antes. */
.faq__item::details-content { block-size: 0; overflow: hidden; opacity: 0;
	transition: block-size .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease, content-visibility .34s;
	transition-behavior: allow-discrete; }
.faq__item[open]::details-content { block-size: auto; opacity: 1; }
.faq__respuesta { padding: 0 42px 26px 0; font-size: 17px; line-height: 1.6; color: var(--amcham-muted); }
.faq__respuesta p, .faq__respuesta ul, .faq__respuesta ol { margin: 0 0 12px; }
.faq__respuesta > :last-child { margin-bottom: 0; }
.faq__respuesta a { color: var(--amcham-color-blue); text-decoration: underline; }

/* Enlaces: tarjetas con borde y flecha azul (2506:146) */
.enlaces { row-gap: 28px; }
.enlaces__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.enlaces__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.enlaces__lista > li { display: flex; min-width: 0; margin: 0; }
.enlaces__item { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; width: 100%; padding: 18px 20px; background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.enlaces__flecha { flex: 0 0 auto; display: inline-flex; width: 12px; color: var(--amcham-color-blue); transition: transform .15s ease; }
.enlaces__flecha svg { width: 12px; height: auto; }
a.enlaces__item:hover, a.enlaces__item:focus-visible { border-color: var(--amcham-color-navy); color: var(--amcham-color-navy); }
a.enlaces__item:hover .enlaces__flecha, a.enlaces__item:focus-visible .enlaces__flecha { transform: translateX(3px); }
.enlaces__flecha--externa { width: auto; }
.enlaces__flecha--externa svg { width: 1em; height: 1em; }
a.enlaces__item:hover .enlaces__flecha--externa, a.enlaces__item:focus-visible .enlaces__flecha--externa { transform: translate(3px, -3px); }

@media (max-width: 767px) {
	.hitos__lista { grid-auto-flow: row; row-gap: 40px; padding: 28px 24px; }
	.hitos__item + .hitos__item::before { top: -20px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
	.hitos__titulo { font-size: 21px; }
	.faq { row-gap: 28px; }
	.faq__lista { padding: 4px 22px; }
	.faq__pregunta { column-gap: 16px; padding: 20px 0; font-size: 17px; }
	.faq__respuesta { padding-right: 0; font-size: 16px; }
	.enlaces { row-gap: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* en movil tambien 28; era 22 */
	.enlaces__lista, .enlaces__lista--3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.faq__icono::before, .faq__icono::after, .faq__pregunta, .enlaces__flecha, .enlaces__item { transition: none; }
	.faq__item::details-content, .faq__item[open]::details-content { transition: none; }
}
/* ===== fin 10j ===== */

/* =========================================================
   10l. Programas RLS — postulados, reconocidas y menciones por categoría
   (elemento amcham-rls-programas, Figma WIP 2624:176 «opción D», 7 oct 2026). Colores por categoría en --rls-fondo /
   --rls-texto / --rls-icono (campos del término; por defecto los de postulacion.panamcham.com). Video: .rls-modal.
   ========================================================= */
.rls { display: flex; flex-direction: column; row-gap: 56px; width: 100%; min-width: 0; container: rls / inline-size; }
.rls__aviso { margin: 0; padding: 14px 18px; border-radius: 10px; background: #FFF7E6; color: #7A4B00; font: 14px/1.5 var(--amcham-font-body); }
.rls__vacio { margin: 0; color: var(--amcham-muted); }

/* Filtros: pestañas de edición como control segmentado grande (mismo lenguaje que .events__tabs del calendario):
   riel gris claro, pestaña activa rellena de navy. Sin píldoras de categoría ni resumen (18 oct 2026). */
.rls__filtros { display: flex; flex-direction: column; }
.rls__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; row-gap: 12px; }
.rls__tabs { display: inline-flex; align-items: stretch; column-gap: 4px; min-width: 0; padding: 4px; border-radius: 9px; background: #EEF2F7; }
.rls__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; column-gap: 8px; min-height: 44px; padding: 0 26px; border-radius: 6px;
  font: 600 17px/1 var(--amcham-font-heading); color: #44546A; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.rls__tab:hover { background: rgb(255 255 255 / .75); color: var(--amcham-color-navy); }
.rls__tab.is-activa { background: var(--amcham-color-navy); color: #fff; box-shadow: 0 2px 8px rgb(11 27 51 / .18); }
.rls__tab:focus-visible { outline: 2px solid var(--amcham-color-navy); outline-offset: 2px; }
.rls__tab-borrador { padding: 2px 7px; border-radius: 999px; background: #FFF1D6; color: #8A5300; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; }
.rls__mas { position: relative; display: flex; }
.rls__mas > summary { list-style: none; }
.rls__mas > summary::-webkit-details-marker { display: none; }
.rls__mas > summary svg { width: 12px; height: 12px; transition: transform .2s; }
.rls__mas[open] > summary svg { transform: rotate(180deg); }
.rls__mas-lista { position: absolute; z-index: 5; top: calc(100% + 10px); left: 0; display: flex; flex-direction: column; row-gap: 2px; min-width: 140px; padding: 8px;
  background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); }
.rls__mas-lista .rls__tab { justify-content: flex-start; min-height: 0; padding: 10px 14px; font-size: 16px; box-shadow: none; }
.rls__mas-lista .rls__tab:hover, .rls__mas-lista .rls__tab.is-activa { background: #F1F4F8; color: var(--amcham-color-navy); }

/* Categoría: ícono en caja del color + título + conteo en píldora */
.rls__cat { display: flex; flex-direction: column; row-gap: 22px; scroll-margin-top: 120px; }
.rls__cat-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; }
.rls__cat-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--rls-fondo); color: var(--rls-icono); }
.rls__cat-ic svg { width: 22px; height: 22px; }
.rls__cat-titulo { margin: 0; font: 600 26px/1.2 var(--amcham-font-heading); color: #1D1D1F; }

/* Retícula de la lista por categoría: 3 por fila. Opción E (Figma WIP 2968:220, 18 oct 2026): el logo va arriba, grande y sin recuadro */
.rls__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rls-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border-radius: 12px; }
.rls-card__logo { display: flex; flex: none; align-items: center; justify-content: center; height: 124px; padding: 0 24px; background: #fff; border-bottom: 1px solid #ECEFF3; }
.rls-card__logo-img { display: block; width: auto; height: auto; max-width: min(152px, 100%); max-height: 64px; object-fit: contain; }
.rls-card__ini { font: 600 30px/1 var(--amcham-font-heading); color: #9AA3AD; letter-spacing: .02em; }
.rls-card__cuerpo { display: flex; flex: 1 1 auto; flex-direction: column; row-gap: 18px; min-width: 0; padding: 18px 24px 24px; }
.rls-card__texto { display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px; }
/* Sello «Reconocida AAAA» en píldora del color de la categoría, debajo del nombre del programa (pedido de Johann, 18 oct 2026) */
.rls-card__sello { display: inline-flex; align-items: center; column-gap: 6px; margin-top: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--rls-fondo); font: 600 13px/1.3 var(--amcham-font-heading); color: var(--rls-texto); }
.rls-card__sello svg { flex: none; width: 15px; height: 15px; color: var(--rls-icono); }
.rls-card__empresa { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 17px/1.25 var(--amcham-font-heading); color: #1D1D1F; }
.rls-card__programa { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font: 14.5px/1.5 var(--amcham-font-body); color: #5B6470; }
.rls-card__pie { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid #ECEFF3; }
.rls__cat-vacia { margin: 0; font: 14.5px/1.5 var(--amcham-font-body); color: var(--amcham-muted); }

/* Premiadas: una columna por categoría (--rls-cols); cada tarjeta va a la de su categoría (--rls-col) */
.rls__premiadas { display: flex; flex-direction: column; row-gap: 24px; }
.rls__prem-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; }
.rls__prem-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #E8EEF7; color: var(--amcham-color-navy); }
.rls__prem-ic svg { width: 22px; height: 22px; }
.rls__prem-titulo { margin: 0; font: 600 28px/1.2 var(--amcham-font-heading); color: #1D1D1F; }
.rls__prem-sub { margin: 16px 0 -6px; font: 600 24px/1.2 var(--amcham-font-heading); color: #1D1D1F; }
.rls__podio { display: grid; grid-template-columns: repeat(var(--rls-cols, 3), minmax(0, 1fr)); gap: 24px; }
.rls__podio > .rls-card { grid-column: var(--rls-col, auto); }
.rls-card__franja { display: flex; align-items: center; column-gap: 8px; padding: 10px 20px; background: var(--rls-fondo); color: var(--rls-texto); font: 600 13px/1.3 var(--amcham-font-heading); }
.rls-card__franja svg { flex: none; width: 15px; height: 15px; color: var(--rls-icono); }
.rls-card--reconocida .rls-card__logo { height: 164px; }
.rls-card--reconocida .rls-card__logo-img { max-width: min(196px, 100%); max-height: 112px; }
.rls-card--reconocida .rls-card__ini { font-size: 36px; }
.rls-card--reconocida .rls-card__cuerpo { padding: 20px 22px 22px; }
.rls-card--reconocida .rls-card__empresa { display: block; font-size: 20px; }
.rls-card--reconocida .rls-card__programa, .rls-card--mencion .rls-card__programa { display: block; }
.rls-card--mencion { border-top: 4px solid var(--rls-icono); }
.rls-card--mencion .rls-card__logo { height: 124px; }
.rls-card--mencion .rls-card__logo-img { max-width: min(176px, 100%); max-height: 88px; }
.rls-card--mencion .rls-card__cuerpo { padding: 18px 22px 22px; }
.rls-card--mencion .rls-card__empresa { display: block; font-size: 18px; }

/* «Los demás programas postulados»: separa el bloque de premiadas de la lista */
.rls__demas { display: flex; flex-direction: column; row-gap: 8px; margin-bottom: -24px; padding-top: 24px; border-top: 1px solid #DDE2E9; }
.rls__demas-titulo { margin: 0; font: 600 22px/1.25 var(--amcham-font-heading); color: #1D1D1F; }
.rls__demas-nota { margin: 0; font: 15.5px/1.55 var(--amcham-font-body); color: var(--amcham-muted); }

/* Columnas según el ancho real de la sección (container query), no de la pantalla: con submenú lateral la columna mide 810 a 1440
   pero ~600 a 1024. 3 por fila hasta 760, 2 hasta 540, 1 debajo; las premiadas se apilan debajo de 540. */
@container rls (max-width: 760px) {
  .rls__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rls__podio { grid-template-columns: minmax(0, 1fr); gap: 16px; }   /* 3 columnas de ~185 px no alcanzan: se apilan */
  .rls__podio > .rls-card { grid-column: auto; }
}
@container rls (max-width: 540px) {
  .rls__grid, .rls__podio { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rls__podio > .rls-card { grid-column: auto; }
  .rls-card--reconocida .rls-card__logo { height: 136px; }
  .rls-card--reconocida .rls-card__logo-img { max-width: min(180px, 100%); max-height: 96px; }
  .rls-card--mencion .rls-card__logo { height: 112px; }
  .rls__cat-titulo { font-size: 22px; }
  .rls__prem-titulo { font-size: 24px; }
  .rls__prem-sub { margin-top: 10px; font-size: 20px; }
}
@media (max-width: 767px) {
  .rls { row-gap: 44px; }
  .rls__tabs { display: flex; width: 100%; }
  .rls__tab, .rls__mas { flex: 1 1 0; min-width: 0; }
  .rls__tab { min-height: 42px; padding: 0 12px; font-size: 16px; }
  .rls__mas > summary { width: 100%; }
}

/* Conmutador Cuadrícula / Lista (18 oct 2026): control secundario, la opción activa en blanco (las pestañas de año van en navy) */
.rls__vista { display: inline-flex; flex: none; column-gap: 2px; padding: 4px; border-radius: 9px; background: #EEF2F7; }
.rls__vista-btn { display: inline-flex; align-items: center; column-gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 6px;
  font: 600 14px/1 var(--amcham-font-heading); color: #44546A; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.rls__vista-btn svg { flex: none; width: 15px; height: 15px; }
.rls__vista-btn:hover { color: var(--amcham-color-navy); }
.rls__vista-btn.is-activa { background: #fff; color: var(--amcham-color-navy); box-shadow: 0 1px 4px rgb(11 27 51 / .12); }
.rls__vista-btn:focus-visible { outline: 2px solid var(--amcham-color-navy); outline-offset: 2px; }

/* Vista lista (21 oct 2026, pedido de Johann): misma distribución que la ficha de empresa del directorio de miembros
   (.dir-card) — cada programa es su propia tarjeta separada, con tres columnas: logo centrado | empresa y programa |
   enlaces en columna. El .rls-card__cuerpo se vuelve `display: contents` para que texto y pie sean columnas de la tarjeta. */
.rls--lista .rls__grid { display: flex; flex-direction: column; gap: 20px; overflow: visible; background: transparent; border-radius: 0; }
.rls--lista .rls__grid > .rls-card { display: grid; grid-template-columns: 150px minmax(0, 1fr) 152px; align-items: center;
  column-gap: 32px; padding: 26px 32px; border-radius: 12px; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.rls--lista .rls__grid > .rls-card + .rls-card { border-top: 0; }
.rls--lista .rls__grid .rls-card__logo { width: 150px; height: 88px; padding: 0; border: 0; }
.rls--lista .rls__grid .rls-card__logo-img { max-width: 100%; max-height: 88px; }
.rls--lista .rls__grid .rls-card__ini { font-size: 30px; }
.rls--lista .rls__grid .rls-card__cuerpo { display: contents; }
.rls--lista .rls__grid .rls-card__texto { min-width: 0; row-gap: 8px; }
.rls--lista .rls__grid .rls-card__empresa { display: block; font-size: 19px; }
.rls--lista .rls__grid .rls-card__programa { display: -webkit-box; -webkit-line-clamp: 3; }
.rls--lista .rls__grid .rls-card__pie { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: 14px;
  margin-top: 0; padding-top: 0; border-top: 0; }
/* Lista con todas las empresas: se esconden las premiadas de arriba y la cabecera «Otros programas postulados»;
   cada categoría trae su reconocida y sus menciones (con píldora) antes que los demás postulados. */
.rls:not(.rls--lista) .rls-card--solo-lista, .rls:not(.rls--lista) .rls__solo-lista { display: none; }
.rls--lista .rls__solo-cuadricula, .rls--lista .rls__premiadas, .rls--lista .rls__demas { display: none; }
.rls-card__sello--mencion { background: #fff; box-shadow: inset 0 0 0 1px var(--rls-icono); }
@container rls (max-width: 760px) {
  .rls--lista .rls__grid > .rls-card { grid-template-columns: 120px minmax(0, 1fr) 146px; column-gap: 22px; padding: 22px 24px; }
  .rls--lista .rls__grid .rls-card__logo { width: 120px; height: 72px; }
  .rls--lista .rls__grid .rls-card__logo-img { max-height: 72px; }
  .rls--lista .rls__grid .rls-card__empresa { font-size: 18px; }
}
/* Apilado, como la .dir-card en móvil: logo arriba a la izquierda, luego el texto y los enlaces (estos vuelven a una fila) */
@container rls (max-width: 540px) {
  .rls--lista .rls__grid { gap: 16px; }
  .rls--lista .rls__grid > .rls-card { grid-template-columns: minmax(0, 1fr); row-gap: 14px; column-gap: 0; padding: 20px 18px; }
  .rls--lista .rls__grid .rls-card__logo { justify-content: flex-start; width: 100%; height: 56px; }
  .rls--lista .rls__grid .rls-card__logo-img { max-width: 140px; max-height: 56px; }
  .rls--lista .rls__grid .rls-card__ini { font-size: 24px; }
  .rls--lista .rls__grid .rls-card__empresa { font-size: 17px; }
  .rls--lista .rls__grid .rls-card__programa { font-size: 14px; }
  .rls--lista .rls__grid .rls-card__pie { flex-direction: row; flex-wrap: wrap; column-gap: 18px; row-gap: 8px; }
}

/* Video en ventana (<dialog> creado por assets/amcham.js) */
.rls-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; }
.rls-modal:not([open]) { display: none; }
.rls-modal[open] { display: grid; place-items: center; }
.rls-modal::backdrop { background: rgb(11 27 51 / .72); }
.rls-modal__caja { display: flex; flex-direction: column; width: min(960px, 100%); overflow: hidden; background: #0B1220; border-radius: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
.rls-modal__cabeza { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; padding: 12px 14px 12px 20px; color: #fff; }
.rls-modal__titulo { margin: 0; font: 600 15px/1.35 var(--amcham-font-heading); }
.rls-modal__cerrar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; }
.rls-modal__cerrar:hover { background: rgb(255 255 255 / .22); }
.rls-modal__cerrar svg { width: 16px; height: 16px; }
.rls-modal__media { aspect-ratio: 16 / 9; background: #000; }
.rls-modal__media iframe, .rls-modal__media video { display: block; width: 100%; height: 100%; border: 0; }
.rls-modal__error { display: grid; place-items: center; height: 100%; margin: 0; padding: 24px; color: rgb(255 255 255 / .8); font: 15px/1.5 var(--amcham-font-body); text-align: center; }
.rls-modal__otra { padding: 10px 20px 14px; font: 500 13px/1.3 var(--amcham-font-heading); color: rgb(255 255 255 / .72); }
.rls-modal__otra:hover { color: #fff; }
/* ===== fin 10l ===== */

/* =========================================================
   10m. Misiones comerciales — CPT `mision` (inc/misiones.php, 8 oct 2026)
   Listado: elemento amcham-misiones en /negocios/misiones-y-ferias-comerciales/ (Figma WIP 2648:172).
   Ficha: template Bricks «Misión comercial (detalle)» con los elementos amcham-mision-* (Figma WIP 2638:183 · módulos 2639:191 · 2643:199).
   Los módulos vacíos no se imprimen; los contenedores usan container queries (mision / misiones) para no depender del lateral.
   ========================================================= */
.page-main--misiones, .page-main--mision { row-gap: 64px; }

/* --- piezas comunes --- */
.mision-sec, .mision-cab { container: mision / inline-size; min-width: 0; }
.mision-sec { display: flex; flex-direction: column; row-gap: 24px; }
.mision-sec > * { margin: 0; }
.mision-sec__cab { scroll-margin-top: 140px; }
.mision-eyebrow { display: block; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--amcham-color-navy); }
.mision-caja { background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.mision-estado { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #E3EBF5; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.2; text-transform: uppercase; white-space: nowrap; color: var(--amcham-color-navy); }
.mision-estado--abierta { background: rgb(0 115 192 / .12); color: var(--amcham-color-blue); }
.mision-estado--pronto { background: rgb(0 115 192 / .08); color: var(--amcham-color-blue); }
.mision-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 10px; margin: 0; padding: 0; list-style: none; font: 16px/1.5 var(--amcham-font-body); color: #444; }
.mision-meta li { display: inline-flex; align-items: center; column-gap: 8px; margin: 0; }
.mision-meta svg { flex: none; width: 16px; height: 18px; color: var(--amcham-color-navy); }
.mision-meta--chica { flex-direction: column; align-items: flex-start; row-gap: 14px; font-size: 15px; }
.mision-meta--chica svg { width: 14px; height: 16px; }
.mision-marca { display: block; width: 100%; height: 100%; background: var(--amcham-color-navy) url(assets/amcham-banda.jpg) center / cover no-repeat; }
.mis-card:hover .mis-card__mas, .mis-album:hover .mis-album__ver { color: var(--amcham-color-blue); }
.mis-nota:hover .mis-nota__mas { color: var(--amcham-color-blue-hover); }
.mis-card:hover .mis-card__mas > svg, .mis-album:hover .mis-album__ver > svg, .mis-nota:hover .mis-nota__mas > svg { transform: translateX(3px); }

/* --- listado (Figma 2648:172) --- */
.misiones { display: flex; flex-direction: column; row-gap: 64px; min-width: 0; container: misiones / inline-size; }
.misiones__bloque { display: flex; flex-direction: column; row-gap: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 22 */
.misiones__bloque .sec-head { row-gap: 14px; }   /* 29 oct 2026 (Johann): antetitulo->titulo 14; era 6 */
.mis-dest { display: grid; grid-template-columns: minmax(0, 44.5%) minmax(0, 1fr); overflow: hidden; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .06); }
.mis-dest__media { position: relative; display: block; min-height: 300px; overflow: hidden; background: var(--amcham-color-navy); }
.mis-dest__media > :is(img, .mision-marca) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--amcham-ease, ease); }
.mis-dest:hover .mis-dest__media > img { transform: scale(1.03); }
.mis-dest__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: 14px; min-width: 0; padding: 32px 36px; }
.mis-dest__title { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.mis-dest__title a { color: inherit; text-decoration: none; }
.mis-dest__title a:hover { color: var(--amcham-color-blue); }
.mis-dest__resumen { margin: 0; font: 15px/1.55 var(--amcham-font-body); color: #444; }
.mis-dest__btns { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }

/* tarjetas (listado y «Otras misiones») */
.mis-grid { display: grid; gap: 28px 25px; }
.mis-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mis-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mis-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .05); transition: box-shadow .2s; }
.mis-card:hover { box-shadow: 0 10px 22px rgb(0 0 0 / .1); }
.mis-card:has(.mis-card__link:focus-visible) { outline: 2px solid var(--amcham-color-blue); outline-offset: 3px; }
.mis-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--amcham-color-navy); }
.mis-card__media > :is(img, .mision-marca) { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--amcham-ease, ease); }
.mis-card:hover .mis-card__media > img { transform: scale(1.03); }
.mis-card__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; padding: 22px 24px 24px; }
.mis-card__title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.22; color: var(--amcham-ink); transition: color .2s; }
.mis-card:hover .mis-card__title { color: var(--amcham-color-blue); }
.mis-card__link { color: inherit; text-decoration: none; }
.mis-card__link:focus-visible { outline: none; }
.mis-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.mis-card__fecha { display: flex; align-items: center; column-gap: 8px; margin: 0; font: 15px/1.4 var(--amcham-font-body); color: #555; }
.mis-card__fecha svg { flex: none; width: 14px; height: 16px; color: var(--amcham-color-navy); }
.mis-card__mas { padding-top: 6px; }
.mis-card--otra .mis-card__body { row-gap: 6px; padding: 20px 20px 22px; }
.mis-card--otra .mis-card__title { font-size: 18px; }
.mis-card--otra .mis-card__fecha { font-size: 14px; color: #707070; }
.mis-card--otra .mis-card__mas { padding-top: 8px; }
.mis-card--proxima .mision-estado { margin-bottom: 2px; }   /* próximas en el listado (19 oct 2026) */
/* carrusel de próximas (19 oct 2026): flechas a la derecha del título, sin puntos, una tarjeta grande por slide */
.misiones__head { display: flex; align-items: flex-end; justify-content: space-between; column-gap: 16px; }
.misiones__head .splide__arrows.custom { position: static; flex-shrink: 0; margin-bottom: 6px; }
.misiones__head .splide__arrows.custom .splide__arrow { position: static; transform: none; }
.misiones__slider { display: flex; flex-direction: column; row-gap: 28px; }   /* 29 oct 2026 (Johann): la cabecera de «Proximas misiones» vive DENTRO del slider, asi que este row-gap es el titulo->contenido; era 22 */
.misiones__slider .splide__track { width: 100%; margin: 0 0 -16px; padding: 0 0 16px !important; }   /* mismo ancho que el contenido; aire abajo para la sombra (Bricks pisa el padding sin !important) */
.misiones__slider .splide__list { align-items: flex-start; }
.misiones__slider .splide__slide { display: block; min-width: 0; }

/* el listado en anchos chicos (va después de las reglas de las tarjetas para ganarles) */
@container misiones (max-width: 640px) {
  .mis-dest { grid-template-columns: minmax(0, 1fr); }
  .mis-dest__media { min-height: 0; aspect-ratio: 16 / 9; }
  .mis-dest__body { padding: 24px; }
  .mis-dest__title { font-size: 26px; }
  .mis-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* --- ficha: cabecera y foto --- */
.mision-cab { display: flex; flex-direction: column; row-gap: 32px; }   /* meta → foto: 32 (Johann, 8 oct, Figma 2670:656) */
.page-main--mision > .mision-cab { margin-bottom: -24px; }                /* foto → primer bloque: 64 − 24 = 40 */
.mision-cab__head { display: flex; flex-direction: column; align-items: flex-start; }
.mision-cab__eyebrow { margin-bottom: 20px; }
.mision-cab__titulo { margin-bottom: 24px; }
.mision-cab__titulo .section-title__text { line-height: 1.16; }
.mision-foto { display: flex; flex-direction: column; row-gap: 12px; margin: 0; }
.mision-foto__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--amcham-radius); }
.mision-foto__pie { font: 14px/1.45 var(--amcham-font-body); color: #707070; text-align: left; }
.mision-portada { position: relative; display: flex; flex-direction: column; justify-content: flex-end; row-gap: 8px; aspect-ratio: 853 / 360; padding: 0 48px 44px; overflow: hidden; border-radius: var(--amcham-radius); color: #fff;
  background: var(--amcham-color-navy) url(assets/amcham-banda.jpg) right center / cover no-repeat; }
.mision-portada__eyebrow { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: #99BFF2; }
.mision-portada__titulo { font-family: var(--amcham-font-heading); font-size: 56px; font-weight: 600; line-height: 1.1; }
.mision-portada__fecha { font: 18px/1.5 var(--amcham-font-body); color: rgb(255 255 255 / .85); }

/* --- ¿Por qué…? y crónica: texto del editor --- */
.mision-rich { font: 17px/1.6 var(--amcham-font-body); color: var(--amcham-ink); }
.mision-rich > * { margin: 0 0 18px; }
.mision-rich > :last-child { margin-bottom: 0; }
.mision-rich ul { display: flex; flex-direction: column; row-gap: 16px; padding: 0; list-style: none; }
.mision-rich ul li { position: relative; margin: 0; padding-left: 24px; }
.mision-rich ul li::before { content: ''; position: absolute; top: .55em; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--amcham-color-blue); }
.mision-rich ol { padding-left: 22px; }
.mision-rich a { color: var(--amcham-color-blue); }
.mision-rich :is(h2, h3, h4) { margin: 28px 0 10px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.mision-rich > :is(h2, h3, h4):first-child { margin-top: 0; }
.mision-rich blockquote { margin: 0 0 24px; padding: 0 0 0 24px; border-left: 4px solid var(--amcham-color-blue); font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 500; font-style: normal; line-height: 1.5; }
.mision-rich blockquote p { margin: 0; }
.mision-rich blockquote cite { display: block; margin-top: 8px; font: normal 14px/1.5 var(--amcham-font-body); color: #707070; }

/* --- itinerario --- */
.mision-itin__tabs { display: flex; gap: 8px; margin: 0 -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.mision-itin__tabs::-webkit-scrollbar { display: none; }
.mision-itin__tabs[hidden] { display: none; }
.mision-itin__tab { display: flex; flex: none; flex-direction: column; align-items: flex-start; row-gap: 2px; padding: 10px 18px 11px; border: 1px solid #D5DCE6; border-radius: 10px; background: #fff; text-align: left; white-space: nowrap; color: var(--amcham-ink); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.mision-itin__tab:hover { border-color: var(--amcham-color-navy); }
.mision-itin__tab[aria-selected="true"] { border-color: var(--amcham-color-navy); background: var(--amcham-color-navy); color: #fff; }
/* pestaña en dos líneas: «Día 1» y la fecha completa, sin el punto (Johann, 8 oct) */
.mision-itin__tab-dia { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.3; }
.mision-itin__tab-fecha { font: 13px/1.4 var(--amcham-font-body); color: #707070; transition: color .2s; }
.mision-itin__tab[aria-selected="true"] .mision-itin__tab-fecha { color: rgb(255 255 255 / .8); }
.mision-itin__dias { display: flex; flex-direction: column; row-gap: 16px; }
.mision-dia { padding: 8px 40px 12px; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.mision-dia[hidden] { display: none; }
.mision-dia__cab { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; padding: 22px 0 18px; border-bottom: 1px solid rgb(0 0 0 / .09); }
.mision-dia__fecha { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.mision-dia__cuenta { flex: none; font: 14px/1.3 var(--amcham-font-body); color: #707070; }
.mision-dia__lista { margin: 0; padding: 0; list-style: none; }
.mision-act { display: flex; align-items: center; column-gap: 24px; margin: 0; padding: 20px 0; border-bottom: 1px solid rgb(0 0 0 / .09); }
.mision-act:last-child { border-bottom: 0; }
.mision-act__num { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--amcham-color-blue); font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1; color: #fff; }
.mision-dia__lista--hora .mision-act { align-items: flex-start; }
.mision-act__hora { flex: 0 0 170px; padding-top: 2px; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.mision-act__txt { display: flex; flex-direction: column; row-gap: 4px; min-width: 0; }
.mision-act__titulo { font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.mision-act__detalle { font: 15px/1.5 var(--amcham-font-body); color: #707070; }
.mision-itin__nota { font: italic 14px/1.5 var(--amcham-font-body); color: #707070; }

/* --- inscripción --- */
.mision-precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
/* precios: misma escala y color que la tarifa de los hoteles (19 oct 2026) */
.mision-precio { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2px; padding: 24px 28px; border: 1px solid transparent; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.mision-precio .mision-eyebrow { margin-bottom: 8px; }
.mision-precio.is-destacado { border-color: rgb(0 115 192 / .35); background: rgb(0 115 192 / .04); }
.mision-precio__monto { font-family: var(--amcham-font-heading); font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--amcham-color-navy); }
.mision-precio__cond { font: 14px/1.5 var(--amcham-font-body); color: #707070; }
.mision-incluye { display: flex; flex-direction: column; row-gap: 18px; padding: 28px 32px; }
.mision-caja__titulo { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.mision-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; padding: 0; list-style: none; }
.mision-checks li { display: flex; align-items: flex-start; column-gap: 12px; margin: 0; font: 15px/1.5 var(--amcham-font-body); color: var(--amcham-ink); }
.mision-checks__marca { display: flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgb(0 115 192 / .12); color: var(--amcham-color-blue); }
.mision-checks__marca svg { width: 10px; height: 11px; }
.mision-notas { display: flex; flex-direction: column; row-gap: 6px; font: 15px/1.5 var(--amcham-font-body); color: #444; }
.mision-notas p { margin: 0; }

/* --- hospedaje y vuelos --- */
/* un hotel por fila: resumen (zona, hotel, tarifa) | detalle (descripción, incluye, condiciones) — Johann, 8 oct, Figma 2670:656 */
.mision-hoteles { display: flex; flex-direction: column; row-gap: 20px; }
.mision-hotel { display: grid; grid-template-columns: 287px minmax(0, 1fr); column-gap: 36px; align-items: start; padding: 32px 36px; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.mision-hotel__resumen { display: flex; flex-direction: column; align-items: flex-start; row-gap: 12px; align-self: stretch; padding-right: 36px; border-right: 1px solid rgb(0 0 0 / .09); }
.mision-hotel__resumen > *, .mision-hotel__detalle > * { margin: 0; }
.mision-hotel__nombre { font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.mision-hotel__tarifa { display: flex; flex-direction: column; row-gap: 2px; padding-top: 8px; }
.mision-hotel__tarifa strong { font-family: var(--amcham-font-heading); font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--amcham-color-navy); }
.mision-hotel__tarifa span { font: 14px/1.5 var(--amcham-font-body); color: #707070; }
.mision-hotel__detalle { display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px; min-width: 0; }
.mision-hotel__desc { font: 16px/1.6 var(--amcham-font-body); color: #444; }
.mision-hotel__incluye { display: flex; align-items: center; column-gap: 12px; font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--amcham-ink); }
.mision-hotel__cond { display: flex; flex-direction: column; row-gap: 4px; align-self: stretch; padding: 14px 16px; border-radius: 8px; background: #F4F6F9; }
.mision-hotel__cond .mision-eyebrow { font-size: 11px; }
.mision-hotel__cond p { margin: 0; font: 14px/1.5 var(--amcham-font-body); color: #555; }
.mision-filas { margin: 0; padding: 8px 32px; list-style: none; }
.mision-fila { display: flex; column-gap: 24px; margin: 0; padding: 20px 0; border-bottom: 1px solid rgb(0 0 0 / .09); }
.mision-fila:last-child { border-bottom: 0; }
.mision-fila__nombre { flex: 0 0 170px; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.mision-fila__txt { display: flex; flex-direction: column; row-gap: 6px; min-width: 0; font: 15px/1.5 var(--amcham-font-body); color: var(--amcham-ink); }
.mision-fila__txt p { margin: 0; }
.mision-fila__txt .mision-fila__nota { font-size: 14px; line-height: 1.55; color: #707070; }

/* --- cómo nos fue --- */
.mision-cifras { display: flex; margin: 0; padding: 28px 32px; list-style: none; border-radius: var(--amcham-radius); background: var(--amcham-color-navy); color: #fff; }
.mision-cifras li { display: flex; flex: 1 1 0; flex-direction: column; row-gap: 6px; min-width: 0; margin: 0; padding: 0 28px; border-left: 1px solid rgb(255 255 255 / .18); }
.mision-cifras li:first-child { padding-left: 0; border-left: 0; }
.mision-cifras li:last-child { padding-right: 0; }
.mision-cifras strong { font-family: var(--amcham-font-heading); font-size: 40px; font-weight: 700; line-height: 1.1; }
.mision-cifras span { font: 14px/1.45 var(--amcham-font-body); color: rgb(255 255 255 / .8); }
.mision-cifras small { font: 12px/1.4 var(--amcham-font-body); color: rgb(255 255 255 / .55); }   /* fuente de la cifra (cifras del destino, 19 oct 2026) */
.mision-cita { display: flex; flex-direction: column; row-gap: 18px; margin: 0; padding: 36px 40px; border-radius: var(--amcham-radius); color: #fff; background: var(--amcham-color-navy) linear-gradient(167deg, var(--amcham-color-blue) 14%, var(--amcham-color-navy) 86%); }
.mision-cita blockquote { margin: 0; padding: 0; border: 0; }
.mision-cita blockquote p { margin: 0; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 500; font-style: normal; line-height: 1.5; }
.mision-cita figcaption { display: flex; flex-direction: column; row-gap: 2px; }
.mision-cita figcaption strong { font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.3; }
.mision-cita figcaption span { font: 14px/1.5 var(--amcham-font-body); color: rgb(255 255 255 / .75); }
.mision-acuerdos { display: flex; flex-direction: column; row-gap: 12px; padding: 24px 32px; }
.mision-acuerdos :is(p, li) { margin: 0; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--amcham-ink); }
.mision-acuerdos ul { display: flex; flex-direction: column; row-gap: 10px; margin: 0; padding-left: 20px; }

/* --- galería por día y cobertura --- */
.mis-albumes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mis-album { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .05); transition: box-shadow .2s; }
.mis-album:hover { box-shadow: 0 10px 22px rgb(0 0 0 / .1); }
.mis-album:has(.mis-album__ver:focus-visible) { outline: 2px solid var(--amcham-color-blue); outline-offset: 3px; }
.mis-album__media { aspect-ratio: 268 / 180; overflow: hidden; background: var(--amcham-color-navy); }
.mis-album__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--amcham-ease, ease); }
.mis-album:hover .mis-album__img { transform: scale(1.03); }
.mis-album__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px; padding: 16px 18px 18px; }
.mis-album__titulo { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.mis-album__cuenta { font: 14px/1.3 var(--amcham-font-body); color: #707070; }
.mis-album__ver { margin: 0; padding: 6px 0 0; border: 0; background: none; cursor: pointer; }
.mis-album__ver:focus-visible { outline: none; }
.mis-album__ver::after { content: ''; position: absolute; inset: 0; }
.mis-album__galeria[hidden] { display: none !important; }
.mis-cobertura { display: flex; flex-direction: column; row-gap: 24px; padding-top: 16px; }
.mis-cobertura__titulo { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.mis-notas { display: flex; flex-direction: column; row-gap: 16px; margin: 0; padding: 0; list-style: none; }
.mis-notas li { margin: 0; }
.mis-nota { display: flex; align-items: center; column-gap: 20px; padding: 20px 24px 20px 20px; border-radius: var(--amcham-radius); background: #fff; box-shadow: 0 6px 10px rgb(0 0 0 / .05); color: inherit; text-decoration: none; transition: box-shadow .2s; }
.mis-nota:hover { box-shadow: 0 10px 22px rgb(0 0 0 / .1); }
.mis-nota__icono { display: flex; flex: none; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 8px; background: var(--amcham-color-navy); color: #fff; }
.mis-nota__icono svg { width: 28px; height: 28px; }
.mis-nota__txt { display: flex; flex: 1 1 auto; flex-direction: column; row-gap: 6px; min-width: 0; }
.mis-nota__titulo { font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); transition: color .2s; }
.mis-nota:hover .mis-nota__titulo { color: var(--amcham-color-blue); }
.mis-nota__mas { flex: none; }

/* --- organizan y colaboran --- */
.mision-aliados__grupos { display: flex; flex-direction: column; row-gap: 32px; }
.mision-aliados__grupos.is-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 17px; }
.mision-aliados__grupos.is-fila .mision-aliados__grupo { grid-column: span var(--n, 1); }
.mision-aliados__grupo { display: flex; flex-direction: column; row-gap: 14px; min-width: 0; }
.mision-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 0; padding: 0; list-style: none; }
.is-fila .mision-logos { grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.mision-logo { display: flex; align-items: center; justify-content: center; height: 104px; margin: 0; padding: 20px 22px; border: 1px solid #E3E8EF; border-radius: var(--amcham-radius); background: #fff; }
.mision-logo__img { display: block; width: auto; max-width: 100%; height: auto; max-height: 64px; object-fit: contain; }

/* --- otras misiones --- */
.mision-otras__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.mision-otras__cab .sec-head { width: auto; }

/* --- anchos chicos (por contenedor: no depende del lateral) --- */
@container mision (max-width: 640px) {
  .mis-albumes, .mis-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mision-checks { grid-template-columns: minmax(0, 1fr); }
  .mision-logos, .is-fila .mision-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mision-aliados__grupos.is-fila { display: flex; flex-direction: column; row-gap: 28px; }
  .mision-logo { height: 92px; padding: 16px; }
  .mision-dia { padding: 4px 20px 8px; }
  .mision-act { column-gap: 16px; padding: 16px 0; }
  .mision-act__num { width: 36px; height: 36px; font-size: 15px; border-radius: 8px; }
  .mision-act__titulo { font-size: 16px; }
  .mision-dia__lista--hora .mision-act { flex-direction: column; row-gap: 4px; }
  .mision-act__hora { flex: none; padding-top: 0; font-size: 14px; }
  .mision-fila { flex-direction: column; row-gap: 6px; }
  .mision-fila__nombre { flex: none; }
  .mision-filas { padding: 4px 20px; }
  .mision-cifras { flex-direction: column; row-gap: 18px; padding: 24px; }
  .mision-cifras li { padding: 18px 0 0; border-top: 1px solid rgb(255 255 255 / .18); border-left: 0; }
  .mision-cifras li:first-child { padding-top: 0; border-top: 0; }
  .mision-cifras strong { font-size: 34px; }
  .mision-cita { padding: 28px 24px; }
  .mision-cita blockquote p { font-size: 18px; }
  .mision-incluye, .mision-acuerdos { padding: 24px 20px; }
  .mision-precio, .mision-hotel { padding: 24px; }
  .mision-hotel { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .mision-hotel__resumen { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgb(0 0 0 / .09); }
  .mision-precio__monto { font-size: 28px; }
  .mis-nota { flex-wrap: wrap; row-gap: 12px; column-gap: 16px; padding: 16px; }
  .mis-nota__icono { width: 52px; height: 52px; }
  .mis-nota__icono svg { width: 22px; height: 22px; }
  .mis-nota__txt { flex-basis: calc(100% - 68px); }
  .mis-nota__mas { margin-left: 68px; }
  .mision-cab__titulo .section-title__text { font-size: 30px; }
  .mision-meta { flex-direction: column; align-items: flex-start; }
  .mision-portada { aspect-ratio: 4 / 3; padding: 0 24px 28px; }
  .mision-portada__titulo { font-size: 40px; }
  .mision-portada__fecha { font-size: 16px; }
}
@container mision (max-width: 460px) {
  .mis-albumes, .mis-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .page-main--misiones, .page-main--mision { row-gap: 48px; }
  .mision-cab { row-gap: 24px; }
  .page-main--mision > .mision-cab { margin-bottom: -16px; }   /* 48 − 16 = 32 */
  .misiones { row-gap: 48px; }
}
/* ===== fin 10m ===== */

/* =========================================================
   21. Volver arriba — botón flotante en todo el sitio (inc/volver-arriba.php + assets/volver-arriba.js, 8 oct 2026)
   Aparece al bajar 600 px; sobre el pie navy se invierte (blanco con flecha navy); se esconde con el menú móvil,
   el buscador y los modales (mismas clases de bloqueo que usa Lenis). Debajo de las barras de Revisión/Editor (z 99990+).
   ========================================================= */
.volver-arriba {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--amcham-color-navy); color: #fff; box-shadow: 0 4px 12px rgb(19 62 127 / .22); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s var(--amcham-ease, ease), transform .25s var(--amcham-ease, ease), visibility 0s linear .25s, background-color .2s, color .2s, box-shadow .2s;
}
.volver-arriba.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.volver-arriba svg { width: 14px; height: 14px; min-width: 0; min-height: 0; overflow: visible; transition: transform .2s var(--amcham-ease, ease); }
.volver-arriba:hover { background: var(--amcham-color-blue); }
.volver-arriba:hover svg { transform: translateY(-2px); }
.volver-arriba:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 3px; }
.volver-arriba.sobre-pie { background: #fff; color: var(--amcham-color-navy); box-shadow: 0 4px 12px rgb(0 0 0 / .22); }
.volver-arriba.sobre-pie:hover { background: var(--amcham-color-blue); color: #fff; }
.volver-arriba.sobre-pie:focus-visible { outline-color: #fff; }
body:is(.no-scroll, .buscador-abierto, .jmodal-open) .volver-arriba { opacity: 0; visibility: hidden; }
body.imprimir .volver-arriba { display: none; }
#brx-header:focus { outline: none; }   /* recibe el foco al volver arriba (tabindex -1) */
@media (max-width: 767px) { .volver-arriba { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .volver-arriba, .volver-arriba svg { transition: none; } }
@media print { .volver-arriba { display: none; } }
/* ===== fin 21 ===== */
/* =========================================================
   10n. Doing Business in Panama — Figma WIP 2432:8386 (12 oct 2026). Extensiones de piezas que ya existían:
   · .sec-head__entrada → párrafo de entrada opcional en la cabecera compartida (amcham_sec_head / amcham_head_render, clave «entrada»)
   · .igrid__lista--sombra → tarjetas blancas con sombra, ícono navy sobre caja navy al 12 % y texto gris (los cuatro sectores)
   · .docdest__botones → dos botones en el documento destacado (Ver el reporte · Descargar PDF)
   · .areas__slider / __subtitulo / __items--etiquetas / __nota → los regímenes de incentivo en carrusel
   Las cifras en tarjetas sueltas (.cifras--tarjetas) viven en assets/piezas.css con el resto de .cifras.
   ========================================================= */
/* Texto de entrada: 14 del row-gap de la cabecera + 10 = los 24 del Figma entre el título y el párrafo */
.sec-head__entrada { width: 100%; margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--amcham-ink); }
.sec-head__entrada p { margin: 0 0 18px; }
.sec-head__entrada > :last-child { margin-bottom: 0; }
.sec-head__entrada a { color: var(--amcham-color-light-blue); text-decoration: underline; text-underline-offset: 2px; }

/* Tarjetas con ícono «Blanca (sombra)»: Figma 2495:250 — pad 22/18, ícono 26 en caja 44 navy al 12 %, título 19/1.22, texto 14.5/1.55 gris, 16 entre tarjetas */
.igrid__lista--sombra { gap: 16px; }
.igrid__lista--sombra .igrid__item { background: #fff; color: var(--amcham-ink); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.igrid__lista--sombra .igrid__ic { background: rgb(19 62 127 / .12); color: var(--amcham-color-navy); }
.igrid__lista--sombra .igrid__nombre { font-size: 19px; line-height: 1.22; }
.igrid__lista--sombra .igrid__texto { line-height: 1.55; color: var(--amcham-muted); opacity: 1; }

/* Documento destacado con dos botones (Figma 2500:583: 12 entre ellos) */
.docdest__botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Áreas: subtítulo (la ley), ítems como etiquetas, nota al pie y carrusel — Figma 2512:11451 */
.areas__subtitulo { margin: -6px 0 0; font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 600; line-height: 1.6; color: #555; }   /* 6 bajo el título (row-gap 12 − 6) */
.areas__items--etiquetas { flex-direction: row; flex-wrap: wrap; gap: 10px; padding-top: 0; }
.areas__items--etiquetas li { padding: 8px 16px; border-radius: 20px; background: #E3F0FA; font-size: 14px; line-height: 1.4; color: var(--amcham-color-navy); }
.areas__items--etiquetas li::before { content: none; }
.areas__nota { margin: 0; font-size: 14px; line-height: 1.6; color: var(--amcham-muted); }
.areas__slider { position: relative; min-width: 0; }
.areas__slider .splide__arrows.custom { justify-content: flex-end; margin-bottom: 18px; }   /* flechas navy de 33 arriba a la derecha, 18 sobre la tarjeta */
.areas__slider .splide__track { width: calc(100% + 24px); max-width: none; padding-top: 4px; padding-bottom: 20px; margin: -4px -12px -20px; }   /* aire para la sombra; el lateral (12) lo pone Splide con su opción padding y el gap de 24 impide que asome la vecina */
.areas__slider .splide__slide { display: flex; align-items: stretch; }   /* todas las tarjetas a la altura de la más alta (Bricks centra el contenido del slide) */
.areas__slider .areas__card { flex: 1 1 auto; width: 100%; }

@media (max-width: 1279px) {
  .igrid__lista--sombra.igrid__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* con texto, 4 columnas en 684 o menos quedan de ~150 */
}
@media (max-width: 767px) {
  .igrid__lista--sombra, .igrid__lista--sombra.igrid__lista--4 { grid-template-columns: 1fr; gap: 14px; }
  .igrid__lista--sombra .igrid__item { flex-direction: column; align-items: flex-start; row-gap: 12px; padding: 20px 18px; }   /* con texto no cabe en fila como los valores */
  .docdest__botones .btn { flex: 1 1 auto; justify-content: center; }
  .areas__slider .splide__arrows.custom { margin-bottom: 14px; }
  .areas__subtitulo { font-size: 15px; }
}
/* ===== fin 10n ===== */

/* ===== 10m. Galería por año (amcham-galeria-anios, 18 oct 2026) =====
   Las tarjetas son las de los álbumes de las misiones (.mis-album*); aquí solo lo propio. */
.galanios:not(.is-abierta) .galanios__extra { display: none; }
.galanios > .sec-head { margin-bottom: 28px; }   /* 29 oct 2026 (Johann): 28 como el resto; era 24 (Johann, 19 oct) */
.galanios__pie { display: flex; justify-content: center; margin-top: 28px; }
.galanios__mas { justify-content: center; text-align: center; }
.galanios .mis-album__img { object-position: center 25%; }   /* las verticales (2018) no cortan cabezas en la portada */
@media (max-width: 767px) {
  .galanios .mis-albumes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .galanios .mis-album__body { row-gap: 4px; padding: 12px 12px 14px; }
  .galanios .mis-album__titulo { font-size: 15px; }
  .galanios .mis-album__cuenta { font-size: 13px; }
  .galanios .mis-album__ver { column-gap: 8px; font-size: 13px; }
  .galanios > .sec-head { margin-bottom: 28px; }   /* 29 oct 2026 (Johann): en movil tambien 28; era 20 */
  .galanios__pie { margin-top: 20px; }
  .galanios__mas { width: 100%; }
}




/* =========================================================
   10o. Patrocinios (Figma 2840:216, 18 oct 2026) — piezas nuevas reutilizables:
   niveles/paquetes con franja (amcham-niveles), lista con íconos en panel (amcham-lista-iconos), columnas con lista de
   verificación (amcham-columnas-check), lista de fechas (amcham-fechas), logos por nivel en tarjeta (amcham-logos-tarjeta),
   formulario en panel (amcham-formulario) y los datos de contacto de la tarjeta del submenú (.subnav-cta__datos).
   ========================================================= */
/* Lista de verificación compartida (amcham_checklist) */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; row-gap: 12px; width: 100%; }
.checklist__item { display: flex; align-items: flex-start; column-gap: 10px; font-size: 15px; line-height: 1.5; color: var(--amcham-ink); }
.checklist__marca { flex: 0 0 auto; display: inline-grid; place-items: center; width: 14px; height: 22px; color: var(--amcham-color-light-blue); }
.checklist__marca svg { width: 12px; height: 12px; }
.checklist__marca svg > path { fill: currentColor; }
.checklist__texto { min-width: 0; }
.notas-pie { display: flex; flex-direction: column; row-gap: 4px; width: 100%; }
.notas-pie p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--amcham-muted); }

/* Niveles o paquetes */
.niveles { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }
.niveles__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; align-items: stretch; }
.niveles__lista--1 { grid-template-columns: 1fr; }
.niveles__lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.niveles__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nivel { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }
.nivel__franja { display: block; height: 6px; background: linear-gradient(90deg, #D5DAE0, #A9B2BC 50%, #7D8792); }
.nivel--gold .nivel__franja { background: linear-gradient(90deg, #EED68A, #D4AC48 50%, #B0852A); }
.nivel--silver .nivel__franja { background: linear-gradient(90deg, #E3E7EB, #BCC3CA 50%, #98A1AA); }
.nivel--navy .nivel__franja { background: linear-gradient(90deg, var(--amcham-color-navy), var(--amcham-color-blue)); }
.nivel__cuerpo { display: flex; flex-direction: column; row-gap: 20px; padding: 28px; }
.nivel__cabeza { display: flex; align-items: center; column-gap: 16px; }
.nivel__insignia { flex: 0 0 56px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #E3E7EB; color: #7D8792; }
.nivel__insignia svg { width: 24px; height: 24px; }
.nivel__insignia svg > path { fill: currentColor; }
.nivel--gold .nivel__insignia { background: #F6E8BF; color: #B0852A; }
.nivel--navy .nivel__insignia { background: color-mix(in srgb, var(--amcham-color-navy) 10%, #fff); color: var(--amcham-color-navy); }
.nivel__insignia--letra { font-family: var(--amcham-font-heading); font-size: 26px; font-weight: 700; line-height: 1; background: #A9B2BC; color: #fff; }
.nivel--gold .nivel__insignia--letra { background: #D4AC48; }
.nivel__nombre { display: flex; flex-direction: column; row-gap: 2px; min-width: 0; }
.nivel__eyebrow { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--amcham-muted); }
.nivel__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 28px; font-weight: 600; line-height: 1.15; color: var(--amcham-ink); }
/* 29 oct 2026 (Johann): el dato ya no compite con el nombre del paquete — era 44px contra los 28 del titulo. */
.nivel__dato { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; margin: 0; }
.nivel__valor { font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--amcham-color-navy); }
.nivel__valor-texto { font-size: 16px; line-height: 1.4; color: #555; }
.nivel__hr { width: 100%; height: 1px; margin: 0; border: 0; background: #E6E6E6; }
.nivel__etiqueta { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--amcham-color-navy); }
.nivel__etiqueta + .checklist, .nivel__etiqueta + .chips { margin-top: -8px; }
/* 29 oct 2026 (Johann): la combinacion era una fila de cajas que parecian botones; ahora es texto corrido con comas. */
.combo { margin: 0; font-size: 16px; line-height: 1.5; color: var(--amcham-ink); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips__chip { padding: 6px 12px; border: 1px solid #D3DBE6; border-radius: 999px; background: #fff; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--amcham-color-navy); }

/* Lista con íconos en panel */
.lista-ic { display: flex; flex-direction: column; row-gap: 14px; width: 100%; min-width: 0; }
.lista-ic__panel { display: flex; flex-direction: column; row-gap: 22px; padding: 32px; border-radius: 12px; background: #E7EFF9; }
.lista-ic__panel--blanco { background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.lista-ic__cabeza { display: flex; flex-direction: column; row-gap: 8px; }
.lista-ic__eyebrow { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--amcham-color-navy); }
.lista-ic__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
/* Fondo navy con el isotipo (18 oct 2026, Johann: «mejorar el diseño»): el panel hace de puente entre las tarjetas blancas */
.lista-ic__panel--navy { position: relative; overflow: hidden; padding: 36px 36px 34px; border-radius: var(--amcham-radius); background: var(--amcham-color-navy); }
/* Isotipo chico arriba a la derecha (Johann, 18 oct: el de cta-fondo-isotipo.jpg salía enorme): la marca de las bandas, 280 px, al 18 % */
.lista-ic__panel--navy::before { content: ''; position: absolute; top: -70px; right: -40px; width: 280px; height: 273px; opacity: .18; pointer-events: none; background: url('assets/amcham-mark.webp') no-repeat center / contain; }
.lista-ic__panel--navy > * { position: relative; }
.lista-ic__panel--navy .lista-ic__eyebrow { color: #A9C8EE; }
.lista-ic__panel--navy .lista-ic__titulo { color: #fff; font-size: 24px; }
.lista-ic__panel--navy .lista-ic__grid { gap: 14px 20px; }
.lista-ic__panel--navy .lista-ic__item { column-gap: 14px; padding: 14px 16px; border-radius: 8px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); }
.lista-ic__panel--navy .lista-ic__ic { background: #fff; color: var(--amcham-color-navy); }
.lista-ic__panel--navy .lista-ic__texto { color: #fff; font-size: 15px; }
.lista-ic__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 24px; }
.lista-ic__grid--1 { grid-template-columns: 1fr; }
.lista-ic__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-ic__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lista-ic__item { display: flex; align-items: center; column-gap: 14px; min-width: 0; }
.lista-ic__ic { flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #fff; color: var(--amcham-color-navy); }
.lista-ic__panel--blanco .lista-ic__ic { background: color-mix(in srgb, var(--amcham-color-navy) 8%, #fff); }
.lista-ic__ic svg { width: 18px; height: 18px; }
.lista-ic__ic svg > path { fill: currentColor; }
.lista-ic__texto { font-size: 15px; line-height: 1.45; color: var(--amcham-ink); }
.lista-ic__nota { display: flex; align-items: flex-start; column-gap: 8px; margin: 0; padding: 0 4px; font-size: 14px; line-height: 1.5; color: var(--amcham-muted); }
.lista-ic__nota svg { width: 14px; height: 14px; margin-top: 3px; }
.lista-ic__nota svg > path { fill: currentColor; }

/* Columnas con lista de verificación */
.colcheck { display: flex; flex-direction: column; row-gap: 20px; width: 100%; min-width: 0; }
.colcheck__card { display: flex; flex-direction: column; row-gap: 22px; padding: 28px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.colcheck__card-titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.colcheck__cols { display: grid; gap: 28px; align-items: start; }
.colcheck__cols--1 { grid-template-columns: 1fr; }
.colcheck__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colcheck__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colcheck__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.colcheck--tarjetas .colcheck__cols { gap: 20px; align-items: stretch; }
.colcheck__col { display: flex; flex-direction: column; row-gap: 12px; min-width: 0; }
.colcheck--tarjetas .colcheck__col { row-gap: 14px; padding: 24px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.colcheck__head { display: flex; align-items: center; column-gap: 10px; }
.colcheck--tarjetas .colcheck__head { flex-direction: column; align-items: flex-start; row-gap: 14px; }
.colcheck__ic { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--amcham-color-navy) 8%, #fff); color: var(--amcham-color-navy); }
.colcheck--tarjetas .colcheck__ic { width: 48px; height: 48px; flex-basis: 48px; }
.colcheck__ic svg { width: 17px; height: 17px; }
.colcheck--tarjetas .colcheck__ic svg { width: 20px; height: 20px; }
.colcheck__ic svg > path { fill: currentColor; }
.colcheck__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.colcheck--tarjetas .colcheck__titulo { font-size: 19px; }
.colcheck__sub { margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--amcham-muted); }
.colcheck__hr { width: 100%; height: 1px; margin: 0; border: 0; background: #E6E6E6; }
.colcheck .checklist__item { font-size: 14px; }
.colcheck__foto { margin: 0; }
.colcheck--tarjetas .colcheck__col:has(> .colcheck__foto) { padding-top: 0; overflow: hidden; }
.colcheck--tarjetas .colcheck__foto { margin: 0 -24px 4px; }
.colcheck--tarjetas .colcheck__foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Lista de fechas */
.fechas { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }
.fechas__lista { list-style: none; margin: 0; padding: 6px 28px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.fechas__fila { display: flex; align-items: center; column-gap: 20px; padding: 16px 0; }
.fechas__fila + .fechas__fila { border-top: 1px solid #E6E6E6; }
.fechas__mes { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 8px; background: var(--amcham-color-navy); color: #fff; }
.fechas__mes strong { font-family: var(--amcham-font-heading); font-size: 16px; font-weight: 700; line-height: 1.1; }
.fechas__mes small { font-size: 11px; line-height: 1.2; color: rgb(255 255 255 / .7); }
.fechas__evento { display: flex; flex-direction: column; row-gap: 4px; min-width: 0; }
.fechas__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--amcham-ink); }
.fechas__meta { display: inline-flex; align-items: center; column-gap: 8px; font-size: 14px; line-height: 1.3; color: #555; }
.fechas__meta svg { width: 14px; height: 14px; color: var(--amcham-muted); }
.fechas__meta svg > path { fill: currentColor; }

/* Logos por nivel en tarjeta */
.logos-niv { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }
.logos-niv__card { display: flex; flex-direction: column; row-gap: 28px; padding: 28px 32px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); }
.logos-niv__nivel { display: flex; flex-direction: column; row-gap: 20px; }
.logos-niv__nivel + .logos-niv__nivel { padding-top: 28px; border-top: 1px solid #E6E6E6; }
.logos-niv__etiqueta { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; color: var(--amcham-muted); }
.logos-niv__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 24px; align-items: center; }
.logos-niv__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logos-niv__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logos-niv__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.logos-niv__item { display: flex; align-items: center; justify-content: center; min-width: 0; height: 56px; }
.logos-niv__item a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.logos-niv__logo { display: block; width: auto; height: auto; max-width: 150px; max-height: 48px; object-fit: contain; }

/* Formulario en panel (reusa el tema de .form-card de Contacto) */
.form-card--claro { padding: 36px; row-gap: 22px; background: #E7EFF9; border-radius: 12px; box-shadow: none; }
.form-card--blanco { row-gap: 22px; }
.form-card__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--amcham-ink); }
.form-card__texto { margin: 0; font-size: 16px; line-height: 1.55; color: #444; }
.form-card--claro .gform_wrapper.gform-theme { --gf-ctrl-border-color: #CDD6E2; --gf-ctrl-bg-color: #fff; --gf-ctrl-radius: 6px; --gf-field-gap-x: 16px; --gf-form-gap-y: 18px; --gf-field-gap-y: 18px; --gf-ctrl-label-color-primary: var(--amcham-color-navy); }
.form-card--claro .gform_wrapper .gfield_label { color: var(--amcham-color-navy); font-weight: 600; }
/* Panel de formulario en blanco: mismos tokens que el formulario de Aplicar a membresía (.sol) */
.form-card--blanco { row-gap: 30px; padding: 38px 40px 40px; }
.form-card--blanco .form-card__head { row-gap: 8px; }
.form-card--blanco .form-card__titulo { font-size: 20px; line-height: 1.3; }
.form-card--blanco .form-card__texto { font-size: 15px; line-height: 1.5; color: var(--amcham-muted); }
.form-card--blanco .gform_wrapper.gform-theme { --gf-form-gap-y: 30px; --gf-field-gap-y: 22px; --gf-label-space-primary: 5px; }
.form-card--blanco .gform_wrapper .gfield_label { font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--amcham-ink); }
.form-card--blanco .gform_wrapper .gfield--type-consent .gfield_consent_label { font-size: 15px; }
.form-card--blanco .gform_wrapper .gfield_description { font-size: 13.5px; color: var(--amcham-muted); }
@media (max-width: 767px) {
  .form-card--blanco { padding: 28px 20px 32px; row-gap: 24px; }
}

/* Tarjeta del submenú: datos de contacto (correo, teléfono) y botón blanco */
.subnav-cta__datos { list-style: none; margin: -8px 0 22px; padding: 0; display: flex; flex-direction: column; row-gap: 8px; }
.subnav-cta__datos li { display: flex; align-items: center; column-gap: 8px; font-size: 14px; line-height: 1.4; color: #fff; }
.subnav-cta__datos a { color: #fff; text-decoration: none; }
.subnav-cta__datos a:hover { text-decoration: underline; text-underline-position: from-font; }
.subnav-cta__datos svg { width: 14px; height: 14px; color: rgb(255 255 255 / .75); }
.subnav-cta__datos svg > path { fill: currentColor; }

@media (max-width: 1023px) {
  .colcheck__cols--3, .colcheck__cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-niv__grid--4, .logos-niv__grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .niveles__lista--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .niveles__lista, .colcheck__cols, .lista-ic__grid { grid-template-columns: 1fr; }
  .logos-niv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nivel__cuerpo { padding: 22px; }
  .nivel__titulo { font-size: 24px; }
  .nivel__valor { font-size: 19px; }
  .lista-ic__panel { padding: 24px; }
  .colcheck__card { padding: 22px; }
  .fechas__lista { padding: 4px 18px; }
  .fechas__mes { flex-basis: 52px; width: 52px; height: 52px; }
  .fechas__titulo { font-size: 16px; }
  .form-card--claro { padding: 24px; }
  .logos-niv__card { padding: 22px; }
}
/* ===== fin 10o ===== */












/* =========================================================
   22. Página /botones/ — inventario generado de botones (amcham-botones, 18 oct 2026). Reusa .sg-* del styleguide.
   ========================================================= */
.bt__resumen { margin: 0 0 20px; padding: 18px 22px; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); font-size: 15px; line-height: 1.6; color: var(--amcham-ink); }
.bt__indice { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; }
.bt__indice a { color: var(--amcham-color-navy); text-decoration: none; }
.bt__indice span { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #E7EFF9; font-size: 12px; color: var(--amcham-color-navy); }
.bt__tabla { width: 100%; margin: 0 0 24px; border-collapse: collapse; background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; font-size: 14px; }
.bt__tabla th, .bt__tabla td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #ECECEC; }
.bt__tabla th { font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--amcham-muted); background: #F7F9FC; }
.bt__tabla td span { color: var(--amcham-muted); }
.bt__tabla code { font-size: 13px; color: var(--amcham-color-navy); }
.bt .sg-sec__title small { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--amcham-muted); }
.bt__lista { display: flex; flex-direction: column; row-gap: 14px; }
.bt__item { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); background: #fff; border-radius: var(--amcham-radius); box-shadow: 0 6px 10px rgb(0 0 0 / .05); overflow: hidden; }
.bt__demos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; overflow: hidden; }
.bt__demo { position: relative; display: flex; align-items: center; justify-content: center; padding: 34px 16px 24px; min-height: 120px; min-width: 0; overflow: hidden; }
.bt__demo > * { max-width: 100%; }
.bt__demo .btn { max-width: 100%; }
.bt__demo--hover { border-left: 1px dashed rgb(0 0 0 / .12); }
.bt__demo--oscuro.bt__demo--hover { border-left-color: rgb(255 255 255 / .25); }
.bt__estado { position: absolute; top: 8px; left: 10px; font-family: var(--amcham-font-heading); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(0 0 0 / .45); }
.bt__demo--oscuro .bt__estado { color: rgb(255 255 255 / .6); }
.bt__specs--hover { color: var(--amcham-color-blue); }
.bt__grande { font-size: 13px; color: var(--amcham-muted); font-style: italic; }
.bt__demo > * { max-width: 100%; }
.bt__demo--oscuro { color: #fff; }
.bt__meta { display: flex; flex-direction: column; row-gap: 8px; padding: 18px 22px; min-width: 0; }
.bt__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bt__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amcham-color-navy); color: #fff; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 700; }
.bt__cls { font-size: 13px; color: var(--amcham-color-navy); background: #F1F4F8; padding: 3px 8px; border-radius: 4px; word-break: break-all; }
.bt__n { font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 600; color: var(--amcham-ink); }
.bt__specs, .bt__textos, .bt__pags { margin: 0; font-size: 13px; line-height: 1.55; color: var(--amcham-muted); }
.bt__textos { color: var(--amcham-ink); }
.bt__pags a { color: var(--amcham-color-blue); text-decoration: none; }
.bt__pags a:hover { text-decoration: underline; }
@media (max-width: 1023px) { .bt__item { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .bt__demos { grid-template-columns: 1fr; } .bt__demo--hover { border-left: 0; border-top: 1px dashed rgb(0 0 0 / .12); } }
/* ===== fin 22 ===== */






/* =========================================================
   23. Hovers que faltaban (18 oct 2026, Johann: «agrega los hovers», detectados con /botones/). Mismo patrón que el resto
   del sitio: los enlaces con flecha cambian de color y la flecha se desplaza 3 px; los íconos sueltos bajan la opacidad.
   ========================================================= */
.navbar__search { transition: opacity .2s; }
.navbar__search:hover { opacity: .75; }
.sres__borrar { transition: color .2s; }
.sres__borrar:hover { color: var(--amcham-color-navy); }
.testi__slider .splide__pagination__page:hover:not(.is-active) { background: rgb(19 62 127 / .5); }
.lu__firma--link, .lu__firma--grande--link { transition: opacity .2s; }
.lu__firma--link:hover, .lu__firma--grande--link:hover { opacity: .85; }
/* ===== fin 23 ===== */

/* =========================================================
   24. Fotos (mosaico con visor) — amcham-fotos (19 oct 2026)
   La retícula, el «+N», el botón y el visor son del plugin amcham-bloques (.ab-galeria*); aquí solo el envoltorio.
   ========================================================= */
.fotos { display: flex; flex-direction: column; row-gap: 28px; width: 100%; min-width: 0; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 24 */
.fotos .ab-galeria { margin: 0; }
.fotos .sec-head__entrada p { font-size: 17px; line-height: 1.6; }
.fotos .ab-galeria__acciones { margin-top: 16px; }
/* ===== fin 24 ===== */

/* =========================================================
   10p. Alquiler de salones (Figma 1712:1254, 20 oct 2026) — piezas nuevas reutilizables:
   tabla de comparación (amcham-tabla), ficha de espacio con foto (amcham-espacio: ficha, lado, tarjeta),
   tarjetas de texto claras (amcham-tarjetas-texto) y la cuadrícula de espacios (.espacios-grid).
   El formulario reutiliza amcham-formulario (10o); sus campos van en la rejilla nativa de Gravity Forms (2 por fila).
   ========================================================= */

/* Tabla de comparación */
.tabla { width: 100%; min-width: 0; }
.tabla__caja { background: #fff; border: 1px solid #e4e7ec; border-radius: var(--amcham-radius); overflow: hidden; }
.tabla > .tabla__caja { margin-top: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* era 24 */
.tabla > .tabla__caja:first-child { margin-top: 0; }
.tabla__fila { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, .8fr); column-gap: 16px; align-items: center; padding: 18px 24px; }
.tabla__fila + .tabla__fila { border-top: 1px solid #e4e7ec; }
.tabla__fila--cab { padding: 16px 24px; background: #f4f6f9; }
.tabla__fila--cab + .tabla__fila { border-top: 0; }
.tabla__celda { min-width: 0; font-family: var(--amcham-font-body); font-size: 14px; line-height: 1.5; color: #6f6f6f; }
.tabla__fila--cab .tabla__celda { font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #6f6f6f; }
.tabla__celda--espacio { font-family: var(--amcham-font-heading); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--amcham-ink); }
.tabla__celda--costo { color: var(--amcham-ink); }
.tabla__nota { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #6f6f6f; }

/* Ficha de espacio */
.espacio { display: flex; flex-direction: column; min-width: 0; margin: 0; background: #fff; border: 1px solid #e4e7ec; border-radius: var(--amcham-radius); overflow: hidden; }
.espacio__foto { position: relative; flex: 0 0 auto; overflow: hidden; background: #e4e7ec; }
.espacio__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.espacio__cuerpo { min-width: 0; }
.espacio__nombre { margin: 0; font-family: var(--amcham-font-heading); font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.espacio__personas { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #6f6f6f; }
.espacio__texto { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #444; }
.espacio__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.espacio__chips li { padding: 8px 14px; background: #f4f6f9; border: 1px solid #e4e7ec; border-radius: 4px; font-family: var(--amcham-font-heading); font-size: 13px; font-weight: 500; line-height: 1; color: #133e7f; }
.espacio__capacidad { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 14px; line-height: 1.4; color: #6f6f6f; }
.espacio__capacidad strong { font-family: var(--amcham-font-heading); font-weight: 600; color: #133e7f; }
.espacio__punto { color: #6f6f6f; }

.espacio--ficha .espacio__foto { height: 380px; }
.espacio--ficha .espacio__cuerpo { padding: 32px 36px 36px; }
.espacio--ficha .espacio__personas { margin-top: 10px; }
.espacio__configs { margin-top: 28px; }
.espacio__configs-titulo { margin: 0 0 16px; font-family: var(--amcham-font-heading); font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: uppercase; color: #6f6f6f; }
.espacio__configs-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.espacio__config { display: flex; flex-direction: column; min-width: 0; margin: 0; background: #f4f6f9; border: 1px solid #e4e7ec; border-radius: 8px; overflow: hidden; }
.espacio__config-foto { height: 86px; background: #e4e7ec; }
.espacio__config-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.espacio__config-txt { display: flex; flex-direction: column; row-gap: 4px; padding: 12px 12px 14px; }
.espacio__config-txt strong { font-family: var(--amcham-font-heading); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.espacio__config-txt span { font-size: 12px; line-height: 1.4; color: #6f6f6f; }

/* Galería de configuraciones: tocar una miniatura cambia la foto grande (25 oct 2026) */
.espacio__config-foto { display: block; }
.espacio__config-btn { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; }
.espacio--galeria .espacio__config { transition: border-color .18s ease, box-shadow .18s ease; }
.espacio--galeria .espacio__config-btn { cursor: pointer; }
.espacio--galeria .espacio__config:hover { border-color: #b9c6dc; }
.espacio--galeria .espacio__config.is-activa { border-color: var(--amcham-color-blue); box-shadow: inset 0 0 0 1px var(--amcham-color-blue); }
.espacio__config-btn:focus-visible { outline: 2px solid var(--amcham-color-blue); outline-offset: 2px; }
.espacio--galeria .espacio__foto img { transition: opacity .22s ease; }
.espacio--galeria .espacio__foto.is-cambiando img { opacity: 0; }

.espacio--lado { flex-direction: row; }
.espacio--lado .espacio__foto { flex: 0 0 340px; height: auto; min-height: 100%; }
.espacio--lado .espacio__cuerpo { flex: 1 1 auto; padding: 32px; }
.espacio--lado .espacio__nombre { font-size: 24px; }

.espacio--tarjeta { height: 100%; }
.espacio--tarjeta .espacio__foto { height: 210px; }
.espacio--tarjeta .espacio__cuerpo { padding: 24px 26px 26px; }
.espacio--tarjeta .espacio__nombre { font-size: 19px; }
.espacio--tarjeta .espacio__personas { margin-top: 8px; }
.espacio--tarjeta .espacio__chips { gap: 8px; margin-top: 16px; }

/* Cuadrícula de espacios (dos columnas) */
.espacios-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; width: 100%; }
.espacios-grid > * { display: flex; min-width: 0; }
.espacios-grid > * > .espacio { flex: 1 1 auto; }

/* Tarjetas de texto claras */
.ttexto { width: 100%; min-width: 0; }
.ttexto > .sec-head { margin-bottom: 28px; }   /* 29 oct 2026 (Johann): 28 como el resto; era 24 (Johann, 28 oct) */
.ttexto__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ttexto__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ttexto__card { min-width: 0; padding: 28px; background: #f4f6f9; border: 1px solid #e4e7ec; border-radius: var(--amcham-radius); }
.ttexto__titulo { margin: 0; font-family: var(--amcham-font-heading); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--amcham-ink); }
.ttexto__texto { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #444; }

@media (max-width: 1279px) {
	.espacio--lado .espacio__foto { flex-basis: 280px; }
}

@media (max-width: 900px) {
	.espacio--lado { flex-direction: column; }
	.espacio--lado .espacio__foto { flex: 0 0 auto; height: 240px; min-height: 0; }
	.espacio--ficha .espacio__foto { height: 280px; }
	.espacio__configs-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ttexto__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.tabla__fila--cab { display: none; }
	.tabla__fila { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 18px 20px; }
	.tabla__celda[data-etiqueta]::before { content: attr(data-etiqueta); display: block; margin-bottom: 2px; font-family: var(--amcham-font-heading); font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; color: #858585; }
	.tabla__celda--espacio::before { content: none; }
	.espacios-grid { grid-template-columns: minmax(0, 1fr); }
	.ttexto__grid, .ttexto__grid--3 { grid-template-columns: minmax(0, 1fr); }
	.ttexto > .sec-head { margin-bottom: 28px; }   /* 29 oct 2026 (Johann): 28 del titulo al contenido */   /* en movil tambien 28; era 20 */
	.espacio--ficha .espacio__foto { height: 220px; }
	.espacio--ficha .espacio__cuerpo, .espacio--lado .espacio__cuerpo { padding: 24px 22px 26px; }
	.espacio--tarjeta .espacio__foto { height: 200px; }
	.espacio__configs-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 20 oct 2026: banda navy DEBAJO de la tarjeta de anillos con el logo de la red y la nota dentro
   (Quiénes Somos, «Una red global» → logo de AACCLA). El logo es blanco/celeste y necesita fondo oscuro.
   Sin logo, la nota se sigue pintando suelta como siempre. */
.anillos__banda { display: flex; align-items: center; column-gap: 48px; padding: 32px 40px; background: var(--amcham-color-navy); border-radius: var(--amcham-radius); }
.anillos__logo { flex: 0 0 auto; }
.anillos__logo img { display: block; width: auto; height: 96px; max-width: 100%; }
.anillos__banda .anillos__nota { flex: 1 1 0; min-width: 0; margin: 0; color: #fff; }
.anillos__banda .anillos__nota a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.anillos__banda .anillos__nota a:hover { text-decoration-thickness: 2px; }
@media (max-width: 767px) { .anillos__banda { flex-direction: column; align-items: flex-start; row-gap: 22px; padding: 26px 22px; } .anillos__logo img { height: 76px; } }