/* ============================================================================
   espejo.css — capa ESPEJO: acerca la presentación visual del preview al sitio
   actual del cliente (www.sealeassociates.com). Es la ÚLTIMA hoja del <head>
   en las 641 páginas (la inyecta _tools/pase-espejo-link.js), por eso gana los
   empates de cascada contra los 8-9 bloques <style> apilados de cada página.

   Regla de la casa: el baseline es SU sitio, medido, no nuestro gusto.
   Medidas del cliente (17-ago-2026, 1280px / 390px):
     header 104px (75 móvil), logo 200x27 (133x18), nav 12px/400 uppercase,
     contenedor 1160 @ x=60 (padding 20 en móvil),
     h1 48/52.8 700 #333 con guión navy 48x12 a la izquierda (24/26.4 móvil),
     h2 36/39.6 (22), h3 30/33 (20), p 18-19.2 / 1.5 gris #68696f (16.8; el cliente usa #85868c, que reprueba AA),
     footer #203864 p 12.8px (medido 9-sep; antes decia 16px y era falso), botón navy cuadrado.
   Los `!important` son deliberados: esta capa es una piel que debe ganarle a
   9 bloques de parches cuyo orden es lotería (ver HANDOFF-QA-TIPOGRAFIA).
   Iterar AQUÍ, en un solo archivo; nunca en las 641 páginas.
   ============================================================================ */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root{
  --navy:#203864;
  --ink:#333;
  /* 16-sep (Luis): gris de texto AA en vez del #85868c del cliente (3.63:1, reprobaba AA en
     66-97% del texto de cuerpo). #68696f = 5.47:1 en blanco y 4.63:1 en los paneles beige
     #edece9 (el #6b6c72 daba 4.43 ahí). Iconos del header siguen en #85868c. */
  --muted:#68696f;
  --esp-gris:#68696f;
  /* 19-ago (QA medido): la línea del header blanco del cliente es rgb(223,219,210)
     sólida, no un negro al 8%; y la sombra de sus tarjetas (home: servicios,
     clientes, chips) es 0 20px 20px rgba(0,0,0,.15) con radio 4 — la nuestra
     (0 2px 14px .09) casi no se veía. Las FAQ/case-cards usan otra (shadow-md,
     más abajo). */
  --esp-linea:#dfdbd2;
  --esp-sombra:0 20px 20px rgba(0,0,0,.15);
  --esp-sombra-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --esp-header:104px;
  --maxw:1280px;
}

/* ---- 2. Contenedor: FLUIDO hasta 1400 útiles (padding 60), como el cliente -- */
/* 20-ago (QA medido; Luis cazó "la navegación se ve distinta" a ~1509): el
   contenedor del cliente NO es fijo — útil = min(1400, vw-120) en TODAS las
   páginas ("Our Services" w=1160 @1280 · 1389 @1509 · 1400 x=260 @1920;
   our-team p w=1349 @1509). El espejo se calibró a 1280, que es el ÚLTIMO
   pixel donde ambos miden igual. Box 1520 = 1400 + 2×60; a ≤1280 se comporta
   idéntico al 1280 anterior (el vw recorta antes que el max-width).
   Sustituye el .wrap-team{1440} de Saulo (18-ago) y el body:has(.hero)
   .wrap{1440} de Yun (18-ago): aproximaciones de esto mismo medidas a 1920. */
.wrap,.wrap-team{max-width:1520px !important;padding-left:60px !important;padding-right:60px !important;box-sizing:border-box}

/* ---- 3. Header ---------------------------------------------------------- */
/* 18-ago Yun: falta la línea blanca al fondo del header — medido en el
   cliente: border-bottom:1px solid rgba(255,255,255,.3). Solo home (header.site,
   familia hn-*); la familia mn-* interior ya tiene su propia línea. */
header.site{border-bottom:1px solid rgba(255,255,255,.3) !important}
/* 18-ago, medido en vivo con Yun: el header del cliente usa 20px de padding a
   cada lado (no 60 como el resto de .wrap) en las dos familias de header,
   home e interior. Solo el header — el cuerpo de la página sigue en 60/1160
   hasta que se confirme aparte. */
/* 20-ago: el header del cliente NO acompaña al cuerpo a 1520 — su caja es 1440
   + pad 20 (logo x=20 @1280 · 55 @1509 · 260 @1920, medido idéntico en home e
   interiores). Antes coincidía vía el body:has(.hero){1440}; explícito ahora
   que el cuerpo pasa a 1520. */
header.site .wrap{max-width:1440px !important;padding-left:20px !important;padding-right:20px !important}
/* 19-ago (QA medido): en las 76 páginas con hero (familia hn, header.top) el
   header medía 141px: el CSS de página le pone padding:18px 0 al header.top y
   encima .nav mide 104 → 18+104+18. El cliente mide 104 en TODAS sus páginas,
   y como la franja de foto es de 246 con el header flotando encima, a nosotros
   nos quedaban ~105px de foto visibles contra ~142 del cliente. Padding fuera. */
header.top:has(.nav){padding:0 !important}
/* …y el mismo padding lateral de 20 que home/mn (el cliente: logo a x=20 en
   todas las páginas; aquí el .wrap-team.nav traía 60 → logo a x=60). */
header.top .wrap-team.nav{max-width:1440px !important;padding-left:20px !important;padding-right:20px !important}
/* …y la línea del pie del header sobre la foto: cliente 1px rgba(255,255,255,.3)
   en TODAS sus páginas con foto; aquí salía #e2e0db del CSS de página. Con
   scroll (fondo blanco) se queda la gris. */
header.top:has(.nav):not(.scrolled){border-bottom:1px solid rgba(255,255,255,.3) !important}
.nav{height:var(--esp-header) !important}
.nav .logo img{height:27px !important}
/* 19-ago (sesión Yun, "el menú original tiene más espacio entre elementos"),
   MEDIDO en su home: el cliente NO usa gap — separa con 8px de padding
   horizontal DENTRO de cada enlace (`padding:32px 8px`, gap normal). Con eso
   sus cajas miden 72/70/63/85/69/70 y las nuestras 56/54/47/69/53/54: la
   diferencia es exactamente los 16px de padding (56+16=72, 69+16=85). Se
   copia su reparto. El TAMAÑO de letra sigue en 12 (decisión #3 de Luis,
   abierta) — esto solo toca el espaciado, que es separable. */
.nav>ul{gap:0 !important;align-items:stretch !important}
/* "Insights" es el único del menú sin submenú: va como <a> inline-block,
   los otros cinco son <button class="hn-btn"> en flex. Con padding chico la
   diferencia no se notaba; al subirlo a 32px el inline-block se alineó por
   baseline y quedó más arriba que los demás. Se igualan los dos: el <li>
   estira y su hijo centra, sea <a> o <button>. */
.nav>ul>li{display:flex !important;align-items:stretch !important}
/* 18-ago Saulo subió el menú a 13.5px. 19-ago (QA medido): el cliente mide 12px
   en las dos familias (qa-tipografia-vs-cliente lo cuenta como 8 diferencias).
   Regla de la casa = su sitio medido, no el gusto: vuelve a 12. Si Luis lo
   quiere en 13.5, es cambiar este número y el de .mn-btn más abajo. */
.nav>ul>li>a,.nav>ul>li>.hn-btn{display:flex !important;align-items:center !important;font-size:12px !important;font-weight:400 !important;letter-spacing:0 !important;line-height:20px !important;text-transform:uppercase !important;padding:32px 8px !important;border-bottom:0 !important}
.nav>ul>li>.hn-btn .car{display:none !important}
/* Celdas del lado derecho: bandera | búsqueda | (menú), separadas por línea a toda la altura */
.nav-right{gap:0 !important;height:var(--esp-header);align-items:stretch !important;border-right:1px solid rgba(255,255,255,.28)}
.nav-right>*{align-items:center;justify-content:center;padding:0 30px !important;border-left:1px solid rgba(255,255,255,.28);margin:0 !important}
.nav-right>*:not(.burger){display:flex !important}
/* Cliente: bandera primero, lupa después (nuestro markup ya va en ese orden; se anula el order:-1 de la lupa) */
.nav-right .icon-btn.ss-open{order:0 !important}
.nav-right .langsel .lang-btn{padding:0 !important}
.nav-right .langsel .flag{width:30px !important;height:30px !important;flex-basis:30px !important}
.nav-right .langsel .car{color:#fff;font-size:14px !important;margin-left:8px}
/* 18-ago Yun: la lupa del cliente es más grande/gruesa y su caja cierra a los
   dos lados (nosotros solo teníamos la línea izquierda) — línea derecha arriba,
   ícono más grande con trazo más grueso aquí. */
.nav-right .icon-btn svg{width:22px !important;height:22px !important;stroke-width:2.4 !important}
.nav-right .burger{border-left:1px solid rgba(255,255,255,.28)}
/* Header BLANCO en páginas sin foto (transacciones, perfiles, casos): igual que el cliente */
body:has(.pagehero:not(.pagehero--img)) header.top,
body:has(.pagehero:not(.pagehero--img)) header.top.scrolled{background:#fff !important;box-shadow:none !important;border-bottom:1px solid var(--esp-linea) !important}
body:has(.pagehero:not(.pagehero--img)) header.top .logo-white{display:none !important}
body:has(.pagehero:not(.pagehero--img)) header.top .logo-navy{display:block !important}
body:has(.pagehero:not(.pagehero--img)) header.top .nav>ul>li>a,
body:has(.pagehero:not(.pagehero--img)) header.top .nav>ul>li>.hn-btn{color:#8d8d94 !important}
/* 15-sep (Yun, capturó "Services" gris en hover sobre header blanco): el cliente
   pasa el ítem a navy (#203864, = var(--navy)) al pasar el mouse encima, en TODO
   header blanco — verificado contra template_main.min.css del cliente
   (.atmc-header_menu>.hs-menu-wrapper>ul>li:hover>a{color:#203864}, igual que
   .active). Nuestro CSS solo tenía el gris base, nunca el hover. */
body:has(.pagehero:not(.pagehero--img)) header.top .nav>ul>li>a:hover,
body:has(.pagehero:not(.pagehero--img)) header.top .nav>ul>li>.hn-btn:hover{color:var(--navy) !important}
body:has(.pagehero:not(.pagehero--img)) header.top .nav-right>*{border-left-color:var(--esp-linea)}
body:has(.pagehero:not(.pagehero--img)) header.top .icon-btn,
body:has(.pagehero:not(.pagehero--img)) header.top .langsel .car{color:#333 !important}
body:has(.pagehero:not(.pagehero--img)) header.top .burger span{background:#333 !important}
/* Header con scroll (fondo blanco) en páginas con foto: mismos grises que el cliente */
header.top.scrolled .nav>ul>li>a,header.top.scrolled .nav>ul>li>.hn-btn{color:#8d8d94 !important}
/* mismo hallazgo que arriba, versión con-scroll (home + las 3 de servicio + Clients/Family-Owned) */
header.top.scrolled .nav>ul>li>a:hover,
header.top.scrolled .nav>ul>li>.hn-btn:hover{color:var(--navy) !important}
header.top.scrolled .nav-right>*{border-left-color:var(--esp-linea)}

/* ---- 3b. Header de la familia mn-* (556 internas: transacciones, perfiles, casos, hubs).
        Otro markup: header.top > .wrap > a.brand img.brand-logo · .langsel · .navtog · .ss-open
        (17-ago: pase-buscador-fuera.js sacó .ss-open de dentro de nav.mainnav — hermano
        ahora, no descendiente, porque colapsado en móvil escondía la lupa con todo el menú) ·
        nav.mainnav (.mn-btn) */
header.top:has(nav.mainnav){padding:0 !important}
/* 18-ago Yun: la línea blanca del fondo del header (misma que se agregó en
   home) también le falta a las 632 páginas mn-* — medido igual en el
   cliente (border-bottom:1px solid rgba(255,255,255,.3)) en una página
   interior. Solo el estado transparente/con-foto: las páginas de header
   blanco (transacciones/perfiles, .pagehero:not(.pagehero--img)) ya tienen
   su propia línea gris más abajo, con selector más específico que gana. */
header.top:has(nav.mainnav){border-bottom:1px solid rgba(255,255,255,.3) !important}
header.top:has(nav.mainnav) .wrap{height:var(--esp-header);max-width:1440px !important;padding:0 20px !important}
.brand-logo{height:27px !important}
.mn-btn,nav.mainnav>a{font-size:12px !important;font-weight:400 !important;letter-spacing:0 !important;text-transform:uppercase !important;padding:6px 8px !important;line-height:20px !important}
nav.mainnav .mn-btn>.car{display:none !important}
/* 19-ago (QA medido, Luis lo cazó en /insights): en escritorio la lupa salía
   ANTES de la bandera (lupa x1065, bandera x1144) porque el CSS de página da
   .langsel{order:3} y aquí la lupa iba en order:2. Cliente: bandera x1087 →
   lupa x1174 (bandera | lupa), igual que el home. Orden explícito. */
header.top:has(nav.mainnav) .langsel{display:flex;align-items:center;height:var(--esp-header);padding:0 30px;border-left:1px solid rgba(255,255,255,.28);order:2 !important}
header.top:has(nav.mainnav) .langsel .flag{width:30px !important;height:30px !important;flex-basis:30px !important}
header.top:has(nav.mainnav) .ss-open{height:var(--esp-header);padding:0 30px !important;margin-left:0;border-left:1px solid rgba(255,255,255,.28);border-right:1px solid rgba(255,255,255,.28);order:3 !important;color:#fff}
header.top:has(nav.mainnav) .ss-open svg{width:22px;height:22px;stroke-width:2.4}
nav.mainnav{margin-left:auto !important;margin-right:14px}
/* Variante BLANCA (páginas .pagehero sin foto): logo navy, nav gris #8d8d94, líneas grises */
body:has(.pagehero:not(.pagehero--img)) .brand-logo{content:url('/assets/img_037.png')}
body:has(.pagehero:not(.pagehero--img)) .mn-btn,
body:has(.pagehero:not(.pagehero--img)) nav.mainnav>a{color:#8d8d94 !important}
body:has(.pagehero:not(.pagehero--img)) .mn-btn:hover,
body:has(.pagehero:not(.pagehero--img)) nav.mainnav>a:hover{color:var(--navy) !important}
body:has(.pagehero:not(.pagehero--img)) .navtog,
body:has(.pagehero:not(.pagehero--img)) .langsel .car{color:#333 !important}
/* 19-ago (QA medido): la lupa del cliente sobre header blanco es gris #85868c (no #333). */
body:has(.pagehero:not(.pagehero--img)) header.top:has(nav.mainnav) .ss-open{color:#85868c !important}
body:has(.pagehero:not(.pagehero--img)) header.top:has(nav.mainnav) .langsel,
body:has(.pagehero:not(.pagehero--img)) header.top:has(nav.mainnav) .ss-open{border-left-color:var(--esp-linea);border-right-color:var(--esp-linea)}
/* Móvil: .ss-open ahora es hermano de .langsel/.navtog en el mismo flex — orden
   bandera(1) · lupa(2) · hamburger(3), visible siempre (ya no atrapada dentro
   de nav.mainnav, que colapsa con display:none hasta abrir el menú). */
@media (max-width:899px){
  header.top:has(nav.mainnav) .langsel{order:1 !important}
  header.top:has(nav.mainnav) .ss-open{order:2 !important;height:auto !important;padding:0 12px !important;margin-left:0 !important;border-left:1px solid rgba(255,255,255,.28)}
  header.top:has(nav.mainnav) .navtog{order:3 !important}
}

/* ---- 4. Franja de foto en internas (.page-hero) — SIN texto, 246px como el cliente.
        El título vive ahora en el cuerpo (bloque .pt), lo mueve pase-hero-a-cuerpo.js. */
/* 10-sep (Yun): "la foto se ve cortada". Medido su /about-us/our-culture: la
   franja es de 250px con `background-position: 50% 0%` — o sea pegada ARRIBA.
   La nuestra iba en `center` (50% 50%), y con `cover` eso recorta por arriba y
   por abajo: la cima de la montaña se perdía. Alto 246 -> 250 en el mismo pase. */
.page-hero.page-hero--espejo{min-height:250px !important;height:250px !important;padding:0 !important;display:block !important}
.page-hero.page-hero--espejo .wrap-team{display:none !important}
/* Base que las 76 páginas ya traían en su propio CSS por página (position/content del
   ::before) y que los 10 hubs (industrias/insights/reportes) NUNCA tuvieron —  nunca habían
   usado .page-hero antes de este pase. Sin esto el ::before ni se genera: no hay content. */
.page-hero.page-hero--espejo{position:relative !important;overflow:hidden !important}
.page-hero.page-hero--espejo::before{content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important}
/* Velo: solo un degradado arriba para que el nav blanco siga legible sobre la foto (AA);
   el resto de la foto va limpia, como en el sitio del cliente. */
/* La foto de cada página viene por variable: --hero-foto (la pone pase-hero-a-cuerpo.js
   en 18 páginas cuyo url vivía en el CSS) o --hero (58 páginas ya la traían inline). */
.page-hero.page-hero--espejo::before{
  background:linear-gradient(180deg,rgba(15,25,45,.55) 0%,rgba(15,25,45,.18) 104px,rgba(15,25,45,0) 100%),
             var(--hero-foto,var(--hero)) 50% 0%/cover no-repeat !important;
  opacity:1 !important}
.page-hero.page-hero--espejo::after{display:none !important}

/* ---- 5. Bloque de título en el cuerpo (.pt): eyebrow gris + h1 48 con guión navy --- */
.pt{position:relative;padding:44px 0 6px}
.pt-eyebrow{font-size:12px !important;line-height:1.4 !important;letter-spacing:.06em;text-transform:uppercase;color:var(--esp-gris) !important;font-weight:400 !important;margin:0 0 6px !important}
.pt-h1{position:relative;font-size:48px !important;line-height:1.1 !important;font-weight:700 !important;color:#333 !important;margin:0 0 16px !important;text-align:left !important;letter-spacing:0 !important}
.pt-h1::before{content:"";position:absolute;left:-56px;top:24px;width:48px;height:12px;background:var(--navy)}
.crumb{font-size:12px !important;color:var(--esp-gris) !important;margin:22px 0 0 !important;line-height:1.5 !important}
.crumb a{color:var(--esp-gris) !important}

/* ---- 6. Páginas con franja navy (.pagehero: transacciones, perfiles, casos): a blanco --- */
.pagehero:not(.pagehero--img){background:#fff !important;padding:36px 0 0 !important;box-shadow:none !important}
.pagehero:not(.pagehero--img) h1{color:#333 !important;font-size:48px !important;line-height:1.1 !important;margin:.15em 0 0 !important;font-weight:700 !important}
.pagehero:not(.pagehero--img) .crumb,.pagehero:not(.pagehero--img) .crumb a{color:var(--esp-gris) !important}
.pagehero:not(.pagehero--img) .pill,.pagehero:not(.pagehero--img) .pill--flat{background:#fff !important;border-color:#c9cacf !important;color:#6b6c72 !important;font-size:11px !important}
.pagehero:not(.pagehero--img) a.pill:hover{background:var(--navy) !important;color:#fff !important;border-color:var(--navy) !important}
.pagehero:not(.pagehero--img)+.wrap>*:first-child{margin-top:28px !important}
/* ---- 6b. Hubs con foto (10 páginas: industrias/insights/reportes EN+ES, ya migradas a
        .page-hero.page-hero--espejo por pase-hero-a-cuerpo.js) — header transparente
        flotando sobre la foto (como el cliente), no navy sólido pegado arriba. Estas 10
        traían su propio navyhdr+stickyhdr forzando navy sólido (las páginas de industria
        individuales, ya espejadas, no lo tienen). Se anula aquí, con el marcador
        .page-hero--hub para no tocar ninguna otra página. Logo/nav quedan en su blanco
        por defecto (el mismo que usa el header navy/transparente en el resto del sitio). */
/* 19-ago (QA medido, Luis lo cazó en /insights): aquí se quitaba la línea
   (border-bottom:none) y el cliente SÍ la tiene sobre la foto —
   1px rgba(255,255,255,.3) en TODAS sus páginas. Y la lupa se quedaba en #333
   (invisible sobre la foto) porque el selector de abajo buscaba la lupa DENTRO
   de nav.mainnav, de donde pase-buscador-fuera.js ya la había sacado. */
body:has(.page-hero--hub) header.top:has(nav.mainnav){
  position:absolute !important;top:0;left:0;right:0;width:100%;
  background:transparent !important;box-shadow:none !important;border-bottom:1px solid rgba(255,255,255,.3) !important;z-index:50
}
body:has(.page-hero--hub) .mn-btn,body:has(.page-hero--hub) nav.mainnav>a{color:#fff !important}
body:has(.page-hero--hub) .navtog,body:has(.page-hero--hub) .langsel .car{color:#fff !important}
body:has(.page-hero--hub) header.top:has(nav.mainnav) .ss-open{color:#fff !important}
body:has(.page-hero--hub) header.top:has(nav.mainnav) .ss-open,body:has(.page-hero--hub) .langsel{border-left-color:rgba(255,255,255,.28) !important;border-right-color:rgba(255,255,255,.28) !important}

/* ---- 6c. Hubs que el cliente presenta distinto (marcados por pase-marcadores-hubs.js, 19-ago) --- */
/* Casos (EN+ES): cliente = header BLANCO con logo navy (sobre fondo blanco), banda 246
   completa, eyebrow + h1 + lead CENTRADOS (h1 x250 w780, lead 780 a 19.2px). Esta página es
   familia hn (header.top > .wrap-team.nav, logos .logo-white/.logo-navy). */
body:has([data-hub="casos"]) header.top{position:static !important;background:#fff !important;box-shadow:none !important;border-bottom:1px solid var(--esp-linea) !important}
body:has([data-hub="casos"]) header.top .logo-white{display:none !important}
body:has([data-hub="casos"]) header.top .logo-navy{display:block !important}
body:has([data-hub="casos"]) header.top .nav>ul>li>a,
body:has([data-hub="casos"]) header.top .nav>ul>li>.hn-btn{color:#8d8d94 !important}
body:has([data-hub="casos"]) header.top .nav-right>*,body:has([data-hub="casos"]) header.top .nav-right{border-color:var(--esp-linea) !important}
body:has([data-hub="casos"]) header.top .icon-btn,body:has([data-hub="casos"]) header.top .langsel .car{color:#85868c !important}
body:has([data-hub="casos"]) header.top .burger span{background:#333 !important}
body:has([data-hub="casos"]) .page-hero--espejo::before{background:var(--hero-foto,var(--hero)) center/cover no-repeat !important}
/* Casos + Industrias: título centrado (cliente: LABEL centrado, h1 center x250 w780, p center w780) */
body:has([data-hub="casos"]) .pt,body:has([data-hub="industrias"]) .pt{text-align:center;max-width:780px;margin:0 auto}
body:has([data-hub="casos"]) .pt-h1,body:has([data-hub="industrias"]) .pt-h1{text-align:center !important}
body:has([data-hub="casos"]) .pt-h1::before,body:has([data-hub="industrias"]) .pt-h1::before{display:none}
body:has([data-hub="casos"]) .pt-eyebrow,body:has([data-hub="industrias"]) .pt-eyebrow{text-align:center}
body:has([data-hub="casos"]) main .lead,body:has([data-hub="industrias"]) main .lead{max-width:780px !important;margin:0 auto !important;text-align:center !important}
/* Insights (EN+ES): cliente = hero ALTO (bloque de 603px bajo el header, h1 BLANCO 48px,
   lead blanco) + tarjeta blanca de newsletter flotando a la derecha, TODO centrado verticalmente
   dentro de la foto (portal 44543379, formId propio de /insights, distinto al del home).
   9-sep: Luis autorizó meter el formulario (era decisión de contenido pendiente, ver README
   "Decisiones de Luis abiertas #4" — ya se resolvió, se puede quitar de esa lista).
   🪤 1er intento (v=62) puso el grid en el .wrap SIGUIENTE al hero con margen negativo
   (el truco que usan casos/industrias para textos cortos) — con texto+tarjeta el bloque
   mide ~420px y el cálculo a ojo no cerraba: la tarjeta se salía del hero por abajo.
   v=63: el grid vive DENTRO del <section> del hero (ya no es un elemento vacío solo-fondo
   para esta página) y el hero es flex con align-items:center — se centra solo, sin adivinar
   px, sin importar cuánto mida el contenido.
   🪤 v=64: centrar con height:640 fijo ignora que el header (sticky, ~97px) se monta ENCIMA
   del hero — con la tarjeta completa (~470px) el centrado la pegaba contra el header.
   v=65: alto AUTOMÁTICO por padding (header + aire arriba, aire abajo) en vez de una altura
   fija — se ajusta solo sin importar cuánto mida el contenido, nunca se pega al header ni
   se corta abajo. */
body:has([data-hub="insights"]) .page-hero--espejo{
  height:auto !important;min-height:0 !important;
  display:flex !important;align-items:center !important;
  padding:150px 0 90px !important;
}
/* background-position "center top" en vez de "center": con center/cover el crop
   recortaba la punta de la montaña (la parte de arriba de la foto). Bajando el
   encuadre (ancla arriba) se ve la punta completa, se pierde paisaje de abajo en vez. */
/* Velo, medido con qa-contraste-header (regla 4): la franja de arriba sube de .55 a .66
   para que el menú pase AA (con .55 el peor item daba 4.1:1 contra umbral 4.5), y se
   agrega una diagonal HORIZONTAL que oscurece solo la izquierda, donde viven el h1 y el
   lead — la derecha se deja limpia porque ahí va la tarjeta blanca del form. Asimétrica
   a propósito: oscurecer parejo fue exactamente la regresión de v43. */
body:has([data-hub="insights"]) .page-hero--espejo::before{
  background:linear-gradient(180deg,rgba(15,25,45,.66) 0%,rgba(15,25,45,.24) 118px,rgba(15,25,45,0) 42%),
             linear-gradient(90deg,rgba(15,25,45,.58) 0%,rgba(15,25,45,.34) 38%,rgba(15,25,45,0) 58%),
             linear-gradient(0deg,rgba(15,25,45,.55) 0%,rgba(15,25,45,0) 45%),
             var(--hero-foto,var(--hero)) center top/cover no-repeat !important}
body:has([data-hub="insights"]) .ins-hero-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:60px;align-items:center}
body:has([data-hub="insights"]) .pt{padding-bottom:0 !important}
body:has([data-hub="insights"]) .pt-h1{color:#fff !important}
/* El cliente no trae la barrita navy antes del h1 en este hero (es un elemento nuestro,
   igual que en casos/industrias arriba, que ya la ocultan). */
body:has([data-hub="insights"]) .pt-h1::before{display:none}
body:has([data-hub="insights"]) .crumb,body:has([data-hub="insights"]) .crumb a{color:rgba(255,255,255,.85) !important}
body:has([data-hub="insights"]) .ins-hero-lead{color:rgba(255,255,255,.92) !important;font-size:18px !important;line-height:1.6 !important;max-width:480px;margin:14px 0 0}
/* Valores calcados de .atmc-card / .atmc-card_footer / .bg-dark / .atmc-bg-pattern
   del CSS real del cliente (template_main.min.css): padding 3rem, sombra 0 20px 20px
   rgba(0,0,0,.15), footer que sangra a los bordes con margin 3rem -3rem -3rem sobre
   #203864 (= nuestro --navy) + pattern.png en repeat. Va SIEMPRE visible (franja
   decorativa), no depende de que el <div> traiga texto — el <small> del cliente
   también sale vacío en su sitio en vivo. */
body:has([data-hub="insights"]) .ins-hero-card{background:#fff;border-radius:4px;padding:3rem;box-shadow:0 20px 20px rgba(0,0,0,.15)}
body:has([data-hub="insights"]) .ins-hero-card h3{color:#1a2b45 !important;font-size:22px !important;line-height:1.25 !important;font-weight:700 !important;margin:0 0 18px !important}
body:has([data-hub="insights"]) .ins-hero-card-footer{display:block;margin:3rem -3rem -3rem;padding:2rem 3rem;background:var(--navy) url('/assets/patterns/swirl.png') repeat;border-radius:0 0 4px 4px;color:#fff;font-size:13px;line-height:1.6}
body:has([data-hub="insights"]) .ins-hero-card-footer p{color:#fff !important;font-size:13px !important;margin:0}
/* 9-sep, hallazgo de Yun (c632ecdf, home): este portal (44543379) sirve sus forms
   embebidos como IFRAME. Ninguna regla de espejo.css alcanza el documento de adentro —
   no es un problema de especificidad (el intento anterior con #hs-insights-form... nunca
   iba a funcionar). El fix real es inyectar un <style> DENTRO del iframe vía onFormReady
   (ver el script en el HTML). Mismo patrón que el newsletter del home y que el Submit de
   Contact Us (EJECUCION.md), para no dejar tres soluciones distintas al mismo problema. */

/* "FIND WHAT YOU NEED": calcado de .atmc-menu-03_repeater del cliente (4 links de
   ancla a las secciones de abajo). Inactivo blanco + borde, hover navy relleno.
   scroll-margin-top en los 4 destinos para que el header sticky (~97px) no los tape
   al saltar por ancla. */
body:has([data-hub="insights"]) #us-monthly-reports,
body:has([data-hub="insights"]) #mexico-monthly-reports,
body:has([data-hub="insights"]) #colombia-monthly-reports,
body:has([data-hub="insights"]) #news-and-releases{scroll-margin-top:112px}
body:has([data-hub="insights"]) .ins-tabs{margin:36px 0 8px;text-align:center}
body:has([data-hub="insights"]) .ins-tabs-label{font-size:13px !important;font-weight:700;letter-spacing:.1em;color:#68696f !important;margin:0 0 16px}
body:has([data-hub="insights"]) .ins-tabs-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
body:has([data-hub="insights"]) .ins-tabs-nav a{display:block;padding:14px 16px;background:#fff;border:1px solid #f0f1f3;border-radius:4px;color:#68696f !important;font-weight:500;font-size:15px;text-align:center}
/* !important: la regla global "main a:not([class*=btn])..." (sección 7, botones sin
   texto) le gana en especificidad a un simple a:hover de acá — sin esto el texto se
   queda navy y desaparece sobre el fondo navy del hover. */
body:has([data-hub="insights"]) .ins-tabs-nav a:hover{background:var(--navy);border-color:var(--navy);color:#fff !important}
@media (max-width:767px){
  body:has([data-hub="insights"]) .ins-tabs-nav{grid-template-columns:1fr}
}

/* Más aire entre secciones de reportes (Excel/QA lo pidió más espaciado) y el botón
   "View All Reports" con el compartimento del chevron separado por una línea, calcado
   de .atmc-btn.atmc-btn-icon del cliente (icono en caja de 3rem a la derecha con
   border-left). El span ya existe en el HTML (el ›); solo se redistribuye el layout. */
body:has([data-hub="insights"]) .sec-head{margin-top:70px !important}
body:has([data-hub="insights"]) .rep-grid,
body:has([data-hub="insights"]) .tcar{margin-bottom:32px !important}
body:has([data-hub="insights"]) .sec-cta{position:relative;padding:14px 56px 14px 22px !important;border-radius:4px !important}
body:has([data-hub="insights"]) .sec-cta span{position:absolute;right:0;top:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;font-size:18px;border-left:1px solid rgba(255,255,255,.35)}

@media (max-width:900px){
  body:has([data-hub="insights"]) .page-hero--espejo{height:auto !important;min-height:0 !important;padding:120px 0 48px}
  body:has([data-hub="insights"]) .ins-hero-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:767px){
  body:has([data-hub="insights"]) .page-hero--espejo{padding:100px 0 40px}
}

/* ---- 7. Escala tipográfica del contenido (cliente: 48 / 36 / 30 / 18-19 gris) --- */
h2,.section-h2{font-size:36px !important;line-height:1.1 !important;font-weight:700 !important;color:#333 !important;letter-spacing:0 !important;text-align:left !important}
h3{font-size:30px !important;line-height:1.1 !important;font-weight:700 !important;color:#333 !important;letter-spacing:0 !important}
p{font-size:18px !important;line-height:1.6 !important;color:var(--esp-gris) !important;letter-spacing:0 !important}
li{font-size:18px;line-height:1.6;color:var(--esp-gris)}
/* 19-ago (sesión Yun, "botones se ven sin texto" en insights): esta regla
   pintaba de navy CUALQUIER enlace del cuerpo — incluidos los botones de
   fondo navy (.sec-cta, .rep-btn, .duo-btn, .indbtn, .nr-btn, .btn-navy…),
   que quedaban navy sobre navy = texto invisible. La lista fija de
   excepciones no escalaba: se pasa a patrón, que cubre las 9 clases de
   botón que existen hoy y las que vengan. */
main a:not([class*="btn"]):not([class*="cta"]):not(.pill):not(.tag-i){color:var(--navy)}
/* Excepciones donde el cliente usa otro tamaño */
.card h3,.cs-card h3,.svc-card h3,.news-card h3,.tomb h3{font-size:24px !important}
.card p,.cs-card p,.svc-card p,.faq-item p,.leaders-card p,.news-card p{font-size:16px !important;line-height:1.6 !important}
.eyebrow,p.eyebrow,.leaders,.crumb,.pill,.tag-i,.kh-stat .l{font-size:12px !important}
/* h2 de barra lateral con guión inferior navy (cliente: 80x6). 18-ago Saulo:
   "Representative Case Studies" (servicios) es el mismo patrón — confirmado
   con captura del cliente, sí tiene la línea. */
/* 20-ago (Saulo+Yun): las 2 primeras columnas del chx-grid no alineaban arriba
   -- el h2 de la derecha traía el margin-top:2.2em de default (base.css h2{})
   mientras la izquierda arranca en 0 (.answer{margin-top:0}). */
.chx-grid>div>h2,.svc-side h2,.side h2,h2:has(+.case-grid-2){position:relative;padding-bottom:16px !important;margin-top:0 !important;margin-bottom:26px !important}
.chx-grid>div>h2::after,.svc-side h2::after,.side h2::after,h2:has(+.case-grid-2)::after{content:"";display:block;position:absolute;left:0;bottom:0;width:80px;height:6px;background:var(--navy)}
/* Transacciones: sus subtítulos son 30 (h3 del cliente); los nuestros son h2 */
.tx-2col h2,.tx-body h2{font-size:30px !important;margin:1.4em 0 .4em !important}
/* 20-ago (Saulo+Yun): "Similar Transactions" comparte la clase .mi con el
   box de market intelligence (fondo crema, borde navy) -- se pide quitarle
   SOLO a este el fondo crema. Aislado por id, no toca el otro uso de .mi. */
#similar-transactions.mi{background:none !important;border-left:0 !important;padding:22px 0 0 !important}
.tx-2col{grid-template-columns:260px 1fr !important;gap:56px !important;margin-top:20px !important}
.tx-left{max-width:260px !important}
/* 19-ago (QA medido, G1-7, 410 páginas): el h1 ya vive DENTRO de .tx-right
   (pase-h1-a-columna-tx.js), como el cliente (h1 x400 w740 a la altura del
   tombstone). Aquí su presentación; el .pagehero se queda con crumb + pills. */
.tx-right>h1:first-child{font-size:48px !important;line-height:1.1 !important;font-weight:700 !important;color:#333 !important;margin:0 0 22px !important;letter-spacing:0 !important}
.pagehero:not(.pagehero--img):not(:has(h1)){padding-bottom:0 !important}
/* Project Leaders: cliente caja 260×570 con sombra 0 0 10px rgba(0,0,0,.3),
   título "PROJECT LEADERS" 20px bold navy (no uppercase gris), fotos 216×160
   apaisadas (cover), nombre y "Connect on LinkedIn" a 15px. Nosotros: 84×84,
   título 16 gris, link 12.5. */
.leaders-card{box-shadow:0 0 10px rgba(0,0,0,.3) !important;padding:20px 22px !important;border:0 !important}
.leaders-card .leaders{font-size:20px !important;line-height:1.1 !important;font-weight:700 !important;color:var(--navy) !important;text-transform:uppercase !important;letter-spacing:0 !important;text-align:center;margin:0 0 16px !important}
.leader-card{margin:0 0 18px !important}
.leader-card .ld-main{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;text-decoration:none}
.leader-card .ld-main img{width:100% !important;height:160px !important;object-fit:cover !important;object-position:50% 40% !important;border-radius:0 !important;display:block !important}
.leader-card .ld-name{font-size:15px !important;font-weight:400 !important;color:var(--navy) !important;text-align:center}
.leader-card .ld-li{font-size:15px !important;display:flex !important;justify-content:center !important;align-items:center !important;gap:6px;margin-top:4px}
/* 20-ago (Saulo+Yun): el ícono de "Connect on LinkedIn" invierte color --
   antes suelto en navy sobre blanco, ahora círculo sólido navy con el ícono
   en blanco (fill="currentColor" en el path del svg del cliente). */
.leader-card .ld-li svg{background:var(--navy) !important;color:#fff !important;border-radius:50% !important;width:22px !important;height:22px !important;padding:5px !important;box-sizing:border-box !important;flex:none !important}
/* Móvil: el cliente pone h1 + texto primero y el tombstone después. */
@media (max-width:767px){
  .tx-2col{display:flex !important;flex-direction:column !important}
  .tx-right{order:1}.tx-left{order:2}
  .tx-right>h1:first-child{font-size:24px !important}
}

/* ---- 8. Tarjetas y acordeones: sombra suave, sin borde (como el cliente) ---- */
.card,.cs-card,.svc-card,.news-card{border:0 !important;box-shadow:var(--esp-sombra) !important;border-radius:0 !important}
/* 18-ago Saulo (Culture): guión navy a la izquierda de "Our Values" (mismo
   lenguaje visual que el .pt-h1 de los títulos de página); tarjetas de valor
   con sombra en vez de línea, foto rectangular (16:10) en vez de cuadrada. */
.values-section h2{position:relative;padding-left:60px}
.values-section h2::before{content:"";position:absolute;left:0;top:.4em;width:40px;height:10px;background:var(--navy)}
.value-card{border:0 !important;box-shadow:0 10px 30px rgba(16,28,48,.18) !important}
/* Tarjetas de Our Culture, con las medidas que pidio el cliente en su Excel. La
   celda describe nuestros valores REALES (medido 8-sep: padding lateral 22px,
   titulos 30px, body 18px, imagen 195px de alto), asi que se aplican tal cual:
   padding lateral a 47px, imagen a 236px, +28px entre imagen y titulo, titulos a
   23.5px, body a 16.5px, mas aire abajo y la sombra reforzada.
   La imagen va por aspect-ratio, no por alto fijo, para que siga siendo fluida:
   a los 312px de ancho de la tarjeta, 312/1.32 = 236px. */
.vimg{aspect-ratio:1.32 !important}
.value-card .vbody{padding:50px 47px 34px !important}
/* Espacio entre parrafos de los intros. El molde traia `margin:0 0 6px`, que a
   18px de texto deja los parrafos pegados: medido 6px de separacion contra los
   22px que usan otros parrafos de la MISMA pagina. La celda del Excel lo reporta
   en PE/Family Office y aclara que pasa igual en las otras dos de clientes; la
   clase vive en 74 paginas y el defecto es el mismo en todas, asi que se corrige
   en el molde. */
.intro-lead{margin-bottom:18px !important}
/* Perfiles de director. La celda del Excel pide subir "Founder & President", que
   estaba en 18px contra los 36px del sitio del cliente (aplica a los 26 perfiles).
   Se sube TAMBIEN el nombre: su sitio lo tiene en 48px y el nuestro en 32px, asi
   que agrandar solo el cargo lo dejaria mas grande que el nombre. El cargo pasa a
   tinta: a 36px, el gris claro de antes se leia lavado. El h1 conserva el navy,
   que es identidad de marca y la celda no lo menciona. */
/* La linea que indica en que pestania estas (celda del Excel: "Falta la linea que
   indica en que pestania estamos"). Nuestro menu no lo marcaba de ninguna forma;
   el unico aria-current del HTML estaba en el selector de idioma. La clase `hn-on`
   la pone _tools/nav-pestana-activa.js en 627 paginas (las 13 restantes -home,
   careers y legales- no cuelgan de ninguna seccion del menu).
   La linea se dibuja con ::after y no con border, para que no mueva el layout. */
.hn-on{position:relative}
.hn-on>.hn-btn,.hn-on>.mn-btn,a.hn-on{color:#fff !important}
/* 10-sep (Yun): la rayita iba ABAJO del menú y en `currentColor`, así que sobre
   un hero con foto se volvía blanca y se perdía con el fondo. Medido el suyo en
   /about-us/our-team: es un `a::after` de 2px, del ancho completo del item, en
   `top:0` — o sea ARRIBA, pegado al borde superior del header. Su color es navy
   (32,56,100); Yun pide NEGRO para que no se pierda cuando el fondo cambia.
   🪤 Va acotada a `header.top`: nav-pestana-activa.js pone `hn-on` tambien en el
   enlace del FOOTER (en /insights hay dos, uno a y=36 y otro a y=4912). Con la
   rayita en currentColor y abajo no se notaba; en negro y arriba dibujaba una
   raya negra sobre el navy del pie. */
/* 16-sep (Luis): "la rayita negra no me gusta" ⇒ vuelve al navy medido del cliente
   (32,56,100). Sustituye el negro que se pidió el 10-sep. */
header.top .hn-on::after{content:"";position:absolute;left:0;right:0;top:0;bottom:auto;height:2px;
  background:#203864;opacity:1;border-radius:0}
/* Sobre encabezado claro el menu va en gris, y ahi la linea tiene que seguir al
   texto, no quedarse blanca. */
body:has(.pagehero:not(.pagehero--img)) .hn-on>.hn-btn,
body:has(.pagehero:not(.pagehero--img)) .hn-on>.mn-btn,
body:has(.pagehero:not(.pagehero--img)) a.hn-on{color:var(--navy) !important}
/* 15-sep (Yun, captura de "Services" gris con la rayita de sección activa
   arriba, en /services/sell-side-advisory con scroll): faltaba el mismo
   override para el OTRO header blanco (el que llega por scroll sobre foto,
   no por pagehero sin foto). Sin esto, header.top.scrolled .nav>ul>li>.hn-btn
   (linea de gris base) le ganaba por especificidad a `.hn-on>.hn-btn{color:#fff}`
   y la sección activa se quedaba gris en vez de navy — verificado con
   CSS.getMatchedStylesForNode, computed color rgb(141,141,148) sin este fix.
   🪤 Primer intento (`header.top.scrolled .hn-on>.hn-btn`) perdió TAMBIÉN
   contra el gris: mismas 4 clases en las dos reglas, pero la del gris tiene
   3 elementos (header/ul/li) contra 1 de la mía — en empate de clases decide
   el conteo de elementos. Hay que replicar la cadena .nav>ul>li completa. */
header.top.scrolled .nav>ul>li.hn-on>.hn-btn,
header.top.scrolled .nav>ul>li.hn-on>.mn-btn,
header.top.scrolled .nav>ul>li>a.hn-on{color:var(--navy) !important}
.ph-right h1{font-size:48px !important;line-height:1.12 !important}
.ph-right .role{font-size:36px !important;color:var(--esp-gris-ink,#333) !important;line-height:1.25 !important;margin-top:6px !important}
@media(max-width:640px){
  .ph-right h1{font-size:30px !important}
  .ph-right .role{font-size:22px !important}
}
.value-card h3{font-size:23.5px !important;line-height:1.25 !important}
.value-card p{font-size:16.5px !important;line-height:1.65 !important}
/* 20-ago: margin-bottom + el gap del grid de página (16px 20px) se sumaban
   -- doble espacio entre filas que no dependía uno del otro. El gap ya
   separa; se quita el margin. */
.chips li{list-style:none;background:#fff;box-shadow:var(--esp-sombra);padding:14px 18px 14px 56px;margin:0;position:relative;font-size:16px !important;color:#6b6c72;font-weight:500}
.chips li::before{content:"\203A";position:absolute;left:0;top:0;bottom:0;width:36px;background:var(--navy);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.chips{padding:0 !important;margin:0 0 26px !important}
.faq-item{border:0 !important;box-shadow:var(--esp-sombra);margin-bottom:16px;background:#fff}
.faq-item summary{padding:22px 32px !important;font-weight:400 !important;color:#6b6c72 !important;font-size:15px !important}
.faq-item summary::after{content:"\2304" !important;font-size:22px !important;line-height:1 !important;color:#333 !important;transform:translateY(-4px)}
.faq-item[open] summary::after{content:"\2303" !important;transform:translateY(4px)}
.faq-item p{padding:0 32px !important;margin:0 0 22px !important}
/* 11-sep: buy-side FAQ "What other advisors..." — el cliente responde con
   una lista de viñetas (Accountants/Legal advisors/Environmental
   advisors), no un párrafo corrido. Mismo tratamiento visual que
   .faq-item p. */
.faq-item .faq-list-inner{padding:0 32px !important;margin:0 0 22px !important;list-style:disc;padding-left:52px !important}
/* corporate-finance "recapitalization steps" — el cliente la numera (ol),
   no viñetas. */
.faq-item ol.faq-list-inner{list-style:decimal}
/* 11-sep: el li{font-size:18px} global le ganaba al 16px real de
   .faq-item p — Yun lo notó, las viñetas se veían más grandes que el
   resto de la respuesta. */
.faq-item .faq-list-inner li{margin-bottom:10px;font-size:16px !important;line-height:1.6 !important}

/* ---- 9. Botones: navy cuadrado, 15px bold, sin tracking ---------------- */
.btn,.dl-btn,a.btn,button.btn{border-radius:0 !important;background:var(--navy) !important;color:#fff !important;font-size:15px !important;font-weight:700 !important;letter-spacing:0 !important;text-transform:none !important;padding:12px 20px !important;line-height:1.2 !important}

/* ---- 10. Home ---------------------------------------------------------- */
/* 18-ago Yun: "Our Services" — el "View Details" del cliente es un BOTÓN
   navy sólido (medido: bg rgb(32,56,100), texto blanco 700, 16px, padding
   12px 16px, radius 4px), el nuestro era un link de texto con flecha, sin
   fondo. El párrafo de la tarjeta SÍ se midió igual en los dos (16px/400) —
   no se toca, no hay diferencia real ahí; si Yun ve otra cosa en pantalla
   pedirle captura de qué párrafo exactamente. Solo 2 páginas usan .more
   (home EN/ES). */
.more{background:#203864 !important;color:#fff !important;font-weight:700 !important;font-size:16px !important;padding:12px 16px !important;border-radius:4px !important}
/* 19-ago (sesión Yun, Our Clients): el cliente usa FOTO en cada tarjeta, no
   un ícono de línea, y la foto sangra hasta los bordes de la tarjeta (la
   nuestra tiene padding 38/32, de ahí los márgenes negativos). Las 3 fotos
   son las suyas, las cableó _tools/pase-home-clientes-fotos.js.
   Además su "View Details" se ajusta al texto: el nuestro salía a todo el
   ancho porque .card es flex column y estira a los hijos. */
/* width explícito, NO auto: con width="900" en el HTML el flex toma el ancho
   intrínseco de la foto como base y la tarjeta se iba a 900px, desbordando
   en móvil (lo cazó qa-desborde-movil). calc(100% + 64px) = el contenido más
   los 32px de padding de cada lado. */
.card .card-foto{display:block;min-width:0;max-width:none;height:auto;
  width:calc(100% + 64px) !important;
  margin:-38px -32px 24px !important;aspect-ratio:450/330;object-fit:cover}
.cards3 .card .more{align-self:flex-start}
/* 18-ago Yun: "todos los textos alineados a la izquierda" — Sector Expertise/
   Industry Experience, Contact Us, M&A Reports & Insights, Subscribe
   Newsletter usan .wrap.center (text-align:center). Solo 4 páginas en todo
   el sitio usan esta clase (home EN/ES + calculadora EN/ES), misma plantilla
   de sección — se cambia una vez para las 4. */
.center{text-align:left !important}
/* 18-ago Yun (2a ronda): el título ya quedaba a la izquierda pero el <p
   class="lead"> seguía viéndose centrado — no es text-align, es que .lead
   trae margin:0 auto (bloque angosto de 760px centrado dentro del wrap
   ancho). Se quita ese auto SOLO dentro de .center (afecta Our Clients,
   Industry Experience, Recent Representative Transactions, Contact Us, Our
   Presence, M&A Reports & Insights — todo lo que comparte .wrap.center). */
.center .lead{margin:0 !important}
/* 18-ago Yun (2a ronda): 3 de las secciones .center en realidad SÍ deben
   quedar centradas — el pase de arriba las afectó sin que nadie lo pidiera
   (comparten la misma clase .center que las 6 de arriba). Selectores más
   específicos ganan sobre la regla general de la línea de arriba. */
.vband .center,#newsletter .center,section:has(.faq) .center,
.vband .center h2,#newsletter .center h2,section:has(.faq) .center h2{text-align:center !important}
.vband .lead,#newsletter .lead{margin:0 auto !important}
/* 18-ago Yun: "las cajitas del newsletter, el texto está muy oscuro no se
   lee" — medido: h3 quedaba en #333 (gris oscuro) sobre un fondo casi navy
   (rgba(255,255,255,.06) sobre section.news), casi ilegible. Causa real: la
   regla general "h3{color:#333}" de la sección 7 (para el resto del sitio,
   fondo claro) le gana a la propia del sitio (.ncard h3{color:#fff}) porque
   espejo.css carga después. Se restaura blanco solo aquí. */
/* 19-ago (sesión Yun): la sección de newsletter del home era una banda navy
   oscura con 2 tarjetas centradas; el cliente usa una BANDA DE FOTO clara
   (skyline que se funde a blanco por la izquierda) con el contenido alineado
   a la izquierda y texto oscuro. Decisión de Saulo en sesión: se conserva
   NUESTRO contenido (dos bloques, valen por SEO) y se espeja solo el diseño
   — o sea, esto no ejecuta la decisión #5 de Luis (que es si cambiamos
   nuestros bloques por su banda única), la deja abierta.
   El velo blanco a la izquierda garantiza contraste del texto sobre la foto
   en cualquier ancho: en móvil la foto se recorta y sin él el texto caería
   sobre los edificios oscuros. */
/* 20-ago (Saulo+Yun): "que se vean los edificios un poco" -- el velo izquierdo
   quedaba casi opaco (.97/.92) y tapaba la foto donde vive el texto. Bajado
   un escalón; el texto (var(--ink), oscuro) sigue legible sobre el skyline
   claro. */
.section.news{background:url('/assets/newsletter-banner.webp') center/cover no-repeat !important;color:var(--ink) !important}
/* 22-sep: se quita el velo blanco. Yun: "en la parte izquierda la imagen de
   plano se pierde". Medido en el cliente: su sección pinta SOLO la foto
   (BannerOficinas_6.jpg, cover, 50% 50%), sin degradado ni capa de color —
   revisados también sus pseudo-elementos. El blanco de su lado izquierdo
   viene horneado en la propia foto, y nuestro archivo es esa misma foto
   (comparadas las dos, 1920x1080 las dos), así que el degradado que teníamos
   (de .82 a .2) estaba borrando el skyline dos veces. */
#newsletter .center,#newsletter .center h2{text-align:left !important}
#newsletter .lead,.news-sub{margin:0 0 36px !important;max-width:640px !important}
#newsletter .eyebrow{color:var(--esp-gris) !important}
/* Guión navy a la izquierda del título, como el resto de los h2 del sitio. */
.news-title{color:var(--ink) !important;font-size:36px !important;line-height:1.1 !important;position:relative;padding-left:60px !important}
.news-title::before{content:"";position:absolute;left:0;top:.42em;width:40px;height:10px;background:var(--navy)}
.news-sub{color:var(--esp-gris) !important}
/* Los dos bloques dejan de ser tarjetas translúcidas y se apilan a la
   izquierda, como los dos bloques del cliente (form y "industry reports"). */
.news-cards{grid-template-columns:1fr !important;max-width:640px !important;margin:0 !important;gap:34px !important}
.ncard{background:none !important;border:0 !important;padding:0 !important;align-items:flex-start}
.ncard h3{color:var(--ink) !important;font-size:18px !important;font-weight:700 !important;margin:0 0 8px !important}
.ncard p{color:var(--esp-gris) !important;margin:0 0 18px !important}
/* Su botón es navy sólido, no blanco, y se ajusta al texto. */
.news .btn-light{background:var(--navy) !important;color:#fff !important}
/* En móvil la foto (16:9) se recorta al centro dentro de una caja alta y
   angosta, así que el degradado lateral deja de proteger: el texto caería
   sobre los edificios. Velo casi sólido; la foto queda de ambiente. */
@media(max-width:767px){
  .section.news{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 100%),url('/assets/newsletter-banner.webp') center/cover no-repeat !important}
  .news-title{font-size:22px !important;padding-left:36px !important}
  .news-title::before{width:24px;height:8px}
}
/* 18-ago Yun: la foto del hero se ve muy oscura vs el cliente. El velo tiene 2
   capas — la de arriba (180deg, se apaga a los 24%) es la que PROTEGE la
   legibilidad del nav sobre la foto (medida WCAG AA 12-ago, no se toca). La
   diagonal (100deg, cubre TODA la foto) es la que se aclara aquí.
   18-ago (3a ronda, Saulo): la capa de fundido del corte inferior (2a ronda)
   se QUITA — en el sitio real el corte hero->"Our Services" es limpio, sin
   degradado (confirmado con captura del cliente); la capa la estaba
   metiendo sin que hiciera falta. Overlay diagonal bajado de nuevo: medido
   pixel a pixel contra el cliente (qa-cdp screenshot + muestreo de canvas)
   en 6 puntos del hero — el cliente promedia rgb ~(140,160,175), nosotros
   promediábamos ~(50,70,100), notablemente más oscuro incluso después de la
   2a ronda. Verificado con qa-contraste-header.js --local en cada paso: home
   se mantiene en 0 fallas AA (nav y hero). */
/* 20-ago (sesión Saulo+Yun): "le falta brillo" — la diagonal se ABRE del lado
   izquierdo (era .52 plano -> .38), que es donde se ve la foto. La capa
   superior de protección del nav (180deg) NO se toca (WCAG AA del 18-ago).

   🪤 El primer intento la bajó PAREJA (.38/.30) y eso rompió AA: la etiqueta
   "Serving Our Clients" (18px/400, columna derecha) cayó a 3.47 contra el
   umbral 4.5 — regresión mía, cazada por qa-contraste-header.js --local
   (baseline del sitio: 17 fallas; con el velo parejo subía a 18).
   La diagonal YA ERA asimétrica, asi que la solución no es subirla toda:
   izquierda clara (.38) donde vive el h1 y se aprecia la foto, derecha más
   cerrada (.46 -> .50) donde se apilan los stats. Resultado medido:
   "Serving Our Clients" 5.03 y el sitio de vuelta en 17 = baseline.
   OJO al tocar esto: el gate NO acredita text-shadow (muestrea el fondo,
   no el glifo), no intentes arreglarlo por ahi. */
.hero::before{background:
    linear-gradient(180deg,rgba(15,25,45,.55) 0%,rgba(15,25,45,0) 24%),
    linear-gradient(100deg,rgba(18,30,52,.38) 0%,rgba(18,30,52,.46) 55%,rgba(18,30,52,.50) 100%),
    url('/assets/hero-home-1920.webp') center/cover no-repeat !important}
/* 24-sep (Luis, QA H2.3): en el HOME la foto va anclada a la DERECHA como la
   del cliente (su background-position 100% 50%); iba centrada. EN y ES. Solo
   los dos home (por canonical): la calculadora de valuacion tambien usa
   .hero#top y no se midio. Las 3 capas: dos degradados y la foto. */
html:has(link[rel="canonical"]:is([href="https://www.sealeassociates.com/"],[href="https://www.sealeassociates.com/es/"],[href="https://www.sealeassociates.com/es"],[href="https://www.sealeassociates.com"])) .hero::before{background-position:0 0,0 0,100% 50% !important}
/* 19-ago (QA medido, G1-1): img_062.webp era 1280×720 natural pintado a 1280×580
   → en retina / pantallas de 1920 se estira 1.5-2× y se ve borroso (casi seguro
   la "resolución de fotos" de Sergio). hero-home-1920.webp = el MISMO banner del
   cliente (S&A-Homepage-banner.png 1920×1080, su propio asset), a 130 KB. */
.hero-left h1{font-size:48px !important;line-height:1.1 !important}
.hero-left p{font-size:18px !important;line-height:1.7 !important;color:#fff !important;max-width:640px !important}
.hero-left .rule{width:80px !important;height:6px !important;background:var(--navy) !important;opacity:1 !important;margin:16px 0 !important}
.hero-right .kh{font-size:36px !important;color:#fff !important;margin:0 0 18px !important}
.hero-right{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:34px;align-content:start}
.hero-right .kh{grid-column:1 / -1}
.kh-stat{border-top:0 !important;padding:0 !important}
.kh-stat .n{font-size:30px !important}
.kh-stat .l{font-size:18px !important;letter-spacing:0 !important;text-transform:none !important;color:#fff !important;margin-top:8px !important}
.section h2{color:inherit !important}
.card h3{font-size:24px !important;margin:0 0 12px !important}
.card p{color:var(--esp-gris) !important}
/* 19-ago (QA medido, home): */
/* · el párrafo de sección (.lead) del cliente ocupa TODO el contenedor (1160;
     "Our Clients", equipo, careers…), el nuestro se capaba a 760. Solo las 2
     secciones centradas (valuation/newsletter) conservan el bloque angosto. */
/* 20-ago: .lead-left (Our Services) traía su propio tope de 920 en el CSS de
   página — invisible a 1280 (contenedor 1160) y visible al volverse fluido:
   el cliente lo corre a todo el ancho (2 renglones, nosotros dábamos 3). */
.lead,.lead-left{max-width:none !important}
.vband .lead,#newsletter .lead{max-width:760px !important}
/* · tarjetas de servicios: foto 371×269 (nuestra 369×231), sombra 0 20px 20px
     .15 (token) y radio 4 — también las de Our Clients. */
.card,.photo-card{border-radius:4px !important}
.photo-card img{height:269px !important;object-fit:cover !important}
/* · carrusel de transacciones: flechas navy rellenas (la nuestra blanca con
     borde), banda gris, sin puntos en el home (el cliente no los trae ahí). */
.tcar-btn{background:var(--navy) !important;color:#fff !important;border:0 !important;width:40px !important;height:40px !important;border-radius:50% !important}
.tcar-btn svg{stroke:#fff !important}
section.section:has(.tcar){background:#f2f2f2 !important}
body:has(.hero) .tcar-dots{display:none !important}
/* · equipo del home ("Contact Us"): cliente = foto + nombre h2 24px CENTRADO,
     cargo 20/34 gris, sin tarjeta ni sombra. Nosotros tarjeta con nombre 30 a
     la izquierda. */
body:has(.hero) .member{box-shadow:none !important;background:transparent !important;border:0 !important}
body:has(.hero) .member .info{text-align:center !important;padding:18px 8px !important}
body:has(.hero) .member .info h3{font-size:24px !important;margin:0 0 6px !important}
body:has(.hero) .member .info .role,body:has(.hero) .member .info .loc{font-size:20px !important;line-height:1.7 !important;font-weight:400 !important;margin:0 !important}
body:has(.hero) .member .info .links{justify-content:center !important;display:flex !important;margin-top:10px !important}
/* 20-ago (Saulo+Yun): el cliente pinta el circulo de redes SOLIDO navy con
   icono blanco por default (no solo en hover, que era nuestro estado inicial). */
body:has(.hero) .member .info .links a{background:var(--navy) !important;border-color:var(--navy) !important;color:#fff !important}

/* Secciones oscuras del home: el texto va blanco, no gris */
.services-dark p,.services-dark .lead,.services-dark .lead-left,.services-dark h2,.services-dark .section-title,.services-dark h3{color:#fff !important}
/* 20-ago (Saulo+Yun): "Our Presence" pasa a banda navy con texto blanco, como
   el cliente (medido: su fondo es linear-gradient(rgb(32,56,100)) = --navy,
   h2 36px y parrafo 19.2px en #fff). Se reusa .services-dark, que ya es el
   patron de seccion oscura del home. El eyebrow iba en --accent (#5d7aa6):
   sobre navy pierde contraste, y en blanco puro se comeria la jerarquia del
   h2 -- toma el mismo tono que ya usa .vband, la otra banda oscura. */
.services-dark .eyebrow,.services-dark p.eyebrow{color:#9fb3d1 !important}
.services-dark .card p{color:var(--esp-gris) !important}
.services-dark .card h3{color:#333 !important}

/* ---- 10b. Defecto preexistente cazado 17-ago: las 3 páginas ES de servicios traen la banda de portada
        SIN su CSS (las EN y las de clientes sí lo traen), la imagen sale a 2400px, la página desborda
        y el móvil abre a 25% de zoom (header de 1560px). Regla global, inofensiva donde ya existe. */
.portada-band{width:100%;line-height:0}
.portada-band img{width:100%;height:auto;display:block}

/* ---- 10c. Equipo (/about-us/our-team, /es/.../nuestro-equipo): fotos CONTIGUAS
        (el cliente no deja gap). 18-ago Saulo: el velo navy que se agregó
        aquí (13-ago) se QUITA — medido pixel a pixel en el cliente (canvas,
        zona de fondo/traje): gris puro R=G=B, sin nada de azul. El
        "oscurecido hasta hover" que se documentó entonces ya lo da solo el
        filter:grayscale (foto plana hasta hover, full color al activar) —
        no hacía falta una capa de color encima. */
/* 20-ago: estas dos reglas son de ESCRITORIO y salían sin media query. El
   `flex:1 1 0 !important` le ganaba a las reglas móviles que la PROPIA página
   ya trae (@900 y @640, ahí reparte a 2 por fila), así que en el teléfono las
   7 fotos se apretaban en una sola fila ilegible. Se acotan a >900, que es el
   breakpoint que usa la página. */
@media(min-width:901px){
  .team-row{gap:0 !important}
  /* 19-ago (QA medido): la fila del cliente llena el contenedor (1160: fotos de 165
     en la de 7); la nuestra cerraba en 1076 con fotos fijas de 154. */
  /* 🪤 20-ago: aquí decía `flex:1 1 0 !important` y ESO MATABA EL ACORDEÓN.
     `flex` es atajo: ese `0` final fija flex-basis:0 CON !important, y se
     lleva por delante el flex-basis de .member.active (var(--a)) y
     .member.sib (var(--s)), que no llevan !important. Resultado: 7 tarjetas
     del mismo ancho y el hover no abría nada.
     Se tocan solo grow/shrink; el flex-basis se le deja a la página, que es
     quien tiene las variables por fila (--b base / --a activa / --s hermana)
     y el transition:flex-basis .2s que da la animación. La fila sigue
     llenando el contenedor por el flex-grow. */
  .team-row .member{flex-grow:1 !important;flex-shrink:1 !important;width:auto !important;min-width:0 !important}
  /* 🪤 10-sep (Yun): el ALTO del cliente no es un número, es una PROPORCIÓN.
     La página traía `height:380px` fijo (bloque <style> de our-team.html y su
     gemela ES). Medido en su /about-us/our-team a 1000, 1100, 1280, 1366, 1440,
     1600 y 1920: el alto de la foto es SIEMPRE el ancho de la fila / 3
     (razón 3.003 en los siete). O sea 326 a 1100, 386 a 1280, 440 a 1440.
     Con el 380 fijo solo coincidíamos cerca de 1280 y nos íbamos 54px a 1440.
     Cierra las celdas del Excel de Sofía Cerrilla sobre el tamaño de las fotos del
     equipo (Home/About Us: "fotos de directivos en distintos tamaños",
     "Bowling y Coady con tamaño distinto").
     OJO — los TRES anchos distintos (166 / 193 / 232 a 1280) NO son un defecto:
     su sitio tiene exactamente los mismos, con los mismos conteos (14/18/10).
     Lo único que estaba fuera de medida era el alto. No uniformar los anchos. */
  .team-row{aspect-ratio:3/1 !important}
  .team-row .member,.team-row .member.active,.team-row .member.sib{height:100% !important}
}
.team-row .member img{width:100% !important}
/* Móvil (20-ago, Saulo+Yun): el cliente APILA una tarjeta por fila, no dos.
   Medido a 390 en su /about-us/our-team: cada .atmc-team-05_item va x=20,
   ancho 350 (todo el ancho util), alto 280, separadas 294 (=280+14 de gap).
   La página reparte a 2 por fila (flex:0 1 calc(50% - 7px)); se pisa aquí. */
@media(max-width:900px){
  .team-row{flex-direction:column !important;flex-wrap:nowrap !important;gap:14px !important}
  .team-row .member,.team-row .member.active,.team-row .member.sib{flex:0 0 auto !important;width:100% !important;height:280px !important}
}
/* Contacto — "Direct Contact with Our Directors" (QA medido): cliente = foto
   rectangular ~370×270, nombre h2 24px centrado #333, cargo/ciudad 20/34 gris,
   iconos redondos navy; SIN tarjeta. Nosotros tarjeta 373×244 con avatar
   redondo de 96, nombre 16 link, cargo 13.6. */
.dir-card{flex-direction:column !important;align-items:center !important;box-shadow:none !important;background:transparent !important;border:0 !important;padding:0 !important;text-align:center !important;gap:0 !important}
/* Alto de la foto: 307px, el del cliente (medido 8-sep en su /contact-us: sus
   fotos dan 424x307 y las nuestras daban 427x270, o sea 37px mas bajas — la celda
   del Excel dice "corregir las dimensiones de las fotos"). El ancho ya coincidia. */
.dir-card .adv-ph{width:100% !important;height:307px !important;object-fit:cover !important;object-position:top !important;border-radius:0 !important;margin:0 0 16px !important;flex:none !important}
.dir-card .dir-n{font-size:24px !important;font-weight:700 !important;color:#333 !important;line-height:1.1 !important;margin:0 0 6px !important}
.dir-card .dir-r{font-size:20px !important;line-height:1.7 !important;color:var(--esp-gris) !important;display:block !important}
.dir-card .dir-m{font-size:16px !important;margin-top:10px !important;display:inline-block !important}
@media (max-width:767px){.dir-card .adv-ph{height:220px !important}}
/* 18-ago Saulo: nombre más grande, puesto en mayúsculas y más chico que el
   nombre, todo en blanco puro (el puesto vivía en #dbe3ee, un blanco con
   pizca de azul). El degradado (rgba(15,25,45) de abajo hacia arriba) y los
   íconos ya estaban en blanco — sin cambio, solo el texto. */
/* 10-sep (Yun): el nombre y el cargo del overlay iban en em/rem y caian en
   20.8 y 12.48px. Medido en su /about-us/our-team, con el DOM del bloque:
     nombre  24px / 700 / lh 40.8 / mb 0     (nosotros 20.8 / lh 34.32 / mb 2)
     cargo   12px / 400 / lh 12 / spacing 1px (nosotros 12.48 / lh 19.97 / .624)
   Color, peso y uppercase ya coincidian. Se pasa a px para no depender del
   rem heredado, que es de donde salian los .8 y .48. */
.team-row .member .info .nm{font-size:24px !important;line-height:40.8px !important;
  color:#fff !important;margin-bottom:0 !important}
.team-row .member .info .r{color:#fff !important;text-transform:uppercase !important;
  letter-spacing:1px !important;font-size:12px !important;line-height:12px !important;
  margin-bottom:9px !important}
/* 18-ago Saulo: los íconos (perfil/email/LinkedIn) se veían oscuros hasta
   hover — mismo bug que el nombre: "main a{color:navy}" (sección 7) le
   ganaba por especificidad al color:#fff propio de la página. */
.team-row .member .icons a{color:#fff !important}

/* ---- 11. Footer: #203864 ------------------------------------------------
   OJO: este bloque decia "16px, como el cliente" y era FALSO. Medido el 9-sep
   contra su home: su pie va a 12.8px. El tamano real se fija mas abajo, en el
   bloque del footer compacto. */
footer.site{background:var(--navy) !important}
footer.site p,footer.site a,footer.site li{font-size:16px !important;line-height:1.7 !important;color:#fff !important}
footer.site .foot-bottom,footer.site .foot-bottom *{font-size:13px !important}
footer.site h4{font-size:13px !important}
/* 19-ago (sesión Yun, "footers en general debe ser el mismo, ajustar
   columnas"): el markup del footer trae 5 bloques (logo · Services ·
   Experience · Firm · Offices), pero 172 de las 641 páginas declaran la
   rejilla a 4 columnas (`1.4fr 1fr 1fr 1fr`) contra 1910 declaraciones a 5
   — en esas 172 la quinta columna se iba al renglón de abajo y el footer se
   veía desalineado contra el resto del sitio. Se unifica a 5 con el mismo
   hueco para todas. (Esto es consistencia INTERNA nuestra; si el footer
   debe además igualarse al mínimo del cliente, eso es la decisión #1 de
   Luis y no se toca aquí.) */
/* 20-ago (Saulo+Yun): la 1a columna (logo) pesaba 1.4fr contra 1fr de las
   otras 4 -- se veía desparejo. Las 5 a peso igual, mismo gap. */
footer.site .foot-top{grid-template-columns:repeat(5,1fr) !important;gap:32px !important}
@media(max-width:1000px){footer.site .foot-top{grid-template-columns:1fr 1fr !important}}
@media(max-width:640px){footer.site .foot-top{grid-template-columns:1fr !important;gap:26px !important}}

/* ---- 13. Páginas de servicios (sell-side/buy-side/corporate-finance, EN+ES:
        .case-card2/.benefit-card/.process-list/.cta-band son componentes
        compartidos por las 3 — un solo pase para las 6). 18-ago Saulo,
        confirmado con captura del cliente en sell-side-advisory: */
/* Guión navy a la izquierda: "Company Sale Process Overview" y "Benefits of
   Working with Seale & Associates"/"The Value of Our Advice" (mismo
   .benefit-grid en las dos páginas) — visto en el cliente, mismo lenguaje
   que .pt-h1/.values-section h2. "Representative Sell-Side..." (el carrusel
   de transacciones) también lo trae. */
/* 11-sep, vuelta 2: la primera medición (40×10, luego 48×9) solo ajustó
   el tamaño del guión y dejó el error de fondo — Yun insistió en que
   seguía mal y tenía razón. El texto del h2 NO lleva padding-left en el
   cliente: empieza en el MISMO x que el chevron del bullet de abajo
   (medido: textLeft=60, igual que .benefit-card). El guión no empuja el
   texto — se PROYECTA hacia la izquierda, fuera de la caja del texto
   (left:-56px, casi tocando el margen de la página), dejando solo 8px de
   aire antes de la "B". Con padding-left:60px yo tenía el título entero
   corrido 60px a la derecha del resto del contenido — por eso no
   coincidía por más que ajustara el tamaño del guión. */
h2:has(+.process-list),h2:has(+.benefit-grid),h2:has(+.tcar){position:relative;padding-left:0 !important}
h2:has(+.process-list)::before,h2:has(+.benefit-grid)::before,h2:has(+.tcar)::before{content:"";position:absolute;left:-56px;top:18px;width:48px;height:9px;background:var(--navy)}
/* "Sell-Side advisory services include:" y "FAQs from Our Clients" (columna
   izquierda) quedaban a 36px por la regla general de h2 — el cliente los usa
   más chicos que un section-title real. Solo esa columna: no toca
   "Representative Case Studies" (columna derecha) ni el resto del sitio. */
/* 19-ago (QA medido): el cliente los tiene a 24px (no 22) en servicios; en
   clientes (PE) usa 36 con un span navy — se deja 24 como punto medio medido. */
.top-grid>div:first-child .section-h2{font-size:24px !important}
/* Lista de servicios y FAQ (columna izquierda): cliente li 18px/30.6, FAQ fila
   93px alta con texto 16/27.2 y radio 4 + shadow-md. Nosotros li 15.5/23,
   FAQ 69px/15px. */
.top-grid li{font-size:18px !important;line-height:1.7 !important}
.faq-item{box-shadow:var(--esp-sombra-md) !important;border-radius:4px !important}
.faq-item summary{padding:30px 32px !important;font-size:16px !important;line-height:1.7 !important}
/* Case studies. 19-ago (QA MEDIDO con CDP contra el sitio real, caja de la
   foto del cliente: 261×208 = 5:4, radio 4): el "remedido 16:9" de ayer estaba
   mal y el comentario viejo tenía razón. Tamaños del cliente: título 24px,
   texto 16/27.2, botón 16px; caja blanca con shadow-md y sin borde. */
.case-grid-2 .case-card2 .cimg{aspect-ratio:5/4 !important;border-radius:4px 4px 0 0}
.case-grid-2 .case-card2:nth-child(even){margin-top:28px}
/* 11-sep: el 5:4 de arriba solo mide en escritorio (2 columnas). Medido en
   móvil contra el cliente (viewport 390, imagen real de Woodcrafters):
   330×165 = 2:1, no 5:4 — el 5:4 sin media query inflaba cada card ~137px
   (280 de alto en vez de 175) y sumaba ~685px extra en las 5 tarjetas de
   Sell-Side Advisory. .case-grid-2 ya colapsa a 1 columna en 480px (HTML
   inline, línea ~113); el aspecto vuelve a 2:1 en ese mismo punto. */
@media(max-width:480px){.case-grid-2 .case-card2 .cimg{aspect-ratio:2/1 !important}}
/* 11-sep (Yun, con captura del cliente): el bloque de texto NO es del mismo
   ancho que la foto — es una tarjeta flotante MÁS ANGOSTA, pegada a la
   izquierda, montada sobre la esquina inferior de la imagen. Medido en el
   DOM real (.atmc-gallery-05-content): imagen 261×208, bloque de texto
   235×267 (90% del ancho de la foto), margin-top:-64px → 48px de traslape
   real, padding 32px, sombra propia. Nosotros lo teníamos pegado a todo lo
   ancho, sin traslape ni sombra propia. */
.case-card2{border:0 !important;overflow:visible !important;box-shadow:none !important;background:transparent !important;position:relative}
.case-card2 h3{font-size:24px !important;line-height:1.1 !important;color:var(--navy) !important}
.case-card2 p{font-size:16px !important;line-height:1.7 !important}
.case-card2 .cs-btn{font-size:16px !important;padding:12px 18px !important}
.case-card2 .cbody{position:relative !important;width:90% !important;margin-top:-48px !important;margin-left:0;padding:32px !important;background:#fff !important;box-shadow:var(--esp-sombra-md) !important;flex:1 1 auto !important}
/* 23-sep (Yun: "los cuadros de la derecha se extendieron para abajo, todos
   deben estar alineados de la parte de abajo"): ese flex era `none`, asi que
   el cuadro media lo que pidiera su texto y dos tarjetas de la misma fila
   terminaban a distinta altura — 786 y 813 en sell-side, segun el numero de
   lineas del parrafo. El cliente los iguala con su matchheight (sus dos
   miden 267 y cierran los dos en 1306). Con flex:1 el cuadro se estira hasta
   el fondo de la tarjeta, que YA estaba alineada (438 de alto las dos), y
   quedan parejos sin JS. El ancho sigue siendo el 90% de la regla de arriba:
   el flex solo manda en el eje vertical de esta tarjeta en columna. */
/* Banda "portada" (la montaña bajo "Negotiation to Close"/"Acquisition
   Process Overview"): 320px fijo era solo el valor a 1280. Yun notó que
   en su pantalla se veía más baja que en el cliente — medido en 3 anchos
   contra sealeassociates.com (sell-side Y buy-side, mismo componente):
   1280→320, 1440→360, 1920→480 — siempre exactamente 25% del ancho, no
   un valor fijo. En móvil el cliente sigue dando 98 (sin verificar si
   ahí también escala). */
@media (min-width:768px){.portada-band img{height:25vw !important;object-fit:cover !important}}
@media (max-width:767px){.portada-band img{height:98px !important;object-fit:cover !important}}
/* Clientes (PE): la imagen de la red mide el ancho de la columna (550), no 400. */
.pe-net{width:100% !important;height:auto !important}
/* Benefits/Value of Our Advice: título de cada tarjeta más chico (heredaba
   30px de la regla general de h3). */
.benefit-card h3{font-size:1rem !important}
.benefit-card p{font-size:.9rem !important}
/* CTA final ("Are you exploring…"/"Are you looking to expand…"): de banda
   navy centrada a 2 columnas sobre gris claro — texto a la izquierda, botón
   a la derecha centrado vertical y horizontalmente dentro de su columna. */
.cta-band{background:var(--cream) !important;padding:48px 0 !important}
.cta-band .wrap-team{display:grid !important;grid-template-columns:1fr auto !important;column-gap:48px !important;align-items:center !important;text-align:left !important}
.cta-band h2{grid-column:1;grid-row:1;color:var(--ink) !important;text-align:left !important;margin:0 0 12px !important}
/* 11-sep: el <p>{font-size:18px!important} global (línea ~351) le ganaba
   al .98rem del HTML inline. Medido contra el cliente: 16px, sin el
   max-width:720px que traía el HTML (el suyo usa el mismo ancho que el
   h2, no uno más angosto). */
.cta-band p{grid-column:1;grid-row:2;color:var(--muted) !important;text-align:left !important;margin:0 !important;font-size:16px !important;line-height:1.7 !important;max-width:none !important}
/* Botón: el HTML inline traía .95rem/13px 32px/radio 3 — medido contra
   el cliente: 20px/15px 30px/radio 4. */
/* 11-sep: Yun insistió en que seguía sin coincidir — tenía razón, faltaba
   esto. El botón heredaba line-height:1.7 (33.6px) de una regla global,
   inflando el alto a 64px. El cliente usa line-height normal (~1.2,
   24px): 54px total. Medido en corporate-finance, mismo componente
   compartido con sell-side/buy-side. */
.cta-band .cta-btn{grid-column:2;grid-row:1/3;justify-self:center;align-self:center;background:var(--navy) !important;color:#fff !important;margin-top:0 !important;font-size:20px !important;line-height:1.2 !important;padding:15px 30px !important;border-radius:4px !important}

/* ---- 14. Industria (chemicals y las 25 más, EN+ES; QA G2-14 + handoff 17-ago
   punto 5): reports 4 columnas, case studies 3 (comparten .repL-grid en el
   HTML, se distinguen por el id="reports" del h2 anterior — ya existe en las
   22 páginas con reportes), banda gris + h2 48 en "Representative
   Experience" (no el guión de servicios: h2:has(+.tcar) de la §13 es el
   mismo selector que usa el home, aquí se pisa porque .wrap es hijo directo
   de <main> — el home lo tiene dentro de section.section), intro sin borde
   izquierdo (el cliente no la trata como blockquote), botón de descarga con
   icono en celda redonda (texto envuelto por _tools/pase-dl-btn-icono.js,
   19-ago). 768/767 = mismo corte que el resto del archivo. */
@media(min-width:768px){
  #reports+.repL-grid{grid-template-columns:repeat(4,1fr) !important;gap:26px !important}
  .repL-grid{grid-template-columns:repeat(3,1fr)}
}
#reports+.repL-grid .repL-panel{padding:32px !important;box-shadow:var(--esp-sombra-md) !important}
#reports+.repL-grid .repL-t{font-size:22px !important;line-height:1.25 !important}
/* Banda por PSEUDO-ELEMENTO, no por márgenes negativos: .tcar-btn.next usa
   right:-16px relativo a la caja real de .tcar — si esa caja se ensancha con
   margin negativo, el botón queda 16px más allá del nuevo borde y desborda
   (lo cazó qa-desborde-movil en las 52 páginas). El ::after/::before es
   decorativo, no toca el box-model de .tcar ni de sus hijos absolutos. */
/* 20-ago (remedido en vivo, Saulo+Yun): la nota de arriba decía "sin guión" —
   estaba MAL. El cliente SÍ trae el guión navy (48×9, antes del texto) en
   "Representative Experience", y su tamaño real es 36px (no 48). Confirmado
   con CDP hoy contra /experience/industries/chemicals. */
main>.wrap>h2:has(+.tcar){position:relative;z-index:0;font-size:36px !important;padding:44px 0 10px !important;padding-left:60px !important;margin-bottom:0 !important;line-height:1.1 !important}
main>.wrap>h2:has(+.tcar)::before{content:"";position:absolute;left:0;top:52px;width:48px;height:9px;background:var(--navy) !important;display:block !important}
main>.wrap>h2:has(+.tcar)::after{content:"";position:absolute;z-index:-1;top:0;bottom:-20px;left:-60px;right:-60px;background:#f2f2f2}
main>.wrap>h2:has(+.tcar)+.tcar{position:relative;z-index:0;padding:20px 0 44px !important}
main>.wrap>h2:has(+.tcar)+.tcar::before{content:"";position:absolute;z-index:-1;top:-20px;bottom:0;left:-60px;right:-60px;background:#f2f2f2}
.answer{border-left:0 !important;padding-left:0 !important}
.dl-btn{display:inline-flex !important;align-items:center !important;gap:14px !important}
.dl-btn .dl-ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1}

/* ---- Casos hub (business-cases.html, 2 páginas EN+ES; QA G1-4 + handoff
   punto 2): botón "VIEW CASE STUDY" sin mayúsculas (el texto ya es "View
   Case Study", lo pasaba a caps el text-transform), foto 250 alto (nuestra
   185) con el cuerpo blanco montado encima — mismo truco que .repL-panel. */
.case-grid-3 .cs-btn{text-transform:none !important}
.case-grid-3 .case-card2{border:0 !important;overflow:visible !important;box-shadow:none !important}
.case-grid-3 .cimg{aspect-ratio:370/250 !important;border-radius:4px}
.case-grid-3 .cbody{position:relative;background:#fff;box-shadow:var(--esp-sombra-md) !important;margin:-42px 18px 0 !important;padding:16px 18px 18px !important}

/* ---- Careers (2 páginas EN+ES; QA G2-16 + handoff punto 3): "Meet Our
   People" pasa de grid 2 col con borde izquierdo a carrusel de 3, h2
   centrado (markup convertido por _tools/pase-careers-people-tcar.js, misma
   estructura .tcar que las tombstones — reusa su JS, cero código nuevo).
   La clase .people-tcar pesa más que el h2:has(+.tcar) de industria (§14) y
   gana la banda gris/48px que no aplica aquí. */
main>.wrap>h2:has(+.tcar.people-tcar){background:none !important;text-align:center !important;font-size:36px !important;padding:0 !important;margin:0 0 24px !important}
main>.wrap>h2:has(+.tcar.people-tcar)::after{display:none !important}
main>.wrap>h2:has(+.tcar.people-tcar)+.tcar{background:none !important;padding:0 !important;margin-top:0 !important}
main>.wrap>h2:has(+.tcar.people-tcar)+.tcar::before{display:none !important}
.people-tcar{margin-top:0 !important}
.people-tcar .qcard{border:0 !important;box-shadow:var(--esp-sombra) !important;padding:24px !important}
.people-tcar .qn{font-size:24px !important;font-weight:900 !important}
@media(min-width:641px){.tcar-track>.qcard{flex:0 0 calc((100% - 44px)/3)}}

/* ---- 15. Servicios + Clientes (12 páginas EN+ES; sesión en vivo con Yun,
   19-ago). `.process-list` y `.benefit-card` los COMPARTEN "Company Sale
   Process Overview" (servicios), "Key Steps"/"How We Can Help You"
   (clientes) y "Acquisition" (PE) — un solo bloque cubre las 12.
   Medido con CDP en /services/sell-side-advisory del cliente:
     · process (`atmc-list-04`): tarjeta blanca 549×179, SIN borde, sombra
       `0 20px 20px rgba(0,0,0,.15)` (= --esp-sombra), padding 8px 16px 8px 32px,
       chevron BLANCO sobre caja navy #203864 de 32×32 que sobresale a la
       izquierda (x=60 contra x=76 de la tarjeta), y el título como <b>
       INLINE de 16px gris #85868c — sin números.
     · benefits (`atmc-list-03`): SIN caja, sin fondo, sin sombra, chevron
       NAVY suelto de 9×27, mismo título <b> inline.
   Los dos íconos son `chevron-right` en el HTML del cliente — el mismo
   glifo › que ya usan los .chips de industria.

   20-ago (remedido en vivo, Saulo+Yun): la nota de arriba decía "una sola
   columna" — ERA UNA MEDICIÓN INCOMPLETA. El cliente arma proceso y
   benefits con DOS <ul> lado a lado (dos columnas de 627/643px, split
   4+3 y 3+2), no un único bloque vertical. Confirmado con CDP hoy contra
   /services/sell-side-advisory: atmc-list-04 en x=76 y x=753 (dos listas),
   atmc-list-03 en x=60 y x=737. Pasa a columnas CSS de 2, balanceadas
   (mismo efecto visual sin duplicar el <ul> en nuestro HTML). */

/* Case studies alineadas arriba: el zigzag es nuestro (18-ago), el cliente
   no lo tiene y deja las tarjetas a la misma altura. */
.case-grid-2 .case-card2:nth-child(even){margin-top:0 !important}

/* Company Sale Process / Key Steps / Acquisition */
/* 11-sep (Yun, con capturas de las dos páginas): faltaban dos cosas medidas
   en el cliente. 1) La sección lleva fondo gris — no es background-color,
   es el truco típico de HubSpot: background-image:
   linear-gradient(#eee,#eee) en el row-fluid-wrapper (medido con
   elementFromPoint contra sealeassociates.com: rgb(238,238,238) = #eee).
   2) El split 4+3 documentado el 20-ago dependía del balance automático de
   `columns:2` — hoy nos estaba dando 3+4 porque el alto real de las cards
   ya no coincide exactamente con el del cliente. Se fuerza el corte con
   break-after en el 4° step para no depender de esa fragilidad. */
section.svc-section:has(.process-list){background:#eee !important}
.process-list{display:block !important;columns:2 !important;column-gap:32px !important}
.process-step{display:block !important;position:relative;background:#fff;
  box-shadow:var(--esp-sombra) !important;border:0 !important;border-top:0 !important;
  padding:18px 16px 18px 32px !important;margin:0 0 20px 16px !important;
  break-inside:avoid !important}
.process-step:nth-child(4){break-after:column !important}
@media(max-width:640px){.process-list{columns:1 !important}.process-step:nth-child(4){break-after:auto !important}}
.process-num{position:absolute !important;left:-16px;top:16px;width:32px;height:32px;
  background:var(--navy);color:#fff !important;font-size:0 !important;line-height:0 !important;
  display:flex;align-items:center;justify-content:center}
.process-num::after{content:"\203A";font-size:24px;line-height:1;font-weight:700;color:#fff}
/* El título deja de ser bloque: entra al párrafo como <b>, con dos puntos
   por CSS (el cliente los trae en su texto; aquí no se toca el HTML). */
.process-step h3{display:inline !important;font-size:16px !important;font-weight:700 !important;
  color:var(--esp-gris) !important;line-height:1.6 !important;margin:0 !important}
.process-step h3::after{content:":\00a0"}
.process-step p{display:inline !important;font-size:16px !important;line-height:1.6 !important}

/* Benefits / The Value of Our Advice: sin cajita ni color, chevron navy suelto */
/* 11-sep: Yun notó "The Value of Our Advice" (buy-side) muy compactado
   contra el título. Medido: el hueco título→primer bullet daba 22px
   nuestro vs 52px el cliente. El primer intento usó margin-top:30px pero
   colapsó con el margin-bottom:22px del h2 (márgenes de bloques
   adyacentes se colapsan, toman el máximo, no la suma) y quedó en 30, no
   52. padding-top no colapsa: 22+30=52. */
.benefit-grid{display:block !important;columns:2 !important;column-gap:32px !important;padding-top:30px !important}
@media(max-width:640px){.benefit-grid{columns:1 !important}}
.benefit-card{background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 0 0 24px !important;margin:0 0 18px !important;position:relative;
  break-inside:avoid !important}
/* 11-sep: era el glifo de texto "›" a 24px. El cliente usa un SVG real
   (.atmc-list-03_icon, chevron-right de Font Awesome, fill navy) de 9×15 —
   medido en su DOM. El glifo se veía más grueso/grande que el ícono fino
   del cliente. Mismo path que ya usa .atmc-scroll-top (chevron), rotado a
   "right". */
.benefit-card::before{content:"";position:absolute;left:0;top:5px;
  width:9px;height:15px;background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23203864' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E")}
.benefit-card h3{display:inline !important;font-size:16px !important;font-weight:700 !important;
  color:var(--esp-gris) !important;line-height:1.6 !important;margin:0 !important}
.benefit-card h3::after{content:":\00a0"}
.benefit-card p{display:inline !important;font-size:16px !important;line-height:1.6 !important}

/* FAQ: el cliente pinta la pregunta en gris #85868c (medido); va en el gris AA #68696f (Luis 16-sep). */
.faq-item summary{color:var(--esp-gris) !important}

/* La lupa sobre foto va BLANCA como el resto del header (bandera, menú,
   hamburger). En las páginas de la familia hn con `.page-hero--espejo`
   (servicios/clientes/careers/nearshoring) salía oscura porque ninguna
   regla la fijaba: `.icon-btn{color:#fff}` del CSS de página empata en
   especificidad con `.ss-open{color:inherit}` y el orden decide. Esto es
   a la vez el "la lupa es negra" de PE y el "falta la lupa" de clientes:
   mismo origen, se veía negra o se perdía según qué tan clara fuera la
   foto detrás. */
body:has(.page-hero--espejo) header.top:not(.scrolled) .icon-btn,
body:has(.page-hero--espejo) header.top:not(.scrolled) .ss-open{color:#fff !important}
/* …y con scroll (header blanco) va GRIS (var(--esp-gris), #68696f desde 16-sep), no navy — mismo valor que ya
   se midió para la familia mn sobre header blanco. Este estado solo existe
   porque nuestro header es sticky y el del cliente es estático (decisión #2
   de Luis, abierta): mientras siga sticky, al menos que el color sea el suyo. */
body:has(.page-hero--espejo) header.top.scrolled .icon-btn,
body:has(.page-hero--espejo) header.top.scrolled .ss-open{color:var(--esp-gris) !important}

/* PE (`/clients/private-equity-family-office`, EN+ES — `.pe-net` es única de
   esa página): la imagen de la red salía a 398px centrada por un
   `max-width:400px;margin:18px auto` del CSS de página que le ganaba al
   `width:100%` de la §13. Cliente: ocupa la columna (550) y va alineada
   al inicio. Su h2 de columna también es 36 aquí (no 24 como servicios). */
body:has(.pe-net) .pe-net{max-width:none !important;margin-left:0 !important;margin-right:0 !important}
body:has(.pe-net) .top-grid>div:first-child .section-h2{font-size:36px !important}

/* ---- 16. Sesión Yun 19-ago, segundo lote ------------------------------- */

/* Our Team: el cargo bajo el nombre iba en 500 (semibold); Yun pide bajarle
   el peso — el cliente lo lleva en regular. */
.member .info .r{font-weight:400 !important}

/* Careers: fuera la tira de 3 fotos de montaña (no la tiene el cliente) y
   las tarjetas de Students & Graduates pasan de bloque crema plano a
   tarjeta blanca con sombra y más aire, con su título a 24. */
.culture-strip{display:none !important}
.prog-card{background:#fff !important;box-shadow:var(--esp-sombra) !important;
  border-radius:4px !important;padding:32px !important}
.prog-card h3{font-size:24px !important;line-height:1.2 !important;margin:0 0 10px !important}
.prog-card p{font-size:16px !important;line-height:1.7 !important}

/* Hub de industrias: la foto se encuadraba al centro y cortaba la cumbre;
   se sube el punto de enfoque para que entre la punta de la montaña.
   Scoped al hub (data-hub="industrias"): las 26 páginas de industria tienen
   cada una su propia foto y no comparten encuadre. */
/* 21-sep (Yun): el 28% cortaba la cumbre. Medido en vivo el cliente: bg-position 100% 0%
   (right top), cover, SIN velo encima. Se iguala tal cual, incluido quitar el degradado. */
[data-hub="industrias"].page-hero--espejo::before{background:var(--hero-foto,var(--hero)) 100% 0%/cover no-repeat !important}
/* …y el título de sus tarjetas: la página lo declara en 1.2rem (19.2) pero la
   regla general de h3 de la §7 lo subía a 30 y partía en dos renglones
   nombres como "Aerospace & Defense". Baja a 22, igual que los títulos de
   las tarjetas de reportes de industria (§14). */
/* 21-sep (Yun): medido el cliente (computado, 1920 y 1280): 24px / 26.4px / 700 / #333.
   Misma cara Roboto-Bold y mismo suavizado; lo que difería era tamaño e interlineado. */
.indcard-body h3{font-size:24px !important;line-height:26.4px !important;font-weight:700 !important;color:#333 !important}

/* ---- 12. Móvil (cliente a 390: header 75, logo 133x18, h1 24, h2 22, h3 20, p 16.8, padding 20) --- */
/* 19-ago (QA medido): el cliente SÍ pinta el guión del h1 en móvil — pegado al
   borde izquierdo de la pantalla (x 0-16), chico (16×6), con el h1 a x=20. */
@media (max-width:1199px){
  .pt-h1::before{left:-20px;width:16px;height:6px;top:10px}
}
/* 19-ago (QA medido, G1-9): en servicios/clientes (12 pág.) el .pt vive dentro de
   .top-grid (pase-pt-a-columna) y heredaba padding-top 34 del grid + 44 del
   svc-section → 78px de hueco blanco entre crumb y título en móvil; en
   escritorio dejaba el h1 ~44px más abajo que el cliente (430 vs 386). */
.top-grid:has(.pt){padding-top:0 !important}
/* 20-ago (Saulo+Yun): las 2 columnas seguían desalineadas arriba. El grid ya
   no metía padding (regla de arriba), pero el bloque .pt trae 44px propios
   (§5: .pt{padding:44px 0 6px}) y la columna derecha ("Representative Case
   Studies") arranca en 0 → medido a 1440: izquierda en 397, derecha en 330.
   El cliente va al revés: su h1 en 300 contra Case Studies en 350, o sea el
   título AÚN MÁS arriba (y sin eyebrow, ese bloque es nuestro). Se quita el
   padding-top del .pt SOLO dentro del top-grid, para no tocar el .pt de las
   otras 600+ páginas donde sí separa del crumb. Cubre las 12 de servicios y
   clientes (EN+ES) con un selector, sin tocar HTML. */
.top-grid .pt{padding-top:0 !important}
@media (max-width:767px){.svc-section:has(.pt){padding-top:0 !important}}
@media (max-width:767px){
  :root{--esp-header:75px}
  .nav{height:75px !important}
  .nav .logo img,.brand-logo{height:18px !important}
  /* height fija (arriba, regla 3b) es la fila cerrada; con el menú abierto
     nav.mainnav se va a una 2a fila (flex-wrap) y necesita que el wrap CREZCA,
     si no se solapa con el contenido de abajo en vez de empujarlo (17-ago,
     cazado al probar el menú abierto de verdad, no solo cerrado). */
  header.top:has(nav.mainnav) .wrap{padding:0 20px !important;height:auto !important;min-height:75px}
  header.top:has(nav.mainnav) .langsel{height:75px;padding:0 18px !important}
  /* 19-ago (QA medido, G1-3, familia hn = home + 76 con hero): el padding 30 de
     escritorio llevaba !important y esta línea no → las celdas seguían a 30 y el
     burger (.burger, sin flex ni altura) quedaba arriba (y 0-44) y FUERA del
     viewport (caja 348→409 en 390). Cliente: celdas 71/76/77, hamburger 28×24
     centrado (y 23-47), bandera sin caret. */
  .nav-right>*{padding:0 18px !important}
  .nav-right .burger{display:flex !important;align-items:center !important;justify-content:center !important;height:75px !important;padding:0 14px !important;box-sizing:border-box}
  .nav-right .langsel .car{display:none !important}
  .wrap,.wrap-team{padding-left:20px !important;padding-right:20px !important}
  /* Banda de foto: cliente 224 visibles bajo su header estático (74); como el
     nuestro es fijo y flota encima, la banda mide 300 para dejar ~225 visibles. */
  .page-hero.page-hero--espejo{min-height:300px !important;height:300px !important}
  .pt{padding:28px 0 4px}
  .pt-h1,.pagehero:not(.pagehero--img) h1,.pagehero--img h1,.hero-left h1{font-size:24px !important;line-height:1.1 !important}
  h2,.section-h2,.hero-right .kh{font-size:22px !important}
  /* el h2 de columna de servicios/clientes va a 24 en escritorio (cliente); en
     móvil el cliente lo deja en 24 = su h1, pero el gate de jerarquía (h1 > h2)
     manda aquí: 22. */
  .top-grid>div:first-child .section-h2{font-size:22px !important}
  /* El 36px de PE (§15) tiene más especificidad que la línea de arriba y se
     colaría a móvil rompiendo el gate h1>h2 — se cancela aquí. */
  body:has(.pe-net) .top-grid>div:first-child .section-h2{font-size:22px !important}
  /* Industria: la banda de "Representative Experience" (§14) hereda el 48px de
     escritorio si no se resetea aquí — rompería el gate h1>h2. .wrap va a
     padding 20 en móvil (línea de abajo), la banda cancela con -20. */
  main>.wrap>h2:has(+.tcar){font-size:22px !important;padding:24px 0 8px 32px !important}
  main>.wrap>h2:has(+.tcar)::before{top:34px;width:32px;height:6px}
  main>.wrap>h2:has(+.tcar)::after{left:-20px;right:-20px;bottom:-16px}
  main>.wrap>h2:has(+.tcar)+.tcar{padding:16px 0 24px !important}
  main>.wrap>h2:has(+.tcar)+.tcar::before{left:-20px;right:-20px;top:-16px}
  main>.wrap>h2:has(+.tcar.people-tcar){font-size:22px !important}
  main>.wrap>h2:has(+.tcar.people-tcar)+.tcar{padding:0 !important}
  main>.wrap>h2:has(+.tcar.people-tcar)+.tcar::before{display:none !important}
  .tcar-track>.qcard{flex:0 0 100% !important}
  h3,.tx-2col h2,.tx-body h2,.kh-stat .n{font-size:20px !important}
  .card h3,.cs-card h3,.svc-card h3,.news-card h3{font-size:20px !important}
  p{font-size:16.8px !important;line-height:1.5 !important}
  /* 19-ago (QA medido): el p de CUERPO sí coincide (16.8/25.2), pero el del hero
     del home y los li del cliente van a 18/30.6. */
  li,.hero-left p{font-size:18px !important;line-height:1.7 !important}
  .card p,.cs-card p,.svc-card p,.faq-item p,.kh-stat .l{font-size:16px !important}
  .hero-right{grid-template-columns:1fr;row-gap:22px}
  .tx-2col{grid-template-columns:1fr !important;gap:28px !important}
  .tx-left{max-width:260px !important;margin:0 auto !important}
  /* CTA final (sección 13): a una columna, botón debajo del texto — el grid
     de 2 columnas dejaba el botón flotando a media altura del párrafo. */
  .cta-band .wrap-team{grid-template-columns:1fr !important}
  .cta-band .cta-btn{grid-column:1;grid-row:3;justify-self:start !important;margin-top:20px !important}
}

/* ---- 11. Tier escritorio grande (≥1281): el cliente NO es estático arriba de
        1280 — brinca a header grande, y así lo cazó Luis (20-ago, capturas a
        ~1509): logo 249×34 (nuestro seguía 198×27), nav 14.4px con padding
        horizontal 16 (seguíamos 12px/8). Medido en home + business-cases +
        our-team @1509 y @1920: el tier aplica en las DOS familias de header.
        El breakpoint es exacto: 1280 aún compacto, 1281 ya grande. Por eso el
        gate daba verde: qa-tipografia-vs-cliente corre a 1280, el último pixel
        del tier compacto. 🔴 El gate debe correrse TAMBIÉN con --ancho 1440. */
@media (min-width:1281px){
  .nav .logo img,.brand-logo{height:34px !important}  /* 249×34; ratio idéntico (7.3) — 602px natural = 2.4x retina, aguanta sin asset nuevo */
  .nav>ul>li>a,.nav>ul>li>.hn-btn{font-size:14.4px !important;padding:32px 16px !important}
  .mn-btn,nav.mainnav>a{font-size:14.4px !important;padding:6px 16px !important}
}

/* ---- 12. Hero del home: geometría medida del cliente (20-ago, dos pasadas
        idénticas por ancho, con getAnimations().finish() — su hero trae
        entrada animada translateY y una medición ingenua caza el estado
        intermedio: el kh daba 215 o 165 según el instante; los números de
        abajo son el estado FINAL). Cliente: contenedor del hero útil 1440
        (box 1480 + pad 20; más ancho que el cuerpo 1400/60) · h1 y=155 ·
        kh = h1+10 · stats = kh+74 · p y=292 · el hero NO usa min-height:
        es contenido + aire abajo (por eso "Our Services" abre en 688 @1280 y
        657 @1509 — el párrafo pierde una línea al ensancharse). El aire va en
        129, no 212: los otros 83 los pone el padding-top de NUESTRA .section
        siguiente, ya contados en el y del h2 (verificado local: con 212
        quedaba Δ83 exacto en los 3 anchos) ·
        columnas 55.35% / hueco 85 (637/1240 → 752/1440) · ≥1680 sube a
        pad-top 194 / aire 167 (bp medido: 1660 aún 155, 1680 ya 194). */
@media (min-width:1001px){
  .hero{min-height:0 !important;align-items:flex-start !important}
  .wrap.hero-grid{max-width:1480px !important;padding:155px 20px 129px !important;
    grid-template-columns:55.35fr 44.65fr !important;column-gap:85px !important;align-items:start !important}
  .hero-left p{max-width:none !important}
  .hero-left .rule{margin:12px 0 13px !important}
  .hero-right{padding-top:10px !important}
  .hero-right .kh{margin:0 0 34px !important}
}
@media (min-width:1680px){
  .wrap.hero-grid{padding-top:194px !important;padding-bottom:167px !important}
}

/* ---- 17. Hub de industrias (/experience/industries, /es/.../industrias):
   20-ago (Saulo+Yun). Nuestra tarjeta montaba el bloque de texto -52px
   ENCIMA de la foto (tarjeta flotante superpuesta) -- diseño nuestro, no del
   cliente. Medido con CDP contra /experience/industries: el cliente pone la
   foto y el contenido (h4+p+botón, con su propia sombra) DEBAJO, sin
   superponer nada. */
/* 21-sep (Yun): SUPERA la nota del 20-ago de arriba. Medido hoy el computado del cliente
   (.atmc-gallery-05, a 1920 y 1280): el cuadro SÍ se monta sobre la foto (margin-top
   -4rem), mide 90% del ancho alineado a la izquierda, padding 2rem, sombra shadow-md;
   la foto va 5:4 (padding-bottom 80%) con radio 4px y 1rem abajo; columnas a 24px. */
.indgrid{column-gap:24px !important;row-gap:24px !important}
.indcard-img{aspect-ratio:5/4 !important;border-radius:4px;margin-bottom:16px}
.indcard-body{margin:-64px 0 0 !important;width:90%;padding:32px !important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06) !important}
/* Botón = .atmc-btn-primary del cliente (medido 21-sep): 16px/700 sin mayúsculas, 12x16 de
   relleno, radio 4, borde 2px navy. Hover: la TARJETA no hace nada; solo el botón sube 3px
   (sin cambiar de color). Se quitan nuestro levantar-la-tarjeta y el oscurecer-al-pasar. */
.indcard .indbtn{font-size:16px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:.05px !important;line-height:16px !important;padding:12px 16px !important;border-radius:4px !important;background:#203864 !important;border:2px solid #203864 !important;transition:transform .2s !important}
.indcard:hover .indcard-body{transform:none !important}
.indcard:hover .indbtn{background:#203864 !important}
.indcard .indbtn:hover{transform:translateY(-3px) !important}

/* ---- 19. Dropdowns del nav: NAVY, no blancos (20-ago, Saulo+Yun).
   Medido en vivo en el home del cliente (su .hs-menu-children-wrapper):
   fondo rgb(32,56,100) = --navy, enlaces BLANCOS a 14.4px, padding 0 16px,
   sin borde ni sombra. Nosotros los teníamos blancos con texto navy, borde
   #e2e0db y sombra.
   Solo ESCRITORIO (>1000px): abajo de eso nuestro submenú se despliega
   inline dentro del panel del burger (border-left, position:static) y el
   selector de idioma usa su propio panel flotante blanco — otra maqueta,
   no la del cliente, y no es lo que se revisó. */
@media(min-width:1001px){
  .hn-sub,.mn-sub{background:var(--navy) !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:8px 0 !important}
  .nav ul .hn-sub a,.hn-sub a,.mn-sub a{color:#fff !important;font-size:14.4px !important;padding:10px 16px !important}
  .nav ul .hn-sub a:hover,.hn-sub a:hover,.mn-sub a:hover{background:rgba(255,255,255,.12) !important;color:#fff !important}
  /* El idioma vive en el mismo submenú: su "actual" iba en gris #5b6675,
     ilegible sobre navy. */
  .lang-sub .lang-cur{color:rgba(255,255,255,.65) !important}
}

/* ---- 18. Insights (/insights): 20-ago (Saulo+Yun). El intro (eyebrow +
   párrafo bajo el h1) y su ancho iban centrados -- el resto del sitio ya
   deja el cuerpo alineado a la izquierda (home §10, decisión de Yun 18-ago),
   consistencia con ese patrón.
   🪤 20-ago (2a ronda): esta regla salió SIN acotar y .secintro lo comparten
   12 páginas -- los 10 de insights (donde sí se quería) y los 2 hubs de
   industrias (donde NO: el cliente los tiene CENTRADOS, medido en su
   /experience/industries). Se excluye el hub de industrias por su marcador
   data-hub, el mismo que ya usa la §6c. */
body:not(:has([data-hub="industrias"])) .secintro{text-align:left !important;margin-left:0 !important;margin-right:0 !important;max-width:none !important}
/* Hub de industrias (20-ago, Saulo): "Every hub gathers its transactions…" a
   la izquierda. .sectag lo comparten los 2 hubs de industrias y los 2 de
   insights -- se acota por data-hub para no repetir la fuga de arriba. */
body:has([data-hub="industrias"]) .sectag{text-align:left !important}
/* "News & Releases" del hub de insights: pasó de grid de 3 a carrusel con
   las 10 (mismo patrón .tcar que industrias/home).
   🪤 20-ago (2a ronda): en v43 se inyectó el MARKUP del carrusel pero
   insights.html NO tiene los estilos .tcar -- esos viven en el <style> de
   cada página que ya traía carrusel (home, industrias, servicios), y este
   hub nunca tuvo uno. Sin ellos .tcar-track se quedaba en display:block y
   las 10 tarjetas se apilaban a 1320px de ancho. Aquí va el bloque completo,
   acotado a .tcar--news para no tocar los otros carruseles del sitio. */
.tcar--news{position:relative;margin-top:22px}
.tcar--news .tcar-track{display:flex;align-items:stretch;gap:26px;overflow-x:auto;
  scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:2px;
  -ms-overflow-style:none;scrollbar-width:none}
.tcar--news .tcar-track::-webkit-scrollbar{display:none}
.tcar-track>.nr-card{flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start}
@media(max-width:900px){.tcar-track>.nr-card{flex-basis:calc((100% - 26px)/2)}}
@media(max-width:640px){.tcar-track>.nr-card{flex-basis:100%}}
/* Flechas navy rellenas, centradas sobre la FOTO (no sobre la tarjeta
   completa: el texto de abajo la hace mucho más alta que en home). */
.tcar--news .tcar-btn{position:absolute;top:150px;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:0;
  font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 20px rgba(16,28,48,.18);transition:.2s}
.tcar--news .tcar-btn:hover{background:#0f1c30}
.tcar--news .tcar-btn.prev{left:-16px}
.tcar--news .tcar-btn.next{right:-16px}
.tcar--news .tcar-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.tcar--news .tcar-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;
  background:#c3cad4;cursor:pointer;transition:.2s}
.tcar--news .tcar-dots button.on{background:var(--navy);transform:scale(1.3)}

/* ---- 4-sep-2026 · Ajustes del cliente (Excel de Fernanda), tanda 1 ------------------------
   Casos de negocio (celda #54): los datos Target / Transaction Type / Industries / Geography
   en formato ABIERTO 2x2 como su sitio (títulos navy, bold, subrayados; valores gris), sin
   la tabla con bordes ni el h2 "Case at a glance" (se quitó del HTML). Las industrias SIGUEN
   siendo enlaces (texto plano, subrayado en hover). Divisor antes de SITUATION; SITUATION y
   OUTCOME en navy. El hero con foto volvió al agregar pagehero--img en #bc-hero (80 pág). */
.case-body .facts{border:0 !important;border-radius:0 !important;gap:22px 48px !important;margin:0 0 6px !important;overflow:visible !important}
.case-body .fact{border:0 !important;padding:0 !important}
.case-body .fact dt{font-size:20px !important;letter-spacing:.02em !important;color:var(--navy) !important;font-weight:700 !important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--navy);margin:0 0 10px !important}
.case-body .fact dd,.case-body .fact dd a{color:#6b6c72 !important;font-weight:400 !important;font-size:16px !important;text-decoration:none !important}
.case-body .fact dd a:hover{text-decoration:underline !important}
.case-body .facts+h2{border-top:1px solid var(--esp-linea);padding-top:30px !important;margin-top:36px !important}
.case-body>h2{color:var(--navy) !important}
/* Home, newsletter (fila 8 del Excel): vuelve el formulario real (HubSpot, mismo portal que su sitio),
   con First Name / Last Name / Email en una fila y el botón Subscribe; abajo el bloque de reportes por
   industria con los textos originales del cliente. Los dos botones que había se quitaron del HTML. */
#newsletter .news-form{max-width:760px;margin:0 0 40px}
#newsletter .news-form .hs-form{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end}
#newsletter .news-form .hs-form-field{flex:1 1 200px;margin:0}
#newsletter .news-form .hs-form-field>label{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;color:#333;margin:0 0 6px}
#newsletter .news-form .hs-input{width:100% !important;box-sizing:border-box;height:44px;padding:0 12px;border:1px solid #c9cacf;border-radius:3px;background:#fff;color:#333;font:inherit;font-size:15px}
#newsletter .news-form .hs-error-msgs{list-style:none;margin:4px 0 0;padding:0;font-size:12px;color:#b3261e}
#newsletter .news-form .hs-submit{flex:1 1 100%;margin-top:4px}
#newsletter .news-form .hs-button{background:var(--navy) !important;color:#fff !important;border:0 !important;border-radius:3px;padding:12px 22px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
#newsletter .news-form .hs-button:hover{background:#2b4a80 !important}
#newsletter .news-form .submitted-message{color:var(--navy);font-size:15px}
#newsletter .news-industry{max-width:760px}
#newsletter .news-industry h3{font-size:18px;font-weight:700;color:var(--navy);margin:0 0 8px}
#newsletter .news-industry p{color:#555;margin:0 0 16px}

/* ---- 4-sep-2026 · Ajustes del cliente, tanda 2 (Excel: Services fila 2-3, Clients #60/#67, Home filas 5-9) ---- */
/* Rótulo arriba del h1 ("SERVICES", "CLIENTS", "INDUSTRIES"…): fuera. Una página por rubro = toda la familia. */
.pt-eyebrow{display:none !important}
/* 21-sep (Yun, hallazgo con captura vs sealeassociates.com en vivo): el hub de Industries
   SÍ trae "Industries we serve" arriba del h1 en el sitio real (medido hoy, montaje
   captura-espejo.js). El display:none de arriba se escribió para Services/Clients y se
   filtró sin acotar a toda la familia .pt-eyebrow. Se reactiva solo en el hub (EN+ES),
   que ya trae data-hub="industrias" en el body; no toca Services/Clients ni las 26
   subpáginas de industria (plantilla aparte, sin este atributo). */
body:has([data-hub="industrias"]) .pt-eyebrow{display:block !important}
/* 21-sep (Yun): bloque de título del hub igualado a los valores COMPUTADOS del cliente
   (.atmc-cap / .atmc-intro / .atmc-content-01, medidos a 1920). Color #85868c, rótulo
   con opacity .8 y 1px de tracking, intro 19.2/28.8, las dos líneas de abajo 16/27.2 a
   todo el ancho (el max-width 780 de la línea ~263 las partía), 12px entre ellas, sin
   el hueco de 52px entre h1 e intro, 24px antes del chevron. */
body:has([data-hub="industrias"]) .pt{padding-bottom:0 !important}
body:has([data-hub="industrias"]) .pt-eyebrow{color:#85868c !important;opacity:.8;letter-spacing:1px !important;line-height:12px !important;margin:0 0 8px !important}
body:has([data-hub="industrias"]) .secintro{margin-top:0 !important}
body:has([data-hub="industrias"]) .secintro .intro{font-size:19.2px !important;line-height:28.8px !important;color:#85868c !important;margin:0 0 16px !important}
body:has([data-hub="industrias"]) main .secintro .lead{max-width:none !important;font-size:16px !important;line-height:27.2px !important;color:#85868c !important;margin:0 !important}
body:has([data-hub="industrias"]) main .secintro .lead+.lead{margin-top:12px !important}
body:has([data-hub="industrias"]) .chevdiv{margin-top:24px !important;height:33px;gap:8px !important;color:#85868c !important}
/* Chevron = el del cliente (FA chevron-down relleno, 22x25, #85868c, opacidad plena, 8px a cada lado); línea 1px #dfdbd2 */
body:has([data-hub="industrias"]) .chevdiv svg{opacity:1 !important;width:22px;height:25px}
body:has([data-hub="industrias"]) .chevdiv::before,body:has([data-hub="industrias"]) .chevdiv::after{background:#dfdbd2 !important}
/* 11-sep: la línea de abajo (4-sep, "misma altura... 2000x300") decía 300 y
   le ganaba SIN !important al height:320px!important de arriba (línea ~825,
   19-ago) — max-height topa aunque height gane por especificidad, son
   propiedades distintas. Medido HOY contra el DOM real del cliente en
   sell-side-advisory: 320px, no 300. Yun lo notó comparando las dos
   franjas. Se quita el tope; el height correcto ya vive en los media
   queries de arriba (320 desktop / 98 móvil). */
/* Breadcrumb: se queda, discreto */
.crumb,.crumb a{color:var(--esp-gris) !important;font-size:12px !important;font-weight:400 !important}
.crumb{margin-top:16px !important;margin-bottom:0 !important}
/* 16-sep (Luis): en las 414 páginas de transacción las migas quedaban pegadas a las etiquetas (0 px). Acotado: solo cuando van seguidas de .pills. */
.pagehero .crumb+.pills{margin-top:10px !important}
/* Footer compacto, sin línea divisoria antes del copyright, logo con su proporción. Las 5 columnas se quedan. */
footer.site{padding:36px 0 18px !important}
/* 9-sep (Luis autoriza): el texto del pie baja de 14px a 12.8px. Lo defendido son
   las 5 columnas y sus 13 enlaces, no la tipografia; bajar el tamano es lo que nos
   deja llegar a su altura sin quitar un solo enlace. Medido hoy: su pie ENTERO son
   3 textos a 12.8px (copyright, Privacy, Terms). El interlineado se queda en 1.55:
   el suyo va a 1.0 porque es una sola linea, el nuestro tiene columnas. */
footer.site p,footer.site a,footer.site li{font-size:12.8px !important;line-height:1.55 !important}
footer.site h4{margin:0 0 8px !important}
footer.site .foot-top{padding-bottom:18px !important;border-bottom:0 !important;gap:28px !important}
footer.site .foot-top img{height:auto !important;width:190px !important;max-width:100% !important;margin-bottom:14px !important}
footer.site .foot-bottom{padding-top:6px !important}
/* Pie: el cliente pone el LinkedIn ARRIBA y Privacy/Terms DEBAJO, los dos pegados a
   la derecha (medido a 1440: LinkedIn x=1216 y=6986; Privacy x=1270 y=7107). Nosotros
   los teniamos en la misma linea. Se reordena por CSS, sin tocar el markup de las 640
   paginas: fila 1 = copyright a la izquierda + LinkedIn a la derecha; fila 2 = los dos
   enlaces legales a la derecha. */
footer.site .foot-bottom{flex-wrap:wrap;align-items:center}
footer.site .foot-bottom .copy{order:1}
footer.site .foot-bottom .social{order:2}
footer.site .foot-bottom>span:not(.copy):not(.social){order:3;flex-basis:100%;text-align:right}
/* Home: botón "All Transactions" con borde navy; íconos de LinkedIn/correo del equipo más grandes;
   Our Presence más compacto (título, texto, oficinas, aire); bloque del newsletter al ancho del cliente
   15-sep (Yun, comparó captura propia vs cliente): el de ellos NO es blanco, es
   transparente (`.atmc-btn-outline-primary{background:none!important}` en su
   template_main.min.css) — se ve gris porque hereda el gris de la sección
   #transactions, no porque tenga un fondo gris propio. Lo anterior (blanco) era
   un supuesto sin medir, quedó mal etiquetado como "como el cliente". */
#transactions .btn-outline{background:none !important;color:var(--navy) !important;border:1px solid var(--navy) !important}
#transactions .btn-outline:hover{background:var(--navy) !important;color:#fff !important}
/* El botón lleva la flecha en un BLOQUE APARTE, separado por un divisor vertical de
   alto completo (captura del cliente, 8-sep). El chevron es SVG con currentColor, así
   que sigue al texto: navy en reposo, blanco en hover, sin regla de color extra. */
/* Carrusel de tombstones (500 paginas: transacciones, industrias, perfiles,
   servicios, clientes y los 2 homes). La tarjeta del cliente mide 522px de alto SIEMPRE; la nuestra
   sale de aspect-ratio 13/25 sobre un ancho calc(), asi que crece con la pantalla
   (medido: 1280 -> 524px = igual que ellos; 1440 -> 601px = 79px mas alta). Se topa
   el ancho en 271px, que por la misma proporcion da 521px de alto, y el marco navy
   conserva su relacion (el asset es 1300x2500, deformarlo ovala las esquinas). */
/* 22-sep: medido de nuevo a 1280, 1440 y 1920 — la tarjeta del cliente es
   FIJA de 260x500 en los tres, con la imagen a su tamaño natural (230x360),
   30 arriba y 15 a los lados. La nota de arriba decía 522 de alto y estaba
   mal; el tope de 271 venía de ese número. A 260 la imagen cae en su tamaño
   natural y los huecos salen idénticos a los suyos sin escalar el archivo. */
.tcar-track>.tomb{max-width:260px}
/* 15-sep (Yun, captura: "las tarjetas se ven apretadas"): el track base trae
   gap:22px (de <style> de cada página) y se quedaba corto contra el del
   cliente. Primer intento (146px, derivado de medir el widget del cliente
   detrás de un scroll-reveal) se pasó — Yun comparó captura contra captura
   y salía más separado que el de ellos. Ajustado a 100px por comparación
   directa de las dos capturas (Yun: "es poco", solo hacía falta afinar, no
   revertir). Solo en escritorio (min-width:900px); en 3 y 2 columnas se deja
   el gap base para no comerse el ancho de tarjetas ya angostas. */
@media(min-width:900px){
  .tcar-track:has(>.tomb){gap:100px !important}
}

/* ---- 23-sep-2026 · Carrusel de tombstones: el reparto del cliente ----------
   Yun: "debe quedar igual a como esta en la pagina original... si ellos
   pudieron disenar la pagina asi, nosotros podemos igualar el diseno".

   Medido en su /about-us/our-team/james-seale a DOS anchos, y ahi esta la
   clave: su hueco NO es fijo.
                        1440              1920
     area del carrusel  48 a 1392 (1344)  248 a 1672 (1424)
     hueco              76                96
     tarjetas           4 de 260          4 de 260
     margen a los lados 38                48

   El patron: reparte lo que sobra en CUATRO partes iguales — los 3 huecos y
   los 2 medios margenes. 1344-1040 = 304, /4 = 76. 1424-1040 = 384, /4 = 96.
   Es un space-around de libro. No se puede usar justify-content porque el
   track lleva 21 tarjetas y hace scroll, asi que se hornea por ancho.

   Su area de carrusel es 24px MAS ANCHA que nuestro .wrap (1344 contra 1320),
   por eso el carrusel sale 12px por lado. Con eso los numeros caen exactos:
   tarjetas de 86 a 1354 y flechas en 0 y 1392, que es lo suyo al pixel. */
@media(min-width:1024px){
  .tcar:not(.tcar--news){margin-left:-12px !important;margin-right:-12px !important}
  /* scroll-padding ademas del padding: sin el, el scroll-snap:start de cada
     tarjeta se alinea al BORDE del track y se come el margen, dejando la
     primera tarjeta pegada a la flecha. */
  /* :has(.tomb) y no :not(.tcar--news): el reparto es de los TOMBSTONES. El
     mismo .tcar lo usa el carrusel de fotos de "Stronger Together" (.cimg),
     que tiene su propio calculo y se descuadraba con estos valores. */
  .tcar:has(.tomb) .tcar-track{gap:76px !important;
    padding-left:38px !important;padding-right:38px !important;
    scroll-padding-left:38px !important;scroll-padding-right:38px !important}
}
@media(min-width:1620px){
  .tcar:has(.tomb) .tcar-track{gap:96px !important;
    padding-left:48px !important;padding-right:48px !important;
    scroll-padding-left:48px !important;scroll-padding-right:48px !important}
}
#transactions .btn-outline{display:inline-flex !important;align-items:stretch !important;padding:0 !important;overflow:hidden}
#transactions .btn-outline .btn-txt{display:flex;align-items:center;padding:13px 26px}
#transactions .btn-outline .btn-car{display:flex;align-items:center;padding:0 15px;border-left:1px solid var(--navy)}
#transactions .btn-outline:hover .btn-car{border-left-color:#fff}
#team .member .links a svg{width:22px !important;height:22px !important}
/* El nombre del director pasa a navy al pasar el cursor, como en su sitio (medido:
   reposo rgb(51,51,51) -> hover rgb(32,56,100)). La celda del Excel decia "algunos
   nombres aparecen en azul": era ESTE hover en su captura, no un color de reposo. */
#team .member-main h3{transition:color .2s}
#team .member-main:hover h3{color:var(--navy)}
/* Separacion vertical entre las dos filas de perfiles. Medido de nombre a nombre:
   ellos 574px, nosotros 524px. Su equipo va en modulos sueltos de HubSpot y el
   nuestro en tarjetas, asi que no se puede calcar el gap; se iguala el PASO, que
   es lo que la celda describe ("la separacion entre filas es menor"). Solo el
   row-gap: el de columna se queda en 28px. */
#team .team-grid{row-gap:78px}
/* 9-sep: la seccion de presencia se ancla por .offices, no por #presence: ese id
   solo existe en el home EN y toda la compactacion de la tanda 2 se habia quedado
   fuera del ES (medido: ES 84px de padding, titulo 36, fotos cuadradas, 543px de alto
   contra 414 del EN). .offices vive solo en index.html y es/index.html. */
#presence,body:has(#clients) section:has(.offices){padding:56px 0 !important}
#presence .section-title,body:has(#clients) section:has(.offices) .section-title{font-size:32px !important}
#presence .lead,body:has(#clients) section:has(.offices) .lead{font-size:19.2px !important}  /* 9-sep: 17px era de la tanda 2; el suyo mide 19.2 */
/* 9-sep (revision de Yun): medido en su home, las fotos de oficinas son CUADRADAS
   (213x213) y no 4:3, el aire entre el lead y las fotos es 66px y la separacion
   entre fotos 24px. El aspect-ratio 4/3 venia de la tanda 2 y estaba mal; esta
   manana lo propague al ES, que ya las tenia cuadradas. Se corrige en los dos. */
#presence .offices,body:has(#clients) .offices{margin-top:66px !important;gap:24px !important}
#presence .office,body:has(#clients) .office{aspect-ratio:1/1 !important}
#newsletter .news-form,#newsletter .news-industry{max-width:900px !important}

/* ==== 9-sep-2026 — Casos de negocio (80 págs EN+ES) como los presenta el cliente.
   Medido contra /experience/business-cases/woodcrafters en su sitio, a 1280 (medir-hero.js):
   su menú va TRANSPARENTE flotando sobre la foto (header static, fondo transparente) y el hero
   mide 483px con el menú adentro (fila con la foto de fondo: top 0, alto 483; h1 en y=149); título 48px blanco centrado; botones a 16px. Nosotros
   traíamos banda navy de 105px + franja de foto de 221px + título 32px + botones 13.6px, y
   eso es "la foto del header sigue mal" que Yun levantó 3 veces (8-sep). El velo inline de los
   80 casos pasó de un plano .58 a un degradado (.55 arriba para el menú → .28 en el cuerpo),
   mismo patrón que las internas (.page-hero--espejo). Mismo mecanismo que los hubs (6b). */
body:has(#bc-hero.pagehero--img) header.top:has(nav.mainnav){
  position:absolute !important;top:0;left:0;right:0;width:100%;
  background:transparent !important;box-shadow:none !important;border-bottom:1px solid rgba(255,255,255,.3) !important;z-index:50}
body:has(#bc-hero.pagehero--img) .mn-btn,body:has(#bc-hero.pagehero--img) nav.mainnav>a{color:#fff !important}
body:has(#bc-hero.pagehero--img) .navtog,body:has(#bc-hero.pagehero--img) .langsel .car,
body:has(#bc-hero.pagehero--img) header.top:has(nav.mainnav) .ss-open{color:#fff !important}
body:has(#bc-hero.pagehero--img) header.top:has(nav.mainnav) .ss-open,
body:has(#bc-hero.pagehero--img) .langsel{border-left-color:rgba(255,255,255,.28) !important;border-right-color:rgba(255,255,255,.28) !important}
/* 15-sep (Yun, captura: header sólido navy en /experience/transactions —
   "el header nuestra página no está bien"): esta página (+ su gemela ES)
   tiene .pagehero.pagehero--img + nav.mainnav, EXACTO el mismo combo que
   casos de negocio arriba, pero su hero nunca llevó `id="bc-hero"` (nadie
   la conectó a ese fix) ni tiene `.profhead` (el otro camino que sí cubre
   perfiles). Verificado contra el sitio real del cliente: header transparente
   flotando sobre la foto, igual que casos y perfiles — se replica SOLO el
   tratamiento del header (no el resto de #bc-hero: min-height/hbtns/gradiente
   son de casos de negocio, esta página no los usa). `.tombgrid` es exclusivo
   de estas 2 páginas (EN+ES), verificado con grep. */
body:has(.tombgrid) header.top:has(nav.mainnav){
  position:absolute !important;top:0;left:0;right:0;width:100%;
  background:transparent !important;box-shadow:none !important;border-bottom:1px solid rgba(255,255,255,.3) !important;z-index:50}
body:has(.tombgrid) .mn-btn,body:has(.tombgrid) nav.mainnav>a{color:#fff !important}
body:has(.tombgrid) .navtog,body:has(.tombgrid) .langsel .car,
body:has(.tombgrid) header.top:has(nav.mainnav) .ss-open{color:#fff !important}
body:has(.tombgrid) header.top:has(nav.mainnav) .ss-open,
body:has(.tombgrid) .langsel{border-left-color:rgba(255,255,255,.28) !important;border-right-color:rgba(255,255,255,.28) !important}
/* El header ahora flota ENCIMA de la foto (position:absolute, arriba) y ya no
   empuja el contenido hacia abajo — sin esto el crumb (medía top:50) y el h1
   (top:74) quedaban tapados por el header (105px de alto). Se sube el padding
   del pagehero base (34px) a 139px = 105 (alto del header) + 34 (el aire
   original), solo para estas 2 páginas. */
body:has(.tombgrid) .pagehero.pagehero--img{padding-top:139px !important}
/* 16-sep (Luis): el breadcrumb no se leía (12px gris #85868c directo sobre la foto).
   Mismo tratamiento que ya tienen las migas de casos (#bc-hero): texto blanco .85
   sobre una franja oscura translúcida solo detrás del texto. El cliente no trae
   migas; se quedan por BreadcrumbList (decisión Luis 7-sep). */
body:has(.tombgrid) .pagehero--img .crumb{display:inline-block !important;color:rgba(255,255,255,.85) !important;
  background:rgba(15,25,45,.78) !important;padding:3px 10px !important;border-radius:3px !important}
body:has(.tombgrid) .pagehero--img .crumb a{color:rgba(255,255,255,.85) !important}
#bc-hero.pagehero--img{min-height:484px !important;padding:104px 0 0 !important;box-sizing:border-box !important;
  display:flex !important;align-items:center !important;justify-content:center !important}
#bc-hero.pagehero--img>.wrap{width:100% !important}
#bc-hero.pagehero--img h1{font-size:48px !important;line-height:1.15 !important;font-weight:700 !important;color:#fff !important;
  max-width:980px !important;margin:0 auto !important;text-align:center !important}
/* El breadcrumb SE QUEDA (BreadcrumbList / jerarquía para Google e IA; decisión Luis 7-sep), discreto y legible. */
#bc-hero.pagehero--img .crumb{color:rgba(255,255,255,.85) !important;margin:0 0 12px !important}
#bc-hero.pagehero--img .crumb a{color:rgba(255,255,255,.85) !important}
#bc-hero.pagehero--img .hbtns{margin-top:28px !important;gap:14px !important}
#bc-hero.pagehero--img .hbtn{font-size:16px !important;padding:11px 24px !important;line-height:1.3 !important}
#bc-hero.pagehero--img .hbtn--outline{border-color:#fff !important}
/* Rejilla de datos: el cliente la llena por COLUMNAS (Target / Transaction Type en la primera fila,
   Industries / Geography en la segunda; el DOM es el mismo). Etiquetas 30px/900, valores 19.2px;
   párrafos 19.2px/28.8. Su gris de texto (#85868c) reprueba AA a ese tamaño: se usa #6b6c72 (5.3:1).
   Tombstone: el suyo se muestra a 260px (el nuestro iba a 240). */
.case-body .facts{grid-auto-flow:column !important;grid-template-rows:auto auto !important;gap:28px 48px !important}
.case-body .fact dt{font-size:30px !important;font-weight:900 !important;line-height:1.2 !important;text-underline-offset:7px !important}
.case-body .fact dd,.case-body .fact dd a{font-size:19.2px !important;line-height:1.5 !important}
.case-body p{font-size:19.2px !important;line-height:1.5 !important;color:#6b6c72 !important}
.case-grid{grid-template-columns:260px 1fr !important;gap:48px !important}
.case-tomb img{width:260px !important;max-width:100% !important;height:auto !important}
/* "More Information" baja suave (celda del Excel: el desplazamiento era demasiado brusco). */
body:has(#bc-hero.pagehero--img){scroll-behavior:smooth}
html:has(#bc-hero.pagehero--img){scroll-behavior:smooth}
@media(max-width:760px){
  .case-grid{grid-template-columns:1fr !important}
  .case-tomb img{width:220px !important}
}
@media(max-width:640px){
  #bc-hero.pagehero--img{min-height:400px !important;padding:130px 0 48px !important}
  #bc-hero.pagehero--img h1{font-size:28px !important;line-height:1.15 !important}
  #bc-hero.pagehero--img .hbtn{font-size:14px !important;padding:10px 18px !important}
  .case-body .facts{grid-auto-flow:row !important;grid-template-rows:none !important;gap:20px 0 !important}
  .case-body .fact dt{font-size:22px !important}
  .case-body .fact dd,.case-body .fact dd a,.case-body p{font-size:17px !important}
}

/* ==== 9-sep-2026 — Contact Us: fotos de los directores = las SUYAS (2000x1451, apaisadas,
   /hubfs/4-Nov-07-2024…png etc., ya en el repo desde el 6-ago como contacto-*.webp 880x638, las mismas del bloque Contact del home). Las nuestras eran retratos
   verticales de 720x900 metidos con object-fit:cover en una caja de 307px: se cortaba la cabeza
   (captura de Yun 8-sep). Con la foto apaisada la caja toma su proporción, sin altura fija. */
.dir-card .adv-ph{height:auto !important;aspect-ratio:880/638 !important;object-fit:cover !important;object-position:center !important}
@media (max-width:767px){.dir-card .adv-ph{height:auto !important}}
/* Íconos de LinkedIn y correo bajo cada director (celda del Excel: "Faltan los íconos de LinkedIn y
   de correo electrónico"). En su sitio son enlaces VIVOS a los 6 perfiles + mailto; se restauran con
   sus mismas URLs. Sustituyen al correo en texto, que ellos no muestran. */
.dir-card .dir-links{display:flex !important;gap:10px !important;justify-content:center !important;margin-top:14px !important}
.dir-card /* 9-sep (medido por Yun contra su sitio): el circulo va a 40px, no 34 — mismo
   cambio que ella aplico a los iconos del equipo en el home. El glifo se queda
   en 16px, como quedo alla. */
.dir-ico{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:40px !important;height:40px !important;border-radius:50% !important;background:var(--navy) !important;color:#fff !important;text-decoration:none !important}
.dir-card .dir-ico:hover{background:#3b5aa0 !important}
/* Migas sobre la foto: 12px blancos no pasan AA sin oscurecer TODA la foto; una pastilla
   translúcida detrás del texto resuelve solo esa franja (el cliente ni siquiera trae migas). */
#bc-hero.pagehero--img .crumb{display:inline-block !important;background:rgba(15,25,45,.78) !important;padding:3px 10px !important;border-radius:3px !important}
#bc-hero.pagehero--img .crumb-wrap{text-align:center}
/* Sombra de lectura detrás del bloque de texto (título + botones), no sobre toda la foto: los
   bordes de la imagen quedan claros como en su sitio y el texto pasa AA. Medido 9-sep con
   qa-contraste-header sobre los 12 casos de foto más clara. */
#bc-hero.pagehero--img>.wrap{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(15,25,45,.48) 0%,rgba(15,25,45,.30) 45%,rgba(15,25,45,.10) 80%,rgba(15,25,45,0) 100%) !important;padding-top:64px !important;padding-bottom:64px !important}
/* ==== 9-sep — Casos, bloque de contacto al final (celda del Excel, fila 6 de Woodcrafters: "la sección de
   contacto a fondo gris claro"; además el título salía oscuro sobre navy, ilegible). La sección "Market
   intelligence" (3 enlaces a los hubs de reportes, ya enlazados desde el menú) se quitó del HTML de los 80. */
.offer{background:#f4f5f7 !important;color:#333 !important;margin-top:48px !important}
.offer h2{color:var(--navy) !important;font-size:30px !important;line-height:1.2 !important}
.offer p{color:#6b6c72 !important;font-size:17px !important}
.offer .btn{background:var(--navy) !important;color:#fff !important}
.offer .btn:hover{background:#3b5aa0 !important}
/* Banner de cita de los casos (fila 4 del Excel): texto más grande, bold, blanco, sin comillas (las comillas se
   quitaron del HTML en los 80; medido en su sitio: 36px/700 blanco, franja 169px). Las dos fotos de abajo un poco
   más bajas (pedían "reducir un poco la altura"): 445px -> 360px. */
.qdivider{padding:44px 24px !important;margin-top:56px !important}
.qdivider p{font-size:36px !important;font-weight:700 !important;line-height:1.25 !important;max-width:1040px !important;color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.testi-grid{align-items:start !important}
.tphotos img{height:360px !important;min-height:0 !important}
@media(max-width:640px){.qdivider p{font-size:22px !important}.tphotos img{height:220px !important}}
/* ==== 9-sep (sesion Yun) — Home EN+ES: escala de texto e iconos del equipo como su sitio.
   ACOTADO a los dos homes con body:has(#clients) (#clients existe solo en index.html y
   es/index.html): Contact Us lo lleva Saulo en paralelo y no se toca. Regla de acotar
   todo selector nuevo, cierre 20-ago.
   Medido 9-sep contra www.sealeassociates.com a 1280, apareando parrafos por su texto:
     #services .lead-left    18px   -> 19.2px
     #clients .lead          18px   -> 19.2px
     #transactions .lead     18px   -> 19.2px
     #presence .lead         17px   -> 19.2px   (la regla de 17px era de la tanda 2)
     #newsletter .news-sub   18px   -> 19.2px
     #newsletter p (2o)      18px   -> 16px     (este BAJA: ellos lo tienen mas chico)
   Las 6 tarjetas de services y clients ya estan en 16px como ellos, y el intro de #top
   en 18px como ellos: no se tocan.
   Iconos de LinkedIn/correo del equipo (celda del Excel "los iconos son mas pequenos"):
     circulo   34x34 -> 40x40      glifo 22x22 -> 16x16      separacion 12px -> 16px
   El glifo BAJA: el suyo mide 14x16 y el nuestro 22, por eso el nuestro se ve macizo.
   PENDIENTE: propagar la escala a las hermanas cuando Saulo suelte Contact Us. */
body:has(#clients) #services .lead-left,
body:has(#clients) #clients .lead,
body:has(#clients) #transactions .lead,
body:has(#clients) #newsletter .news-sub{font-size:19.2px !important}
body:has(#clients) #newsletter p:not(.news-sub){font-size:16px !important}
body:has(#clients) #team .member .links{gap:16px !important}
body:has(#clients) #team .member .links a{width:40px !important;height:40px !important}
body:has(#clients) #team .member .links a svg{width:16px !important;height:16px !important}

/* ==== 9-sep — Grosor aparente e interlineado del cuerpo del home (EN+ES).
   Yun vio el texto de Our Services "en negritas en su sitio y no en el nuestro".
   Medido: los DOS estan en peso 400, 19.2px, blanco, Roboto. No es negrita.
   Lo que cambia el trazo es el suavizado: el <style> del body de estas paginas
   trae -webkit-font-smoothing:antialiased, que ADELGAZA la fuente; ellos usan el
   suavizado normal del sistema y por eso su texto se ve mas solido. Poner 700 nos
   alejaria (quedariamos en 700 contra su 400).
   Interlineado medido contra su home, apareando parrafo por parrafo:
     leads (19.2px)    ellos 28.8px = 1.5   nosotros 30.72px = 1.6
     tarjetas (16px)   ellos 27.2px = 1.7   nosotros 25.6px  = 1.6
   El intro de #top ya coincidia en 30.6px y no se toca. */
body:has(#clients){-webkit-font-smoothing:auto !important}
body:has(#clients) #services .lead-left,
body:has(#clients) #clients .lead,
body:has(#clients) #transactions .lead,
body:has(#clients) #newsletter .news-sub,
body:has(#clients) section:has(.offices) .lead{line-height:28.8px !important}
body:has(#clients) #services p:not(.lead-left),
body:has(#clients) #clients p:not(.lead),
body:has(#clients) #newsletter p:not(.news-sub){line-height:27.2px !important}
/* 9-sep — "All Transactions" pegado al parrafo (revision de Yun en vivo). Medido:
   el hueco entre el fin del texto y el borde del boton es 0px en el nuestro y
   40px en el suyo. El boton ya coincidia de tamano (203x46 contra 201x44). */
body:has(#clients) #transactions .btn-outline{margin-top:40px !important}

/* 9-sep — Bloque "industry reports" del newsletter (revision de Yun). Medido en su
   home: titulo 20px/lh22 (el nuestro salia a 30px pese a la regla de 18px de arriba,
   la pisaba una regla general de h3), subtitulo negro y no gris, boton 16px. */
body:has(#clients) #newsletter .news-industry h3{font-size:20px !important;line-height:22px !important}
body:has(#clients) #newsletter .news-industry p{color:#000 !important}
body:has(#clients) #newsletter .news-industry .btn{font-size:16px !important}

/* 9-sep — LinkedIn del pie como el suyo (revision de Yun). Medido en su home:
   circulo BLANCO solido de 40px sin borde, con el glifo en navy. El nuestro era
   un aro transparente con borde blanco al 20% y el glifo blanco, que sobre el
   navy del pie casi no se ve. El svg trae fill="currentColor", asi que basta con
   cambiarle el color al enlace. Va a las 640 paginas: el pie es el mismo molde. */
footer.site .foot-bottom .social a{width:40px !important;height:40px !important;
  background:#fff !important;border:0 !important;color:#203864 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important}
footer.site .foot-bottom .social a svg{width:16px !important;height:16px !important}

/* ==== 9-sep — Careers EN+ES (hermana, celdas del Excel aplicadas por familia).
   Medido contra /careers y /es/carrera de su sitio: el patron es identico en los
   dos idiomas. Su pagina usa 19.2px para los dos parrafos de entrada y 16px para
   las 5 citas del carrusel de gente; nosotros teniamos 18px parejo, o sea EN MEDIO
   de sus dos valores: 2 suben y 5 BAJAN.
   Acotado con body:has(.qcard), que existe en exactamente 2 paginas (careers.html
   y es/carrera.html). Ojo para quien siga: .intro vive en 66 paginas y .intro-lead
   en 74, incluida contact-us, asi que NO se pueden tocar sin acotar. */
body:has(.qcard) p.intro,
body:has(.qcard) p.intro + p{font-size:19.2px !important;line-height:28.8px !important}
body:has(.qcard) .qcard p{font-size:16px !important;line-height:27.2px !important}

/* ==== 9-sep — Clientes EN+ES (3 + 3 paginas). Mismo hallazgo que en Careers: su
   sitio usa 19.2px en los parrafos de ENTRADA y 16px en el cuerpo; nosotros
   teniamos 18px parejo, en medio de sus dos valores. Medidas las 6 paginas: 18
   diferencias, y la estructura es identica en todas (2 .intro-lead antes del
   <h2 class="section-h2"> y 4 despues), asi que el corte se hace por el h2 y no
   contando posiciones.
   Ancla: se marco <body class="tpl-clientes"> en esas 6 paginas. Hizo falta
   porque .intro-lead vive en 74 paginas (contact-us incluida, que la lleva Saulo)
   y la combinacion .intro-lead + .plain-list todavia da 72: no habia forma de
   acotar por CSS sin marcar la plantilla. */
body.tpl-clientes .intro-lead{font-size:19.2px !important;line-height:28.8px !important}
body.tpl-clientes .section-h2 ~ .intro-lead{font-size:16px !important;line-height:27.2px !important}

/* 9-sep (hallazgo de Yun, medido): los 2 parrafos de "Stronger Together" en Our Team
   van a 16px, no a 18. Nuestra propia hoja de la pagina ya los pedia en 1rem; quien
   los subio a 18 fue la regla global p{font-size:18px !important} de la seccion 7.
   Se restaura acotado a .culture-section, que solo existe en las 2 paginas de equipo.
   OJO (nota de Yun): el gate de tipografia mide UN parrafo por plantilla, el de
   entrada, que si va a 19.2 — leerlo literal y subir estos dos empeoraria la pagina. */
.culture-section .wrap-team p{font-size:16px !important;line-height:1.6 !important}

/* ---- 10-sep-2026 · Perfil de director (13 páginas EN + sus gemelas ES) --------
   Petición de Sofía sobre `/about-us/our-team/<director>`: "hay cosas diferentes".
   Todo medido a 1440 en su /about-us/our-team/james-seale, con el DOM (no con
   captura: su sitio anima el texto al hacer scroll y la captura headless deja el
   nombre y el Contact Information en blanco — 🪤 trampa ya documentada).
   Acotado con body:has(.profhead), que solo existe en esta plantilla.

     elemento              ellos                 nosotros (antes)
     foto                  404x487, radius 0     360x450, radius 14 + borde
     h1 nombre             48/700/52.8 #333      48/700/53.76 NAVY
     cargo                 h2 36/700/39.6 mb12   p.role 36/500/45 mb2
     párrafo de bio        19.2/28.8 mb14.4      18/28.8 mb19.8
     "Contact Information" h3 30/700/33          h2 36/700/39.6
   ---------------------------------------------------------------------------- */
/* Foto: la caja del cliente es 404x487 y va SIN redondeo ni borde. */
body:has(.profhead) .profhead .ph-img{flex:0 0 404px !important}
body:has(.profhead) .profhead .ph-img img{height:487px !important;object-fit:cover !important;
  border-radius:0 !important;border:0 !important}
/* Nombre: el suyo es gris #333, no navy. Y el cargo va en 700, no en 500 —
   mismo caso que la celda 5 del Excel, donde el cliente dijo "más pequeño" y
   lo que cambia es el PESO, no el tamaño. */
body:has(.profhead) .profhead h1{color:#333 !important;line-height:52.8px !important;
  margin:0 0 16px !important}
body:has(.profhead) .profhead .ph-right .role{font-weight:700 !important;line-height:39.6px !important;
  margin:0 0 12px !important}
/* El nombre iba pegado al texto: su bloque de bio abre 50px abajo del cargo. */
body:has(.profhead) .bio{margin-top:50px !important}
/* Cuerpo de la bio: 19.2px, el mismo que usa en sus párrafos de entrada. */
body:has(.profhead) .bio p{font-size:19.2px !important;line-height:28.8px !important;
  margin:0 0 14.4px !important}
/* Contact Information: h3 de 30px en su sitio, no 36. */
body:has(.profhead) .pcontact h2{font-size:30px !important;line-height:33px !important;
  margin:0 0 16px !important}
body:has(.profhead) .pcontact a,body:has(.profhead) .pcontact span{font-size:19.2px !important;
  line-height:28.8px !important}
/* La "cinta azul" del encabezado. En su sitio el header va TRANSPARENTE encima
   de la foto del hero, que arranca en y=0 y mide 161px. En el nuestro el header
   salía navy y sólido, empujando el hero abajo (105 + 106 = dos bandas), y
   encima el hero llevaba un velo de rgba(15,28,48,.58) que lo azulaba entero.
   Se acota a body:has(.profhead) — .pagehero--img lo usan 176 páginas y aquí
   solo se tocan las 26 del perfil de director. */
/* 🪤 `position:fixed` SIN ancho encoge el header al contenido (shrink-to-fit) y
   el menú se compacta a la izquierda. Un header fixed necesita left/right/width
   explícitos; el sticky que traía la página no los pedía. */
body:has(.profhead) header.top{background:transparent !important;position:fixed !important;
  left:0 !important;right:0 !important;width:100% !important;
  box-shadow:none !important;border-bottom:1px solid rgba(255,255,255,.3) !important}
body:has(.profhead) header.top.scrolled{background:#fff !important;
  border-bottom:1px solid var(--esp-linea) !important}
body:has(.profhead) header.top .logo-navy{display:none !important}
body:has(.profhead) header.top .logo-white{display:block !important}
body:has(.profhead) header.top.scrolled .logo-white{display:none !important}
body:has(.profhead) header.top.scrolled .logo-navy{display:block !important}
/* El hero sube bajo el header y toma el alto del cliente; el velo baja de .58 a
   .28 para que la foto se lea como la suya y el breadcrumb siga legible. */
body:has(.profhead) .pagehero--img{height:161px !important;padding:0 !important;
  display:flex !important;align-items:flex-end !important;
  background-image:linear-gradient(rgba(15,28,48,.28),rgba(15,28,48,.28)),
    url(/assets/portada-cliente-perfil.webp) !important;
  background-size:cover !important;background-position:center !important}
body:has(.profhead) .pagehero--img>.wrap{width:100% !important}
body:has(.profhead) .pagehero--img .crumb{margin:0 0 12px !important;text-align:left !important}
/* El menú del perfil salía ~160px a la derecha del suyo. Su header reparte
   logo | menú centrado | controles; el nuestro dejaba que `space-between`
   colocara nav.mainnav donde cayera. Medido a 1800: ellos ABOUT US en x=618 y
   CONTACT cerrando en 1210 (centro 914, o sea centrado en el viewport);
   nuestro Our Team ya lo reproduce, el perfil no. Se le da al nav el espacio
   sobrante y se centra su contenido. */
/* 24-sep: solo escritorio. Sin media query sacaba el menu ABIERTO en celular
   (en movil el sitio lo esconde abajo de 900 y lo abre el boton). */
@media(min-width:900px){
body:has(.profhead) header.top .wrap>nav.mainnav{flex:1 1 auto !important;
  display:flex !important;justify-content:center !important}
}

/* ---- 10-sep · Perfil de director, segunda pasada (reporte de Yun) ------------
   1) LA FOTO. El redondeo de su foto NO es CSS: su border-radius es 0 en toda
      la cadena, no hay clip-path ni mask, y el PNG no trae alpha. Las esquinas
      del archivo son BLANCO PURO opaco hasta ~8px — sobre la página blanca se
      leen como redondeadas. 🪤 Por eso poner border-radius:0 (que era lo que
      decía su CSS) dejó nuestras esquinas en 90°: la propiedad decía la verdad
      y el render decía otra cosa.
      Además el perfil usa una FOTO DISTINTA a la del listado (404x487 propia,
      no la de 720x900), y por eso "James se veía más pequeño": estábamos
      recortando la del listado. Las 26 páginas ya apuntan a perfil-<slug>.webp,
      que es su archivo. Con eso el redondeo y el encuadre vienen de fábrica y
      la caja solo tiene que no deformarla.
   2) LA BARRA de "Contact Information": la suya es un border-left de 12px a
      toda la altura del título; la nuestra un ::before de 4x19.
   3) LOS ÍCONOS: son el MISMO set (Font Awesome, viewBox 512/448/384) pero los
      forzábamos a 15x15 cuadrados. El cliente respeta la proporción del
      viewBox: 14x14 el sobre, 12x14 LinkedIn, 11x14 el pin. De ahí que el
      LinkedIn "se viera diferente" — iba estirado.
   ---------------------------------------------------------------------------- */
body:has(.profhead) .profhead .ph-img img{object-fit:contain !important;height:auto !important}
/* Barra del título: border-left de 12px como el suyo, y fuera el ::before. */
body:has(.profhead) .pcontact h2{border-left:12px solid var(--navy) !important;
  padding-left:12px !important}
body:has(.profhead) .pcontact h2::before{display:none !important}
/* Íconos a 14px de ALTO con el ancho que pida su viewBox, no cuadrados. */
body:has(.profhead) .pcontact svg{height:14px !important;width:auto !important}
/* 🪤 `width:auto` por sí solo no basta: los SVG llevan `flex:0 0 15px` y en un
   contenedor flex el flex-basis gana sobre width. Hay que soltar el basis para
   que el alto de 14px y el viewBox calculen el ancho (14 × razón del viewBox:
   14 el sobre, 12.25 LinkedIn, 10.5 el pin). */
body:has(.profhead) .pcontact svg{flex:0 0 auto !important}
body:has(.profhead) .pcontact svg[viewBox="0 0 512 512"]{width:14px !important}
body:has(.profhead) .pcontact svg[viewBox="0 0 448 512"]{width:12.25px !important}
body:has(.profhead) .pcontact svg[viewBox="0 0 384 512"]{width:10.5px !important}
/* Sus renglones de contacto van sangrados: el ícono abre en x=96 y el texto en
   113, contra 60/84 nuestros. Son 36px sobre el borde del bloque. Van en <p>
   con display:flex, no en una lista. */
body:has(.profhead) .pcontact p{padding-left:36px !important}

/* ---- Botón de volver arriba (celda 6 del Excel en el perfil de director) ----
   Ellos lo tienen y nosotros no: 0 de 13 perfiles. Medido a 1440 en su
   /about-us/our-team/james-seale — está SIEMPRE visible, no aparece al hacer
   scroll (mismos valores con scroll 0 y con scroll 1500).
     caja        50x50, a 16px del borde derecho e inferior
     fondo       transparente · borde 1px solid navy · radio 4px
     ícono       chevron-up de 17.5x20, relleno navy
     opacidad    0.4 · z-index 9 · transition .4s
   Se agregó primero solo en las 26 páginas de perfil (el markup vivía solo
   ahí). 11-sep (Yun): el cliente también lo trae en sell-side-advisory —
   no es exclusivo del perfil. Se quita el scope body:has(.profhead) para
   que cualquier página que tenga el <a class="atmc-scroll-top"> (antes de
   </body>) reciba el mismo estilo sin duplicar la regla por sección. */
.atmc-scroll-top{position:fixed !important;right:16px !important;
  bottom:16px !important;width:50px !important;height:50px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:transparent !important;border:1px solid var(--navy) !important;
  border-radius:4px !important;opacity:.4 !important;z-index:9 !important;
  transition:.4s !important;text-decoration:none !important}
.atmc-scroll-top:hover{opacity:1 !important}
.atmc-scroll-top svg{width:17.5px !important;height:20px !important;
  fill:var(--navy) !important;flex:0 0 auto !important}

/* ---- Carrusel de transacciones del perfil: más aire entre tarjetas ----------
   Yun (10-sep): "están más juntas que en la página de ellos".
   Medido a 1440 sobre la TARJETA real (el marco gris de la tombstone), no sobre la
   imagen del logo que va dentro:
     ellos     4 tarjetas de 312x522, separación 24px, bloque de 1320
     nosotros  4 tarjetas de 271x521, separación 22px, bloque de 1150
   🪤 La separación ya era casi la misma. Lo que hace que las suyas respiren es
   que su carrusel SE SALE del contenedor de texto (1320 contra nuestros 1160) y
   sus tarjetas son 41px más anchas. Copiar eso exacto no sale bien: sus
   tarjetas tienen otra proporción (1.67 de alto/ancho contra 1.92 nuestra) y
   nuestro marco es una imagen — al ensancharla la tombstone se iría a 600px de
   alto, y forzarle la altura lo deforma.
   Decisión de Yun: solo más aire, sin mover el bloque ni deformar el marco.
   Con separación de 50px las tarjetas quedan en (1160 - 150)/4 = 252. */
@media(min-width:901px){
  /* 🪤 Soltar el max-width engordó las tarjetas a 292x561 y quedaron 39px MÁS
     ALTAS que las suyas (522). El tamaño original ya igualaba su altura:
     271x521 contra 312x522 — nuestro marco es más angosto y más alto porque su
     proporción es 13/25 (1.92) contra la suya (1.67), y es una imagen que no se
     puede estirar sin deformar. Así que la tarjeta se queda en 271 y el aire
     entra SOLO por el gap. */
  /* 🪤 A 243 (la medida exacta de su marco) las ETIQUETAS de industria se
     encimaban con el contenido en 2 de 4 tarjetas: van en position:absolute y
     el contenido interior deja de caber. 271 es el ancho donde no se solapan.
     Queda un marco 28px más ancho que el suyo, con el mismo aire alrededor.
     El span total de ESE momento coincidía con 73 (4x271+3x73=1303 vs 1320),
     pero dejaba las tarjetas de perfiles con MENOS aire que el resto del sitio
     (home/servicios/clientes/industrias) — Yun pidió el 15-sep que todas las
     páginas con este carrusel tengan el mismo espacio entre tarjetas. Se
     unifica a 100px (el mismo de `.tcar-track:has(>.tomb)` de arriba) aunque
     ya no calce con el 1320 de esta nota vieja; consistencia entre nuestras
     páginas manda sobre esa medida puntual. */
  /* 23-sep: el hueco lo fija ahora el reparto del cliente (bloque nuevo de
     1024/1620), igual para todas las paginas con este carrusel. */
  /* 23-sep (Yun): la TARJETA a 260x500, que es la del cliente. El hueco NO se
     toca: queda en los 100px que ella fijo el 15-sep para todas las paginas. */
  body:has(.profhead) .tcar-track>.tomb{flex:0 0 260px !important;max-width:260px !important}
}

/* ---- Carrusel: las etiquetas de industria se encimaban con el tombstone -----
   Defecto preexistente (se ve desde antes de esta sesión). Medido a 1440:
     la imagen del tombstone termina a 86px del fondo de la tarjeta
     las etiquetas se anclan a 52px del fondo
     con 3 etiquetas se apilan en 3 renglones = 85px de alto -> el tope llega a
     137px, o sea 51px POR ENCIMA de donde acaba la imagen. Con 2 no pasa.
   El cliente mete esas mismas 3 en DOS renglones porque su contenedor es más
   ancho; el nuestro estaba capado a max-width:82%. Se ensancha para que quepan
   dos pastillas por renglón. Con 94% el bloque baja a 43px (dos renglones),
   pero el tope quedaba en 95: todavía 9px dentro de la imagen. Así que además
   se bajan 14px (bottom 52 -> 38) y el tope cae en 81, con 5px de aire. */
body:has(.profhead) .tomb .ttags{max-width:94% !important;gap:6px !important;bottom:38px !important}
body:has(.profhead) .tomb .tag-i,body:has(.profhead) .tomb .ttags a{padding:3px 8px !important;
  font-size:.56rem !important}

/* ---- Acomodo del overlay del listado (Yun, 10-sep) --------------------------
   No era el texto: era dónde queda el bloque dentro de la tarjeta. Medido en su
   /about-us/our-team sobre la misma tarjeta (189x440 en los dos):
     ellos     padding 32px      · ícono 14x16 · primer ícono a 40px del borde
     nosotros  padding 20px 18px · ícono 13x13 · primer ícono a 25px
   Por eso su nombre y su cargo caen más adentro y más arriba del borde. */
.team-row .member .info{padding:32px !important}
.team-row .member .info .links,.team-row .member .icons{gap:14px !important;margin-top:14px !important}
.team-row .member .info svg{width:14px !important;height:16px !important}

/* ---- Our Culture: el texto no usaba el ancho de la página (Yun, 10-sep) ------
   Medido a 1440 en su /about-us/our-culture:
                    ellos                    nosotros (antes)
     intro          1320 ancho · 19.2 / 28.8  900 (max-width:900px) · 18 / 28.8
     values-lead    1320 ancho · 20 / 30      900 · 18 / 28.8
     h2 Our Values  48px                      36px
     h1 Our Culture 48px                      48px  (ya coincidía)
   El tope de 900px estaba en el <style> de la propia página. 🪤 `.intro-lead`
   vive en 74 páginas (lo documentó el handoff del 9-sep), así que NO se puede
   soltar en global: se acota con body:has(.values-lead), que solo existe en
   about-us/our-culture y su gemela ES. Sin max-width el párrafo toma el ancho
   útil del contenedor, que ya son los mismos 1320 del cliente. */
body:has(.values-lead) .intro-lead{max-width:none !important;font-size:19.2px !important;
  line-height:28.8px !important}
body:has(.values-lead) .values-lead{max-width:none !important;font-size:20px !important;
  line-height:30px !important}
/* 🪤 "Our Values" no estaba alineado con "Our Culture" ni tenia su mismo guion.
   Medido: su h1 y su h2 son IDENTICOS (texto en x=60, guion 48x12 en left:-56).
   El nuestro: "Our Culture" ya coincidia, pero .section-h2 traia padding-left:60
   (el texto arrancaba en 120) y un guion de 40x10 metido DENTRO de la caja
   (left:0). De ahi que se leyera corrido a la derecha y con la rayita mas chica. */
body:has(.values-lead) .section-h2{font-size:48px !important;padding-left:0 !important}
body:has(.values-lead) .section-h2::before{width:48px !important;height:12px !important;
  left:-56px !important}
/* Los titulos de cada valor (Independence, Integrity, Excellence, Commitment)
   caian en 23.5px por venir en rem; los suyos son 24px exactos. */
body:has(.values-lead) .value-card h3,body:has(.values-lead) .value-card h4{font-size:24px !important}

/* ==== Rejilla de /experience/transactions y /es/experiencia/transacciones (.tombgrid) ====
   GLOSARIO: cada tarjeta es una TOMBSTONE. Si alguien les dice "teléfonos" (por la
   forma del marco) habla de ESTAS tarjetas, NO de la vista móvil.
   16-sep: bloque REESCRITO completo. Sustituye las 13 capas v117-v129 del 15-sep,
   que se encimaban unas a otras (su historia queda en
   HANDOFF-YUN-2026-09-15-nav-hover-y-transacciones.md §5).
   Medido contra sealeassociates.com/experience/transactions a 390, 1024, 1280,
   1440 y 1920, con CSS.getMatchedStylesForNode sobre .card-blog-center:
   · Tarjeta SIEMPRE 260x500, padding 30px 5px, columna centrada, fondo
     Tombstone_260x500 gris (nuestro tombstone-frame-gray.webp es el mismo a 5x,
     1300x2500), radio 15, sombra 0 0 10px rgba(0,0,0,.3). El marco NO crece con
     el contenido: estirarlo daba tombstones de 441, 451, 466 y 476 de alto.
   · Imagen forzada a 230x360, object-fit fill, igual que ellos. 49 de nuestras
     205 miden 230x370; 48 traen en blanco las 10 filas de abajo.
   · Etiquetas: caja de 230x80 justo debajo de la imagen, flex-wrap,
     align-content flex-start, centradas. Pastilla margin 2px 3px, padding
     4px 6px, interlineado 1.7. Hover de pastilla navy #203864 (su --primary).
   · Hover de tarjeta: marco azul (su Tombstone_..._azul_blanco = nuestro
     frame-navy) y translateY(-10px) con transición .3s ease.
   · Columnas fijas de 260; hueco 30, y 25 cuando caben 5 (a 1920: 5x260+4x25 = 1400).
   🪤 El hover se escucha en .tomb (no se mueve) y no en .tframe (sí se mueve):
   con el cursor en el borde de abajo, la tarjeta que sube se sale del cursor,
   baja y vuelve a subir en bucle. */
body:has(.tombgrid) .tombgrid{grid-template-columns:repeat(auto-fill,260px) !important;column-gap:30px !important}
@media(min-width:1520px){body:has(.tombgrid) .tombgrid{column-gap:25px !important}}
body:has(.tombgrid) .tomb{width:260px !important;max-width:100% !important;min-width:0 !important}
body:has(.tombgrid) .tframe{position:relative !important;isolation:isolate !important;box-sizing:border-box !important;
  width:260px !important;max-width:100% !important;height:500px !important;padding:30px 5px !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;
  background:url(/assets/tombstone-frame-gray.webp) 50%/cover no-repeat !important;
  border-radius:15px !important;box-shadow:0 0 10px 0 rgba(0,0,0,.3) !important;
  overflow:visible !important;transition:transform .3s ease !important}
/* El azul va precargado en ::after (opacidad 0) para que el primer hover no
   parpadee en blanco mientras baja el archivo; el cambio es instantáneo, como el suyo. */
body:has(.tombgrid) .tframe::before{content:none !important}
body:has(.tombgrid) .tframe::after{content:"" !important;position:absolute !important;inset:0 !important;z-index:-1 !important;
  background:url(/assets/tombstone-frame-navy.webp) 50%/cover no-repeat !important;border-radius:15px !important;
  opacity:0 !important;transition:none !important;pointer-events:none !important}
body:has(.tombgrid) .tomb:hover .tframe{transform:translateY(-10px) !important}
body:has(.tombgrid) .tomb:hover .tframe::after{opacity:1 !important}
body:has(.tombgrid) .tomb .timg{display:block !important;position:static !important;flex:0 0 auto !important;
  width:230px !important;height:360px !important;padding:0 !important;aspect-ratio:auto !important;overflow:visible !important}
body:has(.tombgrid) .tomb .timg::before,body:has(.tombgrid) .tomb .timg::after{content:none !important}
body:has(.tombgrid) .tomb img{position:static !important;display:block !important;margin:0 !important;inset:auto !important;
  transform:none !important;width:230px !important;height:360px !important;max-width:none !important;max-height:none !important;
  object-fit:fill !important}
body:has(.tombgrid) .ttags{position:static !important;inset:auto !important;transform:none !important;z-index:auto !important;
  box-sizing:border-box !important;flex:0 0 auto !important;width:230px !important;max-width:230px !important;height:80px !important;
  margin:0 !important;padding:0 !important;display:flex !important;flex-wrap:wrap !important;
  align-content:flex-start !important;align-items:flex-end !important;justify-content:center !important;gap:0 !important}
body:has(.tombgrid) .ttags .tag-i{margin:2px 3px !important;padding:4px 6px !important;line-height:1.7 !important;
  background:transparent !important;color:#68696f !important;border:2px solid #68696f !important;border-radius:20px !important;
  font-size:8.5px !important;font-weight:700 !important;letter-spacing:.5px !important;text-transform:uppercase !important;
  white-space:nowrap !important;transition:all .2s ease !important}
body:has(.tombgrid) .ttags .tag-i:hover{background:#203864 !important;border-color:#203864 !important;color:#fff !important}

/* ── 15-sep-2026 · Business cases: rejilla Target/Industries y cuerpo, medidos
   contra sealeassociates.com/experience/business-cases/woodcrafters a 1280.
   Pedido de Yun: mismo tamaño, mismo color y mismos espacios que su página.
   Lo que estaba distinto: etiquetas en navy (las suyas son #333), párrafos
   alineados a la izquierda (los suyos justificados), la línea sobre SITUATION
   a 1px (la suya 2px) y los espacios de la rejilla y de los títulos.
   El gris del texto de cuerpo iba tal cual el del cliente (#85868c, 3.63:1) por
   decisión de Yun del 15-sep; Luis lo cambió el 16-sep al gris AA #68696f (5.47:1).
   El subrayado de las etiquetas NO se toca: su sitio no lo declara por CSS
   medible y en ambas versiones se ve igual. ── */

/* Etiquetas: su <strong> mide 30px/33px, peso 900, #333, sin letter-spacing,
   y su <h3> contenedor deja 16px hasta el valor. */
.case-body .fact dt{
  color:#333 !important;
  letter-spacing:normal !important;
  line-height:33px !important;
  margin:0 0 16px !important;
  text-decoration-color:#333 !important}

/* Valores de la rejilla: su .atmc-intro es 19.2px/28.8px en #85868c.
   Sobre el color: su #85868c da 3.63:1 en blanco y el mínimo AA para 19.2px
   normal es 4.5:1. DECISIÓN DE LUIS 16-sep: todo el texto gris va en #68696f
   (5.47:1 en blanco, 4.63:1 en beige). No volver al #85868c. */
.case-body .fact dd,.case-body .fact dd a{color:#68696f !important}

/* Separación de la rejilla: entre filas 40px (su fila 2 abre 118px después de
   la 1, con 78px de contenido), entre columnas 18px (su columna 2 abre en
   x=836 con columnas de 369px sobre 756 de ancho). */
.case-body .facts{gap:40px 18px !important}

/* Cuerpo: sus párrafos van justificados (su gris #85868c; el nuestro #68696f, AA), con 14.4px entre uno y
   otro (el nuestro traía 1.1em = 21.12px desde el <style> de cada caso).
   Mismo apunte de contraste que en los valores de arriba. */
.case-body p,.case-body .prose p{
  color:#68696f !important;
  text-align:justify !important;
  margin:0 0 14.4px !important}

/* SITUATION / OUTCOME: su H2 deja 12px hasta el párrafo y abre 40px después
   del último párrafo de la sección anterior (el nuestro abría 72px). La línea
   sobre SITUATION es un divisor propio de 2px #dfdbd2 que cae 24px antes del
   título y 56px después de la rejilla; aquí se dibuja como borde del mismo H2
   para no tocar los 160 archivos de caso. */
.case-body h2{margin:40px 0 12px !important}
.case-body .facts+h2{
  border-top:2px solid #dfdbd2 !important;
  padding-top:24px !important;
  margin-top:56px !important}

/* Reparto de la página de caso. Su sitio no usa un hueco fijo: es el sistema
   de columnas de HubSpot (row-fluid), con la columna izquierda al 31.91%, un
   canal de 2.13% y el tombstone de 260px CENTRADO dentro de su columna, más
   31px de sangría en la de texto. Medido a 1280 y a 1920:
     1280 → tombstone x69, texto x449 (hueco 120px)
     1920 → tombstone x319, texto x736 (hueco 157px)
   El nuestro tenía `260px 1fr` con gap fijo de 48px, así que el tombstone
   quedaba pegado a la izquierda y el hueco no crecía con la pantalla. */
.case-grid{
  grid-template-columns:31.91% 1fr !important;
  column-gap:2.13% !important;
  row-gap:0 !important}
.case-tomb{justify-self:center !important}
.case-grid>.case-body{padding-left:31px !important}
@media(max-width:760px){
  .case-grid{grid-template-columns:1fr !important;column-gap:0 !important;row-gap:32px !important}
  .case-grid>.case-body{padding-left:0 !important}
}


/* El ancho del bloque del caso. Nuestro .wrap deja 60px de relleno a cada
   lado; el row-fluid de HubSpot que él usa no, y además lo corre 25px a la
   izquierda con su margen negativo. Medido: él va de x10 a x1205 a 1280, y de
   x228 a x1628 a 1920, o sea 93.36vw hasta topar en 1400, y siempre 25px a la
   izquierda de donde caería centrado.
   Se aplica SOLO al .case-grid, nunca al .wrap: la banda de la cita y la de
   "offer" se salen del wrap con márgenes de -50vw, y al mover el relleno del
   wrap se descuadraban las dos. De 761px para arriba; en móvil no aplica. */
@media(min-width:761px){
  .case-grid{
    width:min(93.36vw,1400px) !important;
    margin-left:calc((100% - min(93.36vw,1400px)) / 2 - 25px) !important;
    margin-right:0 !important}
}

/* Título del hero de caso: reparto de líneas equilibrado.
   Yun (15-sep) sobre Woodcrafters: "sube Fortune Brands al lado de la palabra
   to". Nuestros títulos de caso son propios y descriptivos (el cliente usa
   "CASE STUDY: <marca>", de una línea), así que esto es composición, no
   espejo, y el largo lo decide el título de cada caso.
   Medido en los 80 a 1280: 35 caben en una línea y de los 45 que parten,
   27 dejaban UNA palabra sola en la última (Snacks, Assets, Business…).
   Con balance esas 27 quedan en cero y el de Woodcrafters pasa a
   "Woodcrafters Divested its / Business to Fortune Brands".
   Navegador viejo que no lo soporte: lo ignora y parte como hasta hoy. */
#bc-hero.pagehero--img h1{text-wrap:balance !important}

/* Ancho del título del hero de caso. Yun (15-sep) lo quiere en una sola línea
   como en su captura. No era cosa del tamaño: el de Woodcrafters mide 1164px
   a 48px y el h1 estaba topado en 980px, así que partía por el tope, no por
   falta de espacio. A 1280 el hueco disponible ronda los 1195px, o sea que
   cabe entero sin bajarle un punto a la tipografía.
   Medido en los 80 a 48px: con 980px de tope cabían en una línea 35; con este
   caben 62 a 1280 y 74 a 1920. Los que no caben (el más largo, AZZ, pide
   2161px) siguen partiendo, y ahí actúa el text-wrap:balance de arriba. */
#bc-hero.pagehero--img h1{max-width:1400px !important}
/* Y el aire lateral del hero: su .wrap traía 60px por lado, así que a 1280 le
   quedaban 1145px al título y el de Woodcrafters pide 1164. Faltaban 19px y
   partía por eso. A 24px por lado quedan 1217 y entra sin apretarse, sin
   bajarle el tamaño a la tipografía. Solo el hero del caso, y solo de 761px
   para arriba: en móvil el relleno se queda como está. */
@media(min-width:761px){
  #bc-hero.pagehero--img>.wrap{padding-left:24px !important;padding-right:24px !important}
}

/* Sección activa del menú en el hub de casos (EN y ES). Yun (15-sep): "cuando
   se esté en un menú, que se resalte en azul; quedó más temprano pero ya no me
   aparece". Lo de la mañana cubrió los dos headers blancos que llegan por
   scroll o por pagehero sin foto; faltaba ESTE, que nace blanco:
   `body:has([data-hub="casos"]) … .hn-btn{color:#8d8d94}` pintaba de gris
   TODO el menú, activo incluido, y sin scroll no había ninguna regla que
   sacara de ahí a la sección activa (medido: rgb(141,141,148) en vez de navy).
   Barrido de las 21 familias EN y ES: era el único hueco. Donde el activo
   sale blanco, el header está flotando transparente sobre la foto del hero y
   así debe quedarse.
   🪤 Misma trampa de especificidad del fix de la mañana: hay que repetir la
   cadena .nav>ul>li entera, porque la del gris trae 3 elementos y gana el
   empate de clases. Con .hn-on encima queda una clase arriba. */
body:has([data-hub="casos"]) header.top .nav>ul>li.hn-on>.hn-btn,
body:has([data-hub="casos"]) header.top .nav>ul>li.hn-on>.mn-btn,
body:has([data-hub="casos"]) header.top .nav>ul>li>a.hn-on{color:var(--navy) !important}

/* ---- Header que se esconde al bajar y vuelve al subir (22-sep, medido) ----
   Yun: "en su página, al bajar el header se mantiene y al subir se esconde".
   Medido en vivo con CDP contra sealeassociates.com (home y /experience/
   industries, 1920x1000, estilo computado): es al revés. Bajando se ESCONDE
   (`top:-109px` = sus 104 de alto + 5) en cuanto pasa scrollY 269; subiendo
   vuelve a `top:0` de inmediato — basta con subir 10px. Entre 0 y 269 bajando
   sigue visible: a 0 está estático y transparente, y desde ~105 se pega con
   fondo blanco. Su transición es 0.3s.
   Corrige de paso la nota de la §"iconos" de más arriba (línea ~1062), escrita
   en agosto: decía "nuestro header es sticky y el del cliente es estático
   (decisión #2 de Luis, abierta)". El del cliente NO es estático — es sticky y
   además se autoesconde; solo arranca estático arriba del todo.
   Aquí se mueve con `transform` y no con `top` porque nuestro header.top es
   `position:sticky`: cambiarle el `top` le cambiaría el punto donde se pega.
   Verificado antes de usar transform: dentro del <header> no hay nada
   `position:fixed` (el velo del buscador `.ss-ov` vive fuera), así que el nuevo
   bloque contenedor que crea el transform no atrapa a nadie.
   La clase la pone _tools/pase-header-autohide.js, que además NO la aplica
   cuando el header quedó `static` (hub de casos), con el menú móvil abierto o
   con un desplegable abierto. */
header.top,header.site{transition:transform .3s ease,background .3s,box-shadow .3s,border-color .3s !important}
header.top.esp-hdr-off,header.site.esp-hdr-off{transform:translateY(calc(-100% - 6px)) !important}
@media (prefers-reduced-motion:reduce){
  header.top,header.site{transition:none !important}
}

/* ---- Las 14 páginas donde el header no se quedaba pegado (22-sep, medido) ----
   10 hubs con foto (.page-hero--hub: insights + 3 de reportes mensuales +
   industrias, EN y ES), las 2 de transacciones (.tombgrid) y los 2 hubs de
   casos. En esas, el espejo dejaba el header `absolute` o `static` para que
   flotara sobre la foto como el del cliente EN REPOSO — pero sin el resto de su
   comportamiento: se iba con el scroll y no volvía nunca.
   El cliente, medido el 22-sep en /insights, /experience/transactions y
   /experience/business-cases (1920, estilo computado, los tres idénticos):
     reposo   → static, transparente, logo BLANCO, menú #fff
     y>0      → fixed arriba, todavía transparente
     y>=105   → fondo #fff, logo AZUL, menú rgb(141,141,148) = #8d8d94
     y>269 ↓  → se esconde · cualquier subida → vuelve
   Las dos primeras clases las pone _tools/pase-header-autohide.js, y solo en
   estas páginas: decide una vez al cargar leyendo la posición de reposo.
   🪤 Especificidad: las reglas de arriba traen `!important` con 2 clases; cada
   selector de aquí repite su cadena entera y suma la clase nueva, que es lo
   único que las supera (la trampa del 11-sep con body.tpl-clientes). */
body:has(.page-hero--hub) header.top.esp-hdr-fija:has(nav.mainnav),
body:has(.tombgrid) header.top.esp-hdr-fija:has(nav.mainnav){position:fixed !important}
/* Casos va por otra vía: `sticky` en vez de `fixed`, y sin esperar a la clase.
   Su header SÍ ocupa lugar en el flujo (los otros 12 flotan `absolute` sobre la
   foto), así que pasarlo a `fixed` lo saca del flujo y sube el contenido de
   golpe: medido, el h1 brincaba de 433 a 328 y la página se acortaba 105px en
   cuanto arrancaba el scroll. `sticky` conserva su lugar, se pega al llegar
   arriba y deja que el autohide lo mueva. Como aquí ya nace blanco con logo
   azul, tampoco necesita el estado de abajo. */
body:has([data-hub="casos"]) header.top{position:sticky !important;top:0;z-index:120}

/* Estado blanco (a partir de los 105px), solo en los hubs con foto y en
   transacciones: los de casos ya nacen blancos con logo azul y no cambian. */
body:has(.page-hero--hub) header.top.esp-hdr-blanca:has(nav.mainnav),
body:has(.tombgrid) header.top.esp-hdr-blanca:has(nav.mainnav){
  background:#fff !important;border-bottom:1px solid var(--esp-linea) !important;box-shadow:none !important}
body:has(.page-hero--hub) header.top.esp-hdr-blanca .brand-logo,
body:has(.tombgrid) header.top.esp-hdr-blanca .brand-logo{content:url('/assets/img_037.png') !important}
body:has(.page-hero--hub) header.top.esp-hdr-blanca .mn-btn,
body:has(.page-hero--hub) header.top.esp-hdr-blanca nav.mainnav>a,
body:has(.tombgrid) header.top.esp-hdr-blanca .mn-btn,
body:has(.tombgrid) header.top.esp-hdr-blanca nav.mainnav>a{color:#8d8d94 !important}
body:has(.page-hero--hub) header.top.esp-hdr-blanca .mn-btn:hover,
body:has(.page-hero--hub) header.top.esp-hdr-blanca nav.mainnav>a:hover,
body:has(.tombgrid) header.top.esp-hdr-blanca .mn-btn:hover,
body:has(.tombgrid) header.top.esp-hdr-blanca nav.mainnav>a:hover{color:var(--navy) !important}
body:has(.page-hero--hub) header.top.esp-hdr-blanca .navtog,
body:has(.page-hero--hub) header.top.esp-hdr-blanca .langsel .car,
body:has(.page-hero--hub) header.top.esp-hdr-blanca .ss-open,
body:has(.tombgrid) header.top.esp-hdr-blanca .navtog,
body:has(.tombgrid) header.top.esp-hdr-blanca .langsel .car,
body:has(.tombgrid) header.top.esp-hdr-blanca .ss-open{color:#333 !important}
body:has(.page-hero--hub) header.top.esp-hdr-blanca .ss-open,
body:has(.page-hero--hub) header.top.esp-hdr-blanca .langsel,
body:has(.tombgrid) header.top.esp-hdr-blanca .ss-open,
body:has(.tombgrid) header.top.esp-hdr-blanca .langsel{
  border-left-color:var(--esp-linea) !important;border-right-color:var(--esp-linea) !important}

/* ---- Gris de las 3 tarjetas de servicios del home (22-sep, medido) ---------
   Yun: "que el texto de las tarjetas esté de un gris más claro, como el de
   ellos". Medido en las tres tarjetas de los dos sitios: tamaño (16px) e
   interlineado (27.2) ya coincidían; lo único distinto era el color —
   nuestro #68696f (5.47:1) contra su #85868c (3.63:1).
   No se copia el suyo: el #68696f es la decisión de Luis del 16-sep, porque
   el gris del cliente reprueba AA (pide 4.5:1) en casi todo el texto de
   cuerpo.
   🔴 23-sep (decisión de Luis): "el que más aplique para accesibilidad".
   El #75767c que se eligió aquí el 22-sep pasa AA raspando (4.53:1); el token
   del sitio, #68696f, da 5.47:1. Gana el token: vuelve var(--esp-gris), y así
   el sitio tiene UN gris y no tres. */
/* 22-sep, segunda pasada: Yun pidió revisar los colores de la fila de clientes.
   Medidos los tres: título #333 y botón blanco sobre navy ya coincidían; el
   único distinto era el párrafo. Misma decisión que arriba, mismo gris, para
   que el home no quede con dos grises (23-sep: ese gris es var(--esp-gris)). */
#services .cards3 .card.photo-card .cbody p,
.cards3 .card:has(>img.card-foto)>p{color:var(--esp-gris) !important}

/* ---- Tarjetas de clientes del home: interior igual al cliente (22-sep) -----
   Yun, con captura de su sitio al lado: "el recuadro blanco no es igual, acomoda
   el texto como el de ellos". Medido elemento por elemento en la tarjeta
   Family-Owned de los dos sitios (1920, estilo computado):
     caja      pad 48 (nuestro 38/32) · foto 451x333 sangrada a los bordes
     título    a 48 del borde y a 48 de la foto (nuestro 32 y 24)
     párrafo   margen abajo 12 (nuestro 22)
     botón     125x44, lh 16, ls 0.05, borde 2px (nuestro 128x51, lh 27.2, ls .64)
   La foto sale de los bordes con margen negativo, así que su margen tiene que
   ir a la par del padding nuevo: -48 a los lados y 48 abajo, y el ancho
   calc(100% + 96px) — si no, la foto se queda corta y deja franja blanca.
   Acotado a las tarjetas que traen .card-foto como hijo directo (la fila de
   clientes del home EN y ES); las de servicios usan .photo-card y no entran.
   El botón sí se iguala en las dos filas del home: los 6 del cliente miden
   125x44 y los 6 nuestros 128x51. */
.cards3 .card:has(>img.card-foto){padding:48px !important}
.cards3 .card>img.card-foto{width:calc(100% + 96px) !important;margin:-48px -48px 48px !important}
.cards3 .card:has(>img.card-foto)>p{margin-bottom:12px !important}
.cards3 .card .more{line-height:16px !important;letter-spacing:.05px !important;
  border:2px solid var(--navy) !important;padding:12px 16px !important}
/* En celular el cliente baja ese respiro a 42 (medido a 390): mismo trato para
   la foto sangrada, 42 a los lados y calc(100% + 84px) de ancho. */
@media(max-width:760px){
  .cards3 .card:has(>img.card-foto){padding:42px !important}
  .cards3 .card>img.card-foto{width:calc(100% + 84px) !important;margin:-42px -42px 42px !important}
}

/* ---- Botón "All Transactions" del home igual al del cliente (22-sep) -------
   Yun: "que sea igual al de ellos, y ahí sí pon el mismo color de texto".
   El COLOR ya era idéntico en los dos: navy #203864 en reposo y blanco en
   hover, y el hover (fondo navy, 0.2s) también coincidía — medido con
   forcePseudoState en los dos sitios. Lo que no coincidía era la forma:
     cliente 201x44 · borde 2px · radio 4 · texto 16/16 ls .05 · relleno 12/16
             · caja del ícono 48 con divisor de 2px · chevron 12x24
     nuestro 203x46 · borde 1px · radio 0 · texto 15/18 sin ls · relleno 13/26
             · caja de 40 con divisor de 1px · chevron 9x15
   El chevron se cambió en el HTML de las 2 páginas que lo tienen (home EN y
   ES): era un trazo con puntas redondas y ahora es el mismo relleno que usan
   ellos (Font Awesome angle-right, viewBox 0 0 256 512), copiado de su sitio.
   Sigue con currentColor, así que el hover lo pinta blanco sin regla extra. */
#transactions .btn-outline{border-width:2px !important;border-radius:4px !important;
  font-size:16px !important;line-height:16px !important;letter-spacing:.05px !important}
#transactions .btn-outline .btn-txt{padding:12px 16px !important}
#transactions .btn-outline .btn-car{width:48px !important;padding:0 !important;
  justify-content:center !important;border-left-width:2px !important}

/* ---- Distribución de los logos dentro de la tombstone del carrusel (22-sep) --
   Yun: "dentro de la tarjeta hay mucho espacio entre el borde de arriba y los
   logos; hazlo exactamente igual que ellos".
   Medido en las dos (1920, estilo computado):
     cliente  tarjeta 260x500 · imagen 230x360 · 30 arriba · 15 a los lados · 110 abajo
              = 6% arriba · 5.77% a los lados · 88.46% de ancho · 72% de alto
     nuestro  tarjeta 271x521 · imagen 217x339 · 96 arriba · 27 a los lados · 86 abajo
              (venía de left/right 10%, top 16%, bottom 14%, max 80%/70%)
   Se copian los PORCENTAJES del cliente, no los pixeles: nuestra tarjeta mide
   271 de ancho por la decisión del 15-sep y la proporción 13/25 es la misma que
   la suya (260/500), así que con los mismos porcentajes la distribución queda
   idéntica aunque la tarjeta sea 11px más ancha.
   La rejilla de /experience/transactions NO entra: ahí ya medía igual que el
   cliente (marco 260x500 con relleno 30/5 e imagen 230x360 a 15/30 — los mismos
   números de los dos lados), por eso el selector va acotado al carrusel. */
.tcar-track .tomb img{left:5.77% !important;right:5.77% !important;top:6% !important;
  bottom:22% !important;max-width:88.46% !important;max-height:72% !important}

/* ---- Separación de las flechas del carrusel de tombstones (22-sep) ---------
   Yun: "están más pegadas a las tarjetas que las de ellos".
   Medido en los dos, a 1280 / 1440 / 1920:
     cliente  flecha de 48 (círculo navy por ::before) · hueco al borde de la
              tarjeta 13 / 36 / 48 — crece porque sus tarjetas van centradas y
              el sobrante se reparte a los lados. Por debajo de ~1024 NO pone
              flechas (el botón no existe en el DOM).
     nuestro  flecha de 40 · pegada a -16 del contenedor, o sea MONTADA 24px
              encima de la tarjeta en todos los anchos.
   Se copia su tamaño (48) y su separación donde hay lugar: desde 1620 el
   margen de página da para los 48 exactos. Entre 1024 y 1620 el nuestro no
   alcanza —nuestras tarjetas arrancan a 60 del borde y las suyas más adentro—,
   así que la flecha se pega al borde de la página, que es lo que hace la suya a
   1280 y 1440. Debajo de 1024 se queda como estaba, para no sacarla de la
   pantalla en un celular (ellos ahí no tienen flechas).
   Acotado al carrusel de tombstones: .tcar--news tiene sus propias reglas. */
/* El tamaño nuevo va también de 1024 para arriba: abajo la flecha se monta
   sobre la tarjeta (no hay margen de página donde ponerla) y agrandarla solo
   tapaba 8px más de logo. Debajo de 1024 queda exactamente como estaba. */
@media(min-width:1024px){
  .tcar:not(.tcar--news) .tcar-btn{width:48px !important;height:48px !important}
  /* 23-sep: -50 -> -48, con el carrusel ensanchado 12px por lado (abajo). Deja
     las flechas donde las tiene el cliente: x=0 y x=1392 a 1440, x=200 y
     x=1672 a 1920. */
  .tcar:not(.tcar--news) .tcar-btn.prev{left:-48px !important}
  .tcar:not(.tcar--news) .tcar-btn.next{right:-48px !important}
}
/* Desde 1620 el margen de página ya da para los 48 exactos de los dos lados.
   Los dos valores NO son iguales a propósito: la flecha se mide contra la
   TARJETA, no contra el contenedor, y a la fila le sobran 60px al final (4
   tarjetas de 260 + 3 huecos de 100 = 1340 dentro de un contenedor de 1400,
   que es fijo de 1520 de ancho de página en adelante). Izquierda -96 = 48 de
   flecha + 48 de hueco; derecha -36 = esos 96 menos los 60 sobrantes. Medido:
   las dos quedan a 48 de su tarjeta, como las del cliente. */
/* Ya no hacen falta valores distintos por lado: con el reparto del cliente la
   fila queda centrada sola en el contenedor, asi que las dos flechas van a -48
   en todos los anchos (bloque de 1024 de arriba). */

/* ---- Sombra de los íconos de LinkedIn y correo en Contacto (22-sep) --------
   Yun: "en la página original tienen un sombreado que no tenemos".
   Medido en los dos: mismo círculo navy de 40px, mismo ícono; el suyo trae
   box-shadow rgba(0,0,0,.15) 0 20px 20px y el nuestro `none`. Esa sombra es
   exactamente la del token --esp-sombra que ya usa el espejo (la de sus
   tarjetas), así que se reutiliza en vez de escribir otro valor.
   Solo .dir-ico, que vive únicamente en contact-us.html y es/contacto.html.
   Los círculos de about-us/our-team son otro diseño (27px, transparentes sobre
   la foto) y no se tocan. */
.dir-card .dir-ico{box-shadow:var(--esp-sombra) !important}
/* 22-sep, corrección de lo anterior: la regla de arriba solo alcanzó
   contact-us.html y es/contacto.html (.dir-ico), pero los íconos que Yun tenía
   en pantalla son los de la sección de contacto del HOME, que usan otro bloque
   (.member .info .links a, 13 por página). Medido: los 13 nuestros salían con
   `none` y los 13 del cliente con la misma sombra. Solo el home EN y ES son las
   páginas con ese markup. */
body:has(.hero) .member .info .links a{box-shadow:var(--esp-sombra) !important}
/* 22-sep: la sombra de esos íconos salía CUADRADA (Yun, con captura). No era el
   valor: la tarjeta `.member` trae `overflow:hidden` y cortaba la sombra en
   recto justo debajo. El cliente no recorta ahí (revisados sus 6 ancestros).
   Quitarlo es seguro: la foto tiene su propio recorte en `.member .photo`, que
   es lo que el hidden de la tarjeta estaba duplicando. Solo el home. */
body:has(.hero) .member{overflow:visible !important}

/* ---- Aire entre los íconos de contacto y la banda azul del pie (22-sep) ----
   Yun: "en la página original hay más espacio en esa área".
   Medido por píxeles en las dos páginas de contacto, con el mismo último ícono
   (el correo de Carlos Hernández) y la misma banda navy del pie: ellos 91px,
   nosotros 80. El aire cuelga del margen inferior de .dir-grid, que estaba en
   80; con 91 queda igual al suyo.
   Ojo para el futuro: esto NO se puede comparar en el home. Ahí lo que sigue a
   los íconos es nuestra sección navy de servicios, y en el de ellos todavía hay
   más contenido antes del pie, así que no son la misma distancia. */
.dir-grid{margin-bottom:91px !important}

/* ---- Aire bajo la sección de contacto del HOME (22-sep) --------------------
   Yun: "hay que dar más espacio entre los logotipos y donde empieza el azul".
   Aquí no hay una medida del cliente que copiar: debajo de sus íconos sigue
   otro bloque y la banda azul no nace en el mismo lugar que la nuestra (la
   sección navy de servicios). Se derivó de sus dos capturas con una medida que
   no depende de la escala, el diámetro del ícono: en la del cliente el hueco
   mide ~3.2 diámetros y en la nuestra ~2.4. Con íconos de 40px eso son ~126px
   contra los 102 que teníamos, así que la sección lleva 24px más abajo
   (84 → 108 de relleno). Si Yun lo quiere más aireado, se sube este número.
   Solo el home: la sección de contacto de /contact-us ya quedó en 91px contra
   el pie, que ahí sí es comparable con el cliente. */
body:has(.hero) section:has(.team-grid){padding-bottom:108px !important}

/* ---- Rótulo "Newsletter" sobre el título del boletín (22-sep) --------------
   Yun: el cliente lo tiene y nosotros no. Medido en su home (EN y ES: los dos
   dicen "Newsletter", no lo traducen): <label class="atmc-cap">, 12px con
   interlineado 12, peso 400, MAYÚSCULAS, interletra 1px, y 65px entre su base
   y el borde superior del h2.
   El color suyo es #85868c, que reprueba AA (3.63:1). Va var(--esp-gris)
   (#68696f, 5.47:1), el token del sitio: el 23-sep Luis pidió "el que más
   aplique para accesibilidad", así que el #75767c del 22-sep (4.53:1) sale.
   El markup nuevo (`p.news-cap`) se agregó en las 2
   páginas que tienen el bloque: index.html y es/index.html. */
/* 🪤 Especificidad: `body:has(#clients) #newsletter p:not(.news-sub)` le ganaba
   y lo dejaba en 16px. Se repite esa cadena y se le suma la clase, para quedar
   por encima y no solo empatar. */
body:has(#clients) #newsletter p.news-cap:not(.news-sub){font-size:12px !important;line-height:12px !important;font-weight:400 !important;
  text-transform:uppercase !important;letter-spacing:1px !important;color:var(--esp-gris) !important;
  margin:0 0 65px !important;text-align:left !important;padding-left:60px !important}
/* 🔴 23-sep (decisión de Luis): VUELVE A 65, que es lo que mide el cliente.
   Textual: "es espejo y se pone como lo que tiene el cliente". El 22-sep esto
   se bajó a 24 a pedido de Yun, a partir de una captura donde el hueco se leía
   ~22px; los 65 están medidos en vivo a 1024, 1280, 1440 y 1920, con el
   rectángulo del texto y no solo la caja.
   Ojo a la secuencia, porque explica el malentendido: lo que se veía "separado"
   NO era el hueco vertical, era que el rótulo quedaba 60px a la IZQUIERDA del
   título. Eso lo arregló el padding-left:60 de aquí abajo, el mismo día. Con el
   rótulo ya alineado, el motivo para bajar el hueco desapareció, pero el 24 se
   quedó. Regla del proyecto: la medición del sitio vivo le gana a la captura. */
/* El relleno de 60 no es un capricho: en el cliente la rayita navy cuelga FUERA
   del título (`::before` absoluto en left:-56), así que su texto arranca en la
   misma x que el rótulo. En el nuestro la rayita va DENTRO, con 60px de relleno
   en el h2, y sin esto el rótulo quedaba 60px a la izquierda del texto del
   título — que es lo que se veía "separado". La separación vertical ya era la
   suya: 65px medidos en los dos, a 1024, 1280, 1440 y 1920. */

/* ---- El subtítulo del boletín en UNA sola línea (22-sep) -------------------
   Yun: "ponlo en la misma línea, no lo cambies de renglón".
   Medido: el texto necesita 776px a 19.2px, el cliente le da todo el ancho
   (869 a 1440 y 921 a 1920) y le sale en una línea. El nuestro traía
   `max-width:640` de la §590, así que partía en dos. Se le quita el tope solo
   a este subtítulo; el `#newsletter .lead` de esa misma regla se queda igual.
   En pantallas angostas sigue partiendo solo, como debe. */
#newsletter .news-sub{max-width:none !important}

/* ---- Bloque "specialized industry reports": aire y botón (22-sep) ----------
   Yun: que el espacio entre las líneas, el botón y lo que queda debajo quede
   como el suyo. Medido en el cliente (1440): su h3 deja 16 abajo (nosotros 8),
   y del botón al azul deja 124 (nosotros 84, que es el relleno de la sección).
   El botón tambien difiere: el suyo mide 218x44 con relleno 12/16, interlineado
   16, radio 4 y borde de 2px navy; el nuestro salia 223x45 con relleno 12/20,
   interlineado 19.2, sin radio. Se copian sus valores, los mismos que ya se
   usaron en el boton "All Transactions" (v=152). */
#newsletter .news-industry h3{margin:0 0 16px !important}
#newsletter .news-industry p{margin:0 0 28px !important}
#newsletter .news-industry .btn-light{font-size:16px !important;line-height:16px !important;
  letter-spacing:.05px !important;padding:12px 16px !important;border-radius:4px !important;
  border:2px solid var(--navy) !important}
/* El aire de abajo cuelga del relleno de la seccion, que es la ultima cosa
   antes del pie. 84 → 124, que es lo que deja el cliente. */
body:has(#clients) .section.news{padding-bottom:124px !important}

/* ---- 23-sep-2026 · Our Team (EN+ES) igualado a los valores COMPUTADOS del cliente ----
   Medido hoy con CDP en su /about-us/our-team a 1280 y 1440, con .sr-invisible
   quitado y las animaciones terminadas. Acotado con :has(.team-row), que solo
   existe en /about-us/our-team y /es/nosotros/nuestro-equipo.

   a) El rotulo "ABOUT US" arriba del h1. El cliente SI lo trae (12px/12,
      peso 400, tracking 1px, mayusculas, margin 0, opacity .8, alto 14 a 1440).
      Nosotros lo teniamos en el HTML pero invisible: el display:none del 4-sep
      se escribio para Services/Clients y se filtro a toda la familia
      .pt-eyebrow — el mismo caso que el hub de Industries el 21-sep.
      EL COLOR NO SE COPIA: su #85868c reprueba AA (3.63:1) y el 16-sep Luis lo
      sustituyo por el token, ratificado hoy en el v=168 ("un solo gris
      accesible"). Se queda var(--esp-gris) y sin la opacity .8, que bajaria el
      contraste efectivo a ~3.6:1. */
body:has(.team-row) .pt-eyebrow{display:block !important;
  font-size:12px !important;line-height:12px !important;font-weight:400 !important;
  letter-spacing:1px !important;text-transform:uppercase;margin:0 0 8px !important}

/* b) Parrafo de entrada: el cliente lo pone a 19.2/28.8 y nosotros a 18/28.8.
      Es el MISMO texto en los dos sitios ("The strength of Seale & Associates…"),
      apareado por su contenido y no por el promedio de la plantilla. */
body:has(.team-row) main .lead{font-size:19.2px !important;line-height:28.8px !important}
/* El hueco del h1 al parrafo: el cliente deja 16 (el margin-bottom del h1) y
   nosotros 22, porque el contenedor .pt suma un padding-bottom de 6. Mismo
   caso y mismo arreglo que el hub de Industries el 21-sep. */
body:has(.team-row) .pt{padding-bottom:0 !important}

/* c) Bloque de texto del final ("At the core of our organization…"): el cliente
      lo deja a 16/27.2 y a todo el ancho de la fila (1305 a 1440). Nosotros
      teniamos 16/25.6 partido por un max-width de 820. */
body:has(.team-row) main .culture-section p{max-width:none !important;
  font-size:16px !important;line-height:27.2px !important}


/* ---- 23-sep-2026 . Selector de idioma igualado al del cliente (pedido de Yun con
   captura de su header) ----
   Medido hoy con CDP en su /about-us/our-team a 1440, header en reposo:
     bandera  30x30, SIN border-radius y object-fit fill (su PNG ya viene redondo;
              el archivo es 30x30 en los dos sitios, nosotros lo encogiamos a 26 y
              encima lo recortabamos en circulo con radius 50% + cover)
     flecha   SVG chevron de Font Awesome, 13 x 14.84, a 15px de la bandera
              (la nuestra era el caracter down-triangle, 10x14, a 8px: otro dibujo)
     boton    70x35 con padding 1px 6px (el nuestro 49x28)
   El chevron va como mask y no como <svg> en el HTML para no pasar por las 644
   paginas, y con background-color:currentColor para que siga heredando el color
   del header en sus DOS estados (blanco arriba, #8d8d94 cuando baja). Un SVG con
   el fill horneado se quedaria blanco sobre el header blanco. */
.langsel .lang-btn .flag,header .langsel .lang-btn .flag{width:30px !important;height:30px !important;
  flex:0 0 30px !important;border-radius:0 !important;object-fit:fill !important}
.langsel .lang-btn .car{display:inline-block;width:13px !important;height:14.84px !important;
  margin-left:15px !important;font-size:0 !important;line-height:0 !important;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}

/* ---- 23-sep-2026 · Perfiles del equipo (13 EN + 13 ES): espacios y reparto de
   las dos columnas, medidos contra su /about-us/our-team/james-seale ----
   Pedido de Yun: "los mismos espacios y distribucion". Medido con CDP a 1280 y
   1440, con las animaciones terminadas.

                      ellos                    nosotros (antes)
     tope del bloque   foto y nombre a y=262    nombre 197, foto 223 (26 aparte)
     columna izq       31.1% del ancho          404px FIJOS a cualquier ancho
     foto              367 a 1280 · 404 a 1440  404 siempre
     hueco entre col.  60 a 1280 · 70 a 1440    46 fijos

   Lo que estaba pasando: su foto ESCALA con el ancho y la nuestra no, asi que a
   1280 la nuestra salia 37px mas grande que la suya y el texto arrancaba antes.
   Y nuestro nombre iba 26px mas arriba que la foto porque .ph-img traia un
   margin-top de 26 que el cliente no tiene: en su pagina los dos empiezan
   parejos.

   El 31.1% clava el 1440 (su foto topa en sus 404 naturales y queda pegada a la
   derecha de la columna, con ~7px de sobra a la izquierda, como la suya) y se
   queda a 6px en 1280. Se prioriza 1440 por ser el ancho mas comun.
   Acotado con :has(.profhead) y a escritorio: el movil de esta plantilla
   arranca en max-width:700px y se apila en una columna. */
@media(min-width:701px){
  body:has(.profhead) .profhead{margin-top:101px !important;gap:5.3% !important}
  body:has(.profhead) .profhead .ph-img{flex:0 0 31.1% !important;margin-top:0 !important}
  body:has(.profhead) .profhead .ph-img img{width:100% !important;max-width:404px !important;
    height:auto !important;margin-left:auto !important;display:block}
}

/* ---- 23-sep-2026 · Perfiles: los dos huecos verticales que faltaban ----
   Medidos contra su /about-us/our-team/james-seale a 1440.

     hueco                                 ellos   nosotros (antes)
     foto -> "Contact Information"          66      47
     fin del bloque de 2 columnas -> h2
       "Representative Engagements"        120      72

   El primero se reparte entre el margen de .pcontact y su padding, que es
   donde vive la linea divisoria. El segundo es el margin-top del h2.
   OJO con el segundo: al bajar el h2 48px, la fila de tarjetas baja con el.
   El cliente arranca sus tarjetas en y=1219 y nosotros quedamos ~48 abajo,
   porque entre su h2 y las tarjetas el cliente no tiene nada y nosotros
   llevamos el renglon "N transactions advised", que se conserva. El hueco
   ENTRE ELEMENTOS queda como el suyo; lo que no puede cuadrar es la suma,
   con un elemento de mas en medio. */
@media(min-width:701px){
  body:has(.profhead) .pcontact{margin-top:33px !important;padding-top:32px !important}
  body:has(.profhead) .repcar h2{margin-top:120px !important;margin-bottom:16px !important}
}

/* ---- 23-sep-2026 · Etiquetas de industria del CARRUSEL de tombstones ----
   Yun, con captura de la tarjeta GBM/Arysta: "las industrias estan puestas en
   una linea y tocan los bordes de la imagen".

   El caso ya estaba resuelto para la REJILLA (body:has(.tombgrid), 2 paginas)
   contra el cliente: banda de 230x80 bajo la imagen, con las pildoras
   envueltas y centradas. El carrusel (.tcar-track, 504 paginas: perfiles,
   home, insights, careers, contact, industries, business-cases) se quedo con
   el montaje viejo: .ttags absoluta con width:max-content y max-width 82/94%,
   que no envuelve nunca y llega hasta el borde del marco.

   Su tarjeta (medida en /experience/transactions): marco 260x500 con padding
   30/5, imagen 230x360, banda de tags 230x80 pegada abajo, pildoras de 26 de
   alto con padding 4/6 y margin 2/3.

   Aqui va en PORCENTAJE y no en px porque la tarjeta del carrusel no mide lo
   mismo en todas las paginas (271x521 en los perfiles). Las proporciones son
   las suyas: 230/260 = 88.5% de ancho (que es justo el ancho de la imagen
   dentro del marco, 240 de 271), 80/500 = 16% de alto y 30/500 = 6% de fondo.
   Las pildoras se igualan a las que ya quedaron medidas en la rejilla. */
.tcar .tcar-track .tomb .ttags{width:88.5% !important;max-width:88.5% !important;
  height:16% !important;bottom:6% !important;left:50% !important;
  transform:translateX(-50%) !important;box-sizing:border-box !important;
  display:flex !important;flex-wrap:wrap !important;align-content:flex-start !important;
  align-items:flex-end !important;justify-content:center !important;
  gap:0 !important;margin:0 !important;padding:0 !important}
.tcar .tcar-track .tomb .ttags .tag-i,.tcar .tcar-track .tomb .ttags a{margin:2px 3px !important;
  padding:4px 6px !important;line-height:1.7 !important;background:transparent !important;
  color:#68696f !important;border:2px solid #68696f !important;border-radius:20px !important;
  font-size:8.5px !important;font-weight:700 !important;letter-spacing:.5px !important;
  text-transform:uppercase !important;white-space:nowrap !important;transition:all .2s ease !important}
.tcar .tcar-track .tomb .ttags .tag-i:hover{background:#203864 !important;
  border-color:#203864 !important;color:#fff !important}

/* ---- 23-sep-2026 · Carrusel de tombstones: tarjeta 260x500 y que no se meta
   debajo de las flechas ----
   Yun: "nuestras imagenes estan mas grandes que las de ellos" y "las flechas
   azules se enciman en las imagenes de las tarjetas".

   Medido en su /about-us/our-team/james-seale a 1440:
     tarjeta   260x500 (la nuestra iba en 271x521)
     hueco     76 entre tarjetas (el nuestro 100)
     flechas   48x48 en x=0 y x=1392, FUERA del area de tarjetas
     su ultima tarjeta visible termina en 1354, con la flecha en 1392

   Las flechas nuestras ya estaban bien (48x48, left/right -50). Lo que las
   hacia "encimarse" era la tarjeta: con 271 de ancho y 100 de hueco, cuatro
   tarjetas piden 1384 y el contenedor mide 1320, asi que la cuarta se salia
   hasta 1444 y pasaba POR DEBAJO de la flecha de la derecha (1382). No era la
   flecha la que estaba mal puesta.

   Con 260 y hueco 76, las cuatro piden 1268 y sobran 52, que se reparten como
   relleno del track (26 por lado): la ultima termina en 1354, igual que la
   suya. El alto sale solo del aspect-ratio 13/25 que ya tenia .timg:
   260 x 25/13 = 500. El relleno va como padding y no como justify-content
   para no romper el scroll del carrusel. */
.tcar .tcar-track>.tomb{width:260px !important}


/* ---- 23-sep-2026 · "Stronger Together" de Our Team: fondo blanco y el
   carrusel de fotos con las medidas del cliente ----
   Yun: "quita el color gris que esta en el fondo, porque en la pagina original
   esta con el fondo blanco, y separa tambien las flechas, estan pegadas".

   Fondo: su seccion no tiene ninguno (ningun ancestro con background distinto
   de transparente, medido en vivo); la nuestra traia var(--cream).

   Carrusel: medido en el suyo a 1440 -> fotos de 424x318, hueco 24 y 12 de
   margen a cada lado, dentro del area de 1344 que dejan sus flechas (0-48 y
   1392-1440). 3x424 + 2x24 + 2x12 = 1344 exacto.
   Las flechas ya caian en 0 y 1392 como las suyas; lo que las hacia parecer
   pegadas era que la tercera foto llegaba hasta 1474 y se metia debajo.
   Acotado a .culture-section, que solo existe en las 2 paginas de Our Team
   (.cimg lo usan tambien servicios, clientes y casos de negocio). */
body:has(.team-row) .culture-section{background:#fff !important}
body:has(.team-row) .culture-section .tcar-track{gap:24px !important;
  padding-left:12px !important;padding-right:12px !important;
  scroll-padding-left:12px !important;scroll-padding-right:12px !important}
body:has(.team-row) .culture-section .tcar-track>.cimg{flex:0 0 424px !important;
  width:424px !important;max-width:424px !important}

/* ---- 23-sep-2026 · Carrusel de tombstones con POCAS tarjetas ---------------
   Yun, sobre la seccion nueva de Armando Rios: "el titulo no lleva guion, las
   imagenes van centradas porque solo son dos, y por lo mismo que solo son 2
   no llevan las flechas, quitalas".

   1) La rayita navy del titulo. Sale de h2:has(+.tcar)::before (linea 841),
      pensada para servicios e industrias. En los demas perfiles nunca se veia
      porque entre el h2 y el .tcar va el renglon "N transactions advised"; en
      Armando no lo hay (el cliente no lo tiene) y el h2 quedo pegado al
      carrusel, que es justo lo que esa regla busca. El cliente no pone rayita
      en esta seccion en ninguna de sus paginas.

   2) y 3) Centradas y sin flechas. EL UMBRAL ES 2, QUE ES LO QUE ESTA MEDIDO
      EN SU SITIO: su pagina de Armando lleva 2 tarjetas, las centra (x=422 y
      758) y no pone flechas; las de Brett Carmel, Felipe Bueno y Robert
      Whitney llevan 20 y si las ponen. No tiene ninguna pagina con 3 o 4, asi
      que no hay con que saber donde esta SU limite.
      Un umbral de 4 saldria de la geometria (cuatro de 260 con hueco 76 piden
      1268 y el area mide 1344), pero eso seria inventarlo: aqui se copia lo
      que hace el cliente, no lo que parece razonable. Hoy da igual en la
      practica — de nuestros 7 perfiles con carrusel, uno lleva 2 y los otros
      5, 6, 7, 7, 8 y 8 — pero si alguno queda en 3 o 4 hay que ir a medir su
      sitio antes de decidir. */
.repcar h2:has(+.tcar)::before{content:none !important}
.tcar:has(.tomb):not(:has(.tomb:nth-child(3))) .tcar-track{justify-content:center !important}
.tcar:has(.tomb):not(:has(.tomb:nth-child(3))) .tcar-btn,
.tcar:has(.tomb):not(:has(.tomb:nth-child(3))) .tcar-dots{display:none !important}

/* ---- 23-sep-2026 · Hueco del titulo a las tarjetas en el carrusel ----------
   Yun, con marca sobre la seccion de Armando: "deja el mismo espacio que tiene
   la pagina original, entre el titulo y la parte superior de las
   transacciones".

   Medido a 1440 en TRES de sus paginas (armando-rios, james-seale y
   brett-carmel): el hueco del fin del h2 al tope de la tarjeta es 61 en las
   tres, asi que es un valor suyo constante y no algo de la pagina de 2.
   El nuestro en Armando era 18.

   Acotado a `h2 + .tcar`, es decir, solo cuando el titulo va pegado al
   carrusel. En los otros 6 perfiles en medio va el renglon "N transactions
   advised", que se conserva, y ahi el hueco es otro (93 en james-seale) —
   queda anotado y sin tocar, porque cerrarlo pediria mover ese renglon. */
.repcar h2 + .tcar{margin-top:59px !important}

/* ---- 23-sep-2026 · Our Team: aire entre el texto de entrada y la retícula ---
   Yun: "deja mas espacio vertical entre la ultima linea del texto y donde
   empiezan las fotografias".
   Medido a 1440: el cliente deja 66 del fin de su parrafo al tope de la
   primera foto; nosotros 24. El valor va directo en 66 y no en la diferencia
   (42), porque el margen de la fila COLAPSA con el margin-bottom del parrafo:
   manda el mayor de los dos, no la suma. */
body:has(.team-row) main .team-row:first-of-type{margin-top:66px !important}

/* ---- 23-sep-2026 · Viñetas: sangría y paso, como el cliente ----------------
   Yun, sobre /services/sell-side-advisory: "pon los bullet points igual que en
   la pagina original".

   Medido a 1440 en CUATRO de sus paginas (sell-side, buy-side, corporate
   finance y clients/family-owned): las cuatro con padding-left 40 en el <ul>,
   los <li> SIN margenes y el texto arrancando en x=100. El paso entre viñetas
   es exactamente el line-height (30.6 donde el cuerpo va a 18px, 28.8 donde va
   a 19.2). Es un patron suyo, no de la pagina de servicios.

                    ellos   nosotros (antes)
     padding-left   40      20      -> el texto arrancaba en 80 y no en 100
     margen del li  0 / 0   9 / 9   -> el paso era 39.6 en vez de 30.6

   .plain-list vive en 72 paginas nuestras, contact-us incluida. El cambio va
   global porque el patron del cliente tambien lo es. */
.plain-list{padding-left:40px !important}
.plain-list>li{margin-top:0 !important;margin-bottom:0 !important}

/* ---- 23-sep-2026 · El boton "Case Study", pegado al texto ------------------
   Yun: "estos dos botones deben estar mas cerca del texto", sobre las tarjetas
   de 2 lineas (Woodcrafters, Port Contractors); las de 3 ya estaban bien.

   Efecto del v=185 de hoy: al estirar el cuadro blanco para que las filas
   cerraran parejas, el <p> de dentro se llevo el sobrante, porque la hoja de
   pagina le da flex:1. En las de 3 lineas no se nota —no sobra nada— y en las
   de 2 empujaba el boton 30px hacia abajo.

   Medido en el suyo: su parrafo va en flex:0 1 auto y deja SIEMPRE 12px al
   boton, con 2 o con 3 lineas; lo que cambia es el aire que queda DEBAJO del
   boton (59 con 2 lineas, 32 con 3). O sea el sobrante va al fondo del cuadro,
   no entre el texto y el boton. */
.case-card2 .cbody p{flex:0 1 auto !important}

/* ---- 23-sep-2026 · Sección de servicios: sin línea divisoria y con su aire --
   Yun: "quita esa linea divisoria, en la pagina original no la tienen" y "deja
   el mismo espacio vertical entre el ultimo cuadro blanco y donde empieza el
   titulo".

   LA LINEA: era el border-top de section.svc-section (1px var(--line)), que
   cruza los 1440. Barrida la pagina entera del cliente a 1440 buscando
   cualquier borde de mas de 600px: no tiene ninguno. Los unicos que aparecen
   son de su acordeon, de 623px y en rgb(250,250,250), que no se ven.

   EL AIRE: del fondo del ultimo cuadro blanco al tope del h2, el cliente deja
   151 y nosotros 133. Acotado a la seccion que lleva el carrusel de
   tombstones, que es la que Yun midio. */
section.svc-section{border-top:0 !important}
section.svc-section:has(.tcar .tomb){padding-top:63px !important}


/* ---- 23-sep-2026 · Franja de cita de los business cases -------------------
   Yun, con captura de la suya: "nos hace falta una comilla al inicio... como
   esta mas oscura nuestra imagen no se ven".

   Dos cosas, y la primera no era lo que parecia: no es que la comilla estuviera
   tapada por lo oscuro — NO LA TENIAMOS. Nuestro .qdivider no traia ningun
   pseudo-elemento.

   Medido el suyo: es un ::before sobre el <p>, con el glifo U+F10D de Font
   Awesome (fa-quote-left) a 80px, blanco, opacity .2, absolute en
   top:-48 left:-32. Solo lleva la de APERTURA: su ::after es `none`.
   Como no cargamos Font Awesome, va el mismo dibujo como SVG, igual que el
   chevron del selector de idioma.

   Y el velo: su montaña no tiene ninguno; la nuestra llevaba
   linear-gradient(rgba(15,28,48,.52)) horneado en el style de las 72 paginas.
   Se anula por CSS dejando solo la foto, que es la misma en las 72. */
.qdivider{background-image:url(/assets/bc-quote-divider.webp) !important}
.qdivider p{position:relative}
.qdivider p::before{content:"";position:absolute;top:-48px;left:-32px;
  width:80px;height:80px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M464%20256h-80v-64c0-35.3%2028.7-64%2064-64h8c13.3%200%2024-10.7%2024-24V56c0-13.3-10.7-24-24-24h-8c-88.4%200-160%2071.6-160%20160v240c0%2026.5%2021.5%2048%2048%2048h128c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48zm-288%200H96v-64c0-35.3%2028.7-64%2064-64h8c13.3%200%2024-10.7%2024-24V56c0-13.3-10.7-24-24-24h-8C71.6%2032%200%20103.6%200%20192v240c0%2026.5%2021.5%2048%2048%2048h128c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48z%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
  opacity:.2;pointer-events:none}

/* ---- 23-sep-2026 · Franja de cita: reparto del texto y alto del rectangulo -
   Yun: "distribuye el texto como esta en la pagina original y asegurate que el
   tamaño del rectangulo donde esta la imagen es el mismo".
   Medido a 1440 en su /experience/business-cases/woodcrafters:

                      ellos          nosotros (antes)
     ancho del texto   1400 TOPADO    1040 (max-width 1040)
     texto arranca en  x=20           x=200
     interlineado      39.6           45
     alto del texto    79 (2 lineas)  90
     rectangulo        1440 x 169     1440 x 178
     relleno           15px 20px      44px 24px
     foco de la foto   0% 50%         50% 50%

   🪤 Su texto tiene un TOPE de 1400, no "todo el ancho". A 1440 las dos cosas
   dan el mismo numero (1440-40 = 1400) y por eso el primer intento con
   max-width:none parecia correcto; medido tambien a 1680 y 1920, el suyo
   sigue en 1400 y en DOS lineas, y su franja sigue midiendo 169. Con
   max-width:none la nuestra se iba a una sola linea desde ~1700 y la franja
   se encogia a 130, que es lo que Yun vio en su pantalla. */
.qdivider{padding:15px 20px !important;background-position:0% 50% !important}
.qdivider p{max-width:1400px !important;line-height:39.6px !important;
  margin:48px auto 12px !important}
/* Los 60px que faltaban para el alto del rectangulo salen de aqui: su bloque
   de cita (.atmc-quote-01) lleva margin 48/12, no 0. Con eso el contenido mide
   79+48+12 = 139 y el rectangulo 139+15+15 = 169, que es el suyo. Y de paso es
   lo que le deja sitio a la comilla, que va en top:-48 sobre el parrafo. */

/* ---- 23-sep-2026 · Bloque de testimonio de los business cases -------------
   Yun: "este cuadro no esta igual que en la pagina original... aprovecha para
   arreglar las dos imagenes de la izquierda... no olvides poner las sombras de
   los recuadros donde aplique".
   Medido a 1440 en su /experience/business-cases/woodcrafters:

     LA CAJA            ellos                        nosotros (antes)
       fondo            blanco                       #edece9 (crema)
       sombra           rgba(0,0,0,.15) 0 20px 20px  ninguna
       borde izq        ninguno                      3px navy
       radio            4                            0
       relleno          48                           28/32
     EL TEXTO
       cita             16/27.2 SIN cursiva          18/28.8 en cursiva
       nombre           16/27.2 peso 700             13.6px
       cargo            12/12 MAYUSCULAS, tracking   iba en la misma linea,
                        1px, en su propio renglon    detras de un guion
     LAS FOTOS          309x411 · hueco 25           316x360 · hueco 16
       la 2a            30px MAS ABAJO que la 1a     a la misma altura
       sombra           rgba(0,0,0,.1) 0 5px 30px    ninguna
       radio            0                            4

   El cargo pedia separarlo en el HTML: iba como "<strong>Nombre</strong> —
   Cargo" dentro del mismo <footer>. Convertidos los 76 de las paginas de caso
   a <span class="t-rol">, que es lo que esta regla estiliza.
   El color del texto se queda en nuestro token: el suyo es el #85868c que
   reprueba AA y que Luis sustituyo el 16-sep. */
.testi-grid{align-items:center !important}
.testimonial{background:#fff !important;border-left:0 !important;border-radius:4px !important;
  padding:48px !important;box-shadow:rgba(0,0,0,.15) 0 20px 20px !important}
.testimonial p{font-size:16px !important;line-height:27.2px !important;font-style:normal !important;
  margin-bottom:24px !important}
/* El <footer> del blockquote se comia la regla global footer{background:cream;
   border-top:1px solid} pensada para el pie del SITIO: de ahi salia la banda
   gris y la linea separadora que el cliente no tiene. */
.testimonial footer{background:transparent !important;border-top:0 !important;
  margin-top:0 !important;padding:0 !important}
.testimonial footer strong{font-size:16px !important;line-height:27.2px !important;font-weight:700 !important}
.testimonial footer .t-rol{display:block;font-size:12px !important;line-height:12px !important;
  text-transform:uppercase;letter-spacing:1px;margin:8px 0 6px}
/* El margen de abajo iguala el aire del cargo al fondo: su cargo cierra a 54
   del borde y el nuestro, con el relleno de 48 solo, cerraba a 48. */
/* Las dos fotos: tamaño, hueco, sombra y el desfase de 30 de la segunda. */
.tphotos{gap:25px !important;align-items:start !important}
.tphotos img{height:411px !important;min-height:0 !important;border-radius:0 !important;
  box-shadow:rgba(0,0,0,.1) 0 5px 30px !important}
.tphotos img:nth-child(2){margin-top:30px !important}

/* ---- 23-sep-2026 · Bloque de cierre (CTA) de los business cases -----------
   Yun: "arreglar la distribucion del texto, corregir los tamaños de los textos
   y hacer mas grande el boton y el texto del boton".
   Medido a 1440 en su /experience/business-cases/woodcrafters:

                    ellos                      nosotros (antes)
    reparto         texto a la IZQUIERDA (982  todo centrado en una columna
                    de ancho) y boton a la     de 760, con el boton debajo
                    DERECHA, a la misma altura
    titulo          36/39.6, color #333        30/36, en navy
    parrafo         16/27.2, alineado izq      17/27.2, centrado
    boton           163x54, texto 20/20,       114x42, texto 15/18,
                    relleno 15/30, radio 4     relleno 12/20, radio 0

   El HTML son tres hermanos (h2, p, a.btn) dentro de .offer-in, asi que el
   reparto se arma con grid: las dos primeras filas de la columna 1 para el
   texto y la columna 2 para el boton, centrado en vertical. */
.offer-in{max-width:none !important;margin:0 !important;text-align:left !important;
  display:grid !important;grid-template-columns:74.35% 1fr !important;align-items:center !important}
/* 🪤 El ancho del texto NO es fijo: es 74.35% del contenedor (su span9 de 12).
   A 1440 da 982 y a 1920 da 1338, los dos medidos en su sitio. Con el 982px
   fijo del primer intento, a 1920 nuestro texto se quedaba corto. */
.offer-in h2{grid-column:1 !important;grid-row:1 !important}
.offer-in p{grid-column:1 !important;grid-row:2 !important;text-align:left !important}
.offer-in .btn{grid-column:2 !important;grid-row:1 / 3 !important;justify-self:center !important;
  align-self:center !important;margin-top:0 !important}
.offer h2{font-size:36px !important;line-height:39.6px !important;color:#333 !important;
  margin:0 0 13px !important}
/* El hueco del titulo al parrafo: 13 en el suyo, 35 en el nuestro (el h2 traia
   .5em y el <p> su propio margen). Con eso el contenido mide 146 y la franja
   206, que son los suyos. */
.offer p{margin:0 !important}
/* Tambien el margen de ABAJO del parrafo: dejaba 47 de aire al fondo (30 del
   relleno + 17 suyos) y el cliente cierra a 30. */
.offer p{font-size:16px !important;line-height:27.2px !important}
.offer .btn{font-size:20px !important;line-height:20px !important;padding:17px 30px !important;
  border-radius:4px !important}
/* El relleno vertical va en 17 y no en 15: con 15 el boton queda en 50 de alto
   y el suyo mide 54. El ancho sale a 159 contra sus 163, que son 4px del texto
   en si, no del relleno. */
/* El bloque alinea a 60 como el resto de la pagina, no a 24. */
/* Su franja mide 1440x206 con padding 30px 60px; la nuestra iba con 56 de
   relleno vertical y quedaba en 280. El contenido es casi el mismo (146 suyo
   contra 151 nuestro). */
.offer{padding:30px 60px !important}

/* ---- 23-sep-2026 · Hero de los business cases ----------------------------
   Yun: "toda esta seccion esta mal distribuida y la imagen demasiado oscura,
   que nuestro header quede igual a este".
   Medido a 1440 y 1920 en su /experience/business-cases/woodcrafters:

                    ellos                        nosotros (antes)
    relleno         48px 0                       64px 24px
    titulo          48/52.8, tope de 1400        48/55.2, a todo el ancho
                    (1280 a 1440, 1400 a 1920)   (1392 a 1440)
    botones         relleno 12/16, texto 16/16,  relleno 11/24, texto 16/20.8,
                    borde 2px blanco, radio 4    borde 0 y 1px, radio 3
    velo            ninguno                      radial rgba(15,25,45,.48)

   🔴 EL VELO ERA UNA DECISION DE ACCESIBILIDAD del 9-sep: "sombra de lectura
   detras del bloque de texto, medido con qa-contraste-header sobre los 12
   casos de foto mas clara" — sin el, el texto blanco no pasa AA en esos 12.
   Se retira porque Yun pidio el espejo exacto y el cliente no lo trae; queda
   avisado para que Luis lo sepa. Revertirlo es descomentar una linea. */
#bc-hero.pagehero--img>.wrap{background:none !important;
  padding:48px 80px !important;max-width:1560px !important}
/* El relleno lateral es 80, no 24: con 80 el titulo mide 1280 a 1440, que es
   el suyo. Y el max-width del contenedor sube a 1560 (1560-160 = 1400) porque
   el .wrap del sitio topaba antes y a 1920 dejaba el titulo en 1360 en vez de
   sus 1400. */
/* Alto de la franja: la suya mide 509 a 1920 y la nuestra topaba en 484. */
#bc-hero.pagehero--img{min-height:509px !important}
#bc-hero.pagehero--img h1{line-height:52.8px !important;max-width:1400px !important;
  margin-left:auto !important;margin-right:auto !important}
#bc-hero.pagehero--img .hbtn{padding:12px 16px !important;line-height:16px !important;
  border:2px solid #fff !important;border-radius:4px !important}


/* ---- 23-sep-2026 · Menu del header centrado como el del cliente ----------
   Su menu va centrado en la pantalla: a 1920 de 678 a 1269 (centro 973) y a
   1440 de 438 a 1029 (centro 733). Los items ya median igual.

   🪤 Las dos variantes NO admiten el mismo arreglo:
   - nav.mainnav (paginas de caso e industrias) acepta flex:1 + center.
   - el <ul> de .nav (home, Our Team, servicios, clientes) NO: al darle
     flex:1 el header se queda en un estado mixto, con fondo blanco y los
     textos tambien en blanco. Ahi solo se mueve con transform, que dibuja
     desplazado sin tocar el reparto del flex ni el estado del header. */
/* 24-sep: solo escritorio (Luis/QA): sin media query este display:flex dejaba el
   menu ABIERTO en celular en ~570 paginas (casos, transacciones, perfiles...). */
@media(min-width:900px){
header.top nav.mainnav{flex:1 1 auto !important;display:flex !important;
  justify-content:center !important;gap:0 !important;margin:0 !important;
  transform:translateX(2px)}
header.top .nav>ul,header.site .nav>ul{gap:0 !important;transform:translateX(-7px)}
}


/* ---- 24-sep-2026 · Public and Multinational (EN): el titulo de servicios ---
   "Services to public and multinational corporations include:" mide en su
   sitio 36px/39.6 en dos lineas, con 16 de aire arriba (desde el ultimo
   parrafo) y 16 abajo (hasta la lista), a 1440 y a 1920. El nuestro venia en
   24 con 28 y 22 por la regla de columna de 848.

   🪤 SOLO esta pagina en ingles. Medido en las otras: su version en espanol
   y Family-Owned usan 24 (como el resto de la columna) y Private Equity no
   tiene este titulo. Por eso el selector va por el canonical y no por
   .tpl-clientes, que vive en las 6 paginas de clientes.
   🪤 Y solo el h2 que va pegado a la lista (:has(+.plain-list)): la primera
   version (v=202) tomaba todos los .section-h2 de la columna y subio tambien
   "FAQs from Our Clients" a 36, cuando el cliente lo tiene en 24. */
html:has(link[rel="canonical"][href$="/clients/public-and-multinational-corporations"]) .top-grid>div:first-child .section-h2:has(+.plain-list){
  font-size:36px !important;line-height:39.6px !important;
  margin-top:16px !important;margin-bottom:16px !important}
@media (max-width:767px){
  /* movil: el gate de jerarquia (h1 > h2) manda, como en §16 */
  html:has(link[rel="canonical"][href$="/clients/public-and-multinational-corporations"]) .top-grid>div:first-child .section-h2:has(+.plain-list){
    font-size:22px !important;line-height:1.1 !important}
}


/* ---- 24-sep-2026 · Flecha de las FAQ: el chevron del cliente ---------------
   Su acordeon (.atmc-accordion-01) usa el chevron-up de Font Awesome en SVG,
   caja 17.5x20, relleno #203864 (= --navy), girado 180 cerrado y 0 abierto,
   con transicion de .2s. El trazo queda a 33 del borde derecho de la tarjeta
   y a 38 del borde de arriba (medido a 1440 y 1920, igual en las 3 FAQ).
   El nuestro era el caracter "⌄"/"⌃" en #333, que cambiaba de glifo en vez
   de girar.

   Se queda como item del flex del summary (no absolute) para que el texto
   siga sin meterse debajo: con gap 0 el texto corta a ~50 del borde, como el
   suyo (49.7). margin-top 3 = 33 desde la tarjeta (el summary trae 30 arriba).
   Es la regla general de .faq-item: el cliente usa el mismo acordeon en
   Services y Clients; en Industries la FAQ es nuestra y va con la misma. */
.faq-item summary{gap:0 !important}
.faq-item summary::after{content:"" !important;flex:none !important;align-self:flex-start !important;
  width:17.5px !important;height:20px !important;margin:3px 0 0 0 !important;font-size:0 !important;
  background:var(--navy) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(180deg) !important;transition:transform .2s !important}
.faq-item[open] summary::after{content:"" !important;transform:rotate(0deg) !important}


/* ---- 24-sep-2026 · Carrusel de tombstones: el hueco FLUIDO del cliente -----
   El bloque del 23-sep (1024/1620) horneo dos valores, 76 y 96, medidos a
   1440 y 1920. Pero su hueco no salta: crece con la pantalla. Medido en
   /clients/public-and-multinational-corporations a 1280, 1470, 1480, 1490,
   1500, 1505, 1512, 1536 y 1920 (Yun ve a ~1512):
       hueco = (area del carrusel - 4 x 260) / 4
       area  = min(ancho - 96, 1424)   (la nuestra ya mide eso: .tcar)
     1280 -> 36 · 1440 -> 76 · 1512 -> 94 · 1536+ -> 96
   A 1512 el nuestro quedaba en 76 contra sus 94: tarjetas apretadas que se
   veian "mas grandes". Mismo reparto en Clients, Industries y Our Team.

   Se calcula con unidades de contenedor (cqw = ancho del .tcar), no con vw:
   vw cuenta la barra de scroll y el area del cliente no. Desde 1280 hacia
   arriba, que es donde caben las 4 de 260; abajo sigue el bloque del 23-sep
   (el cliente abajo de 1280 las encima, eso no se copia). */
@media(min-width:1280px){
  .tcar:has(.tomb){container-type:inline-size}
  .tcar:has(.tomb) .tcar-track{gap:calc((100cqw - 1040px) / 4) !important;
    padding-left:calc((100cqw - 1040px) / 8) !important;padding-right:calc((100cqw - 1040px) / 8) !important;
    scroll-padding-left:calc((100cqw - 1040px) / 8) !important;scroll-padding-right:calc((100cqw - 1040px) / 8) !important}
}
/* Clients (las 3, EN+ES): su tarjeta arranca 57 bajo el titulo y la nuestra
   36, en todos los anchos. En Industries ya coincide (56 contra 57), por eso
   va solo con .tpl-clientes. 34 + 21 = 55. */
body.tpl-clientes .tcar:has(.tomb){margin-top:55px !important}
/* Flechas del carrusel de tombstones: en su sitio el CENTRO de la flecha
   queda siempre 240 bajo el borde de arriba de la tarjeta (medido en home,
   Clients, Industries y Our Team, a 1440 y 1920). La nuestra iba a top:42%
   del .tcar, que cambia con su relleno: 210 en home, 221 en Clients, 227 en
   Industries. La tarjeta arranca 2px dentro del track (su padding), y el
   .tcar de Industries/Our Team trae 20 arriba (h2+.tcar, §952). */
@media(min-width:1024px){
  .tcar:has(.tomb) .tcar-btn{top:242px !important}
  main>.wrap>h2:has(+.tcar)+.tcar:has(.tomb) .tcar-btn{top:262px !important}
}


/* ---- 24-sep-2026 · Public and Multinational (EN+ES): el bloque "Approach" --
   Medido en su pagina con scroll real y las animaciones terminadas, a 1440,
   1512 y 1920 (con las clases de animacion forzadas los numeros mienten: el
   rotulo sale 55 arriba del titulo; en pantalla son 5).
   - Rotulo: <label> 12/12, peso 400, espaciado 1px, 5 sobre el titulo.
     El nuestro: 18px negrita a 10.
   - Titulo 36 con mb 16. Primer parrafo 19.2/28.8 (el h2+ y no :first-of-type:
     el rotulo tambien es un <p>) (todo en negrita, ya va
     con <strong> en el HTML), 16 de aire; los demas 16/27.2 con 12 entre si.
   - Dos columnas iguales con 2.58% en medio: 643/34 a 1440, 678/36 a 1512,
     682/36 a 1920. La nuestra de texto era 674/712/717, y el titulo cortaba
     en otro lugar a 1440.
   - Fotos: 48.05% de su columna, caja 309x411 (casi 3:4, "mas cuadradas"),
     a los extremos, SIN radio, sombra 0 5 30 rgba(0,0,0,.1), bajadas 50 y
     80 (transform). Su centro natural queda 54.5 arriba del centro del texto
     en los 3 anchos: el margin-bottom de 109 lo reproduce.
   Solo esta pagina: Family-Owned y Private Equity comparten .approach-grid
   pero no se midieron. */
html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-grid .eyebrow-sec{
  font-size:12px !important;line-height:12px !important;font-weight:400 !important;letter-spacing:1px !important;
  color:var(--esp-gris) !important;margin:0 0 7px !important}
html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-grid .section-h2{margin-bottom:16px !important}
html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-grid .intro-lead{margin:0 0 12px !important}
html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-grid .section-h2+.intro-lead{
  font-size:19.2px !important;line-height:28.8px !important;color:var(--esp-gris) !important;margin-bottom:16px !important}
html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-grid .intro-lead:last-of-type{margin-bottom:0 !important}
@media(min-width:1024px){
  html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-grid{
    grid-template-columns:1fr 1fr !important;column-gap:2.58% !important;align-items:center !important}
  html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-photos{
    display:flex !important;justify-content:space-between !important;align-items:flex-start !important;margin:0 0 109px !important}
  html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-photos img{
    width:48.05% !important;height:auto !important;aspect-ratio:309/411 !important;object-fit:cover !important;object-position:50% 50% !important;
    border-radius:0 !important;box-shadow:0 5px 30px rgba(0,0,0,.1) !important;margin:0 !important;transform:translateY(50px)}
  html:has(link[rel="canonical"]:is([href$="/clients/public-and-multinational-corporations"],[href$="/es/clientes/empresas-publicas-o-multinacionales"],[href$="/clients/private-equity-family-office"],[href$="/es/clientes/fondos-de-inversion"])) .approach-photos .ap2{transform:translateY(80px)}
}


/* ---- 24-sep-2026 · Public and Multinational (EN+ES): "How We Can Help You"
   con las TARJETAS del cliente -----------------------------------------------
   Aqui el cliente NO usa la lista suelta (atmc-list-03, la de "Benefits") sino
   atmc-list-04, la misma tarjeta del "Process" de Services: nuestro HTML lo
   traia como .benefit-grid y salia sin caja. Se marca solo este bloque con
   .benefit-grid--tarjetas (en el HTML de las 2 paginas); el "Benefits of
   Working..." de abajo sigue igual.
   Medido en su pagina a 1512 con scroll real:
   - Seccion con fondo #eee y 50 de aire arriba del titulo.
   - Dos columnas iguales (678) con 36 en medio (2.58%, el mismo reparto
     que el bloque Approach); cada una es un <ul> con 16 de sangria, asi
     que la tarjeta mide 662 y arranca 16 adentro. Corte 3+2.
   - Tarjeta blanca, radio 4, sombra 0 20 20 rgba(0,0,0,.15), padding
     8 16 8 32, 16 entre tarjetas. Texto 16/27.2 gris, titulo en negrita
     inline.
   - Icono: caja navy 32x32 radio 4, 16 por fuera del borde izquierdo y 8
     abajo del borde de arriba; chevron-right BLANCO de 9x15 centrado. */
section.svc-section:has(.benefit-grid--tarjetas){background:#eee !important;padding-top:50px !important;padding-bottom:50px !important}
.benefit-grid.benefit-grid--tarjetas .benefit-card{background:#fff !important;border-radius:4px !important;
  box-shadow:0 20px 20px rgba(0,0,0,.15) !important;padding:8px 16px 8px 32px !important;margin:0 0 16px 16px !important}
.benefit-grid.benefit-grid--tarjetas .benefit-card,
.benefit-grid.benefit-grid--tarjetas .benefit-card h3,
.benefit-grid.benefit-grid--tarjetas .benefit-card p{line-height:27.2px !important}
.benefit-grid.benefit-grid--tarjetas .benefit-card::before{left:-16px !important;top:8px !important;width:32px !important;height:32px !important;
  border-radius:4px !important;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") center/9px 15px no-repeat !important}
@media(min-width:641px){
  .benefit-grid.benefit-grid--tarjetas{column-gap:2.58% !important}
  .benefit-grid.benefit-grid--tarjetas .benefit-card:nth-child(3){break-after:column !important}
}


/* ---- 24-sep-2026 · Rejilla de datos del caso: por FILAS, como el cliente ----
   La regla de arriba (grid-auto-flow:column, 2 filas) se midio en un caso de
   4 datos con el DOM en orden Target/Industries/Transaction/Geography. Con 5
   datos abria una TERCERA columna (AZZ: Project Scope a la derecha) y en los
   casos con el DOM en otro orden (Beijer Ref, Arca, Vitromex...) cruzaba las
   etiquetas. Medido en su sitio en 5 casos (4 y 5 datos, los dos ordenes):
   siempre 2 columnas y por filas — Target | Transaction Type, Industries |
   Geography, y el 5o (Size / Project Scope) abajo a la izquierda.
   El HTML de los 80 casos (EN+ES) se reordeno a ese orden de lectura (solo
   el orden de los <div class="fact">, verificado sin otro cambio), asi que
   aqui basta con llenar por filas. */
.case-body .facts{grid-auto-flow:row !important;grid-template-rows:none !important}
/* Medido en AZZ y Anne Sullivan a 1512: sus celdas miden 434 con 23 en medio
   (2.58% del ancho, el mismo reparto de HubSpot de Approach) y el 5o dato
   (Size / Project Scope) ocupa las DOS columnas (891): por eso "Acquisition
   Target Identification, Approach and Execution" le cabe en una linea. */
@media(min-width:641px){
  .case-body .facts{column-gap:2.58% !important}
  .case-body .facts .fact:nth-child(5){grid-column:1 / -1 !important}
}


/* ---- 24-sep-2026 · Business cases: cita, fotos y "Are you looking..." a
   cualquier ancho (el 23-sep se midio solo a 1440) -------------------------
   Medido en su /experience/business-cases/azz a 1280, 1440, 1512 y 1920 con
   scroll real:
   - Cita + fotos: mismo reparto de HubSpot que "Approach" de Clients: dos
     columnas iguales con 2.58% en medio; las fotos al 48.05% de su columna,
     caja 309:411 que ESCALA (271x361 a 1280, 309x411 a 1440, 326x433 a
     1512). La nuestra tenia alto fijo de 411: a 1512 salian 330x411.
   - Nombre de la cita en el gris del texto (el suyo #85868c; aqui el token
     AA de Luis), no en navy.
   - 71 de aire de la ultima foto a la franja final (el nuestro 48).
   - Franja final: fondo #eee (la nuestra #f4f5f7). Su boton va centrado en
     una span3 con canal de 2.13% (a 1512 el nuestro caia 16px a la
     izquierda) y lleva BORDE de 2px: por eso mide 163 y su relleno es 15,
     no el 17 que se le puso el 23-sep para llegar a 54 de alto. */
.testimonial footer strong{color:var(--esp-gris) !important}
@media(min-width:1024px){
  .testi-grid{grid-template-columns:1fr 1fr !important;column-gap:2.58% !important}
  .tphotos{display:flex !important;justify-content:space-between !important;gap:0 !important}
  .tphotos img{width:48.05% !important;height:auto !important;aspect-ratio:309/411 !important;object-fit:cover !important}
}
.offer{background:#eee !important;margin-top:71px !important}
.offer-in{column-gap:2.13% !important}
.offer .btn{padding:15px 30px !important;border:2px solid var(--navy) !important}
/* Franja final en MOVIL: la rejilla de 2 columnas del 23-sep no tenia corte y
   en 390 dejaba el texto en 201px y el boton fuera de pantalla (los 40 casos
   ES ya desbordaban por "Contactanos"; con el borde de 2px desbordaron
   tambien los 40 EN). Medido en su sitio a 390: una sola columna, titulo
   22/24.2, 10 al parrafo 14/23.8, 21 al boton; boton 143x48 centrado, texto
   17.5, relleno 13.125/26.25. */
@media(max-width:767px){
  .offer-in{display:block !important}
  .offer h2{font-size:22px !important;line-height:24.2px !important;margin:0 0 10px !important}
  .offer p{font-size:14px !important;line-height:23.8px !important}
  .offer-in .btn{display:table !important;margin:21px auto 0 !important;font-size:17.5px !important;line-height:17.5px !important;
    padding:13.125px 26.25px !important}
}


/* ---- 24-sep-2026 · Hero de los business cases: alto y reparto del cliente --
   Yun: "nuestro header esta mas pequeno y la imagen no esta cuadrada como la
   tienen ellos". El bloque del 23-sep fijo min-height 509 (su alto a 1920 en
   Woodcrafters) y centraba el contenido. Su hero NO tiene alto fijo: es
   relleno + contenido. Medido en AZZ sin transformaciones (offsetTop) a 1280,
   1440, 1512, 1600, 1660, 1670, 1679, 1680, 1760 y 1920:
     relleno arriba y abajo  7rem: 100.8 hasta 1679, 140 desde 1680
     antes del titulo        48 (su .atmc-hero-02)
     titulo -> botones       83 (12 del h1 + 71) — va entero en el margin de .hbtns: el
     margen del h1 y el de los botones se funden y solo cuenta el mayor
     debajo de los botones   0
     AZZ: 483 hasta 1679, 562 desde 1680 (Yun lo ve a 1920: 562)
   Botones: cada uno en media columna (el 1o a la derecha, el 2o a la
   izquierda), por eso su hueco crece con la pantalla: 29 a 1280, 35 a 1512,
   46 a 1920 = 2.656vw - 5px.
   El breadcrumb SE QUEDA (Luis, 7-sep) pero sale del flujo: va dentro de esos
   48 de arriba y no empuja el titulo, que queda donde el suyo.
   La foto: la posicion va por caso en su CSS (74 center center; AZZ y Fanosa
   left bottom; Cemex left top) y se cambio en la regla #bc-hero del <style> de esas 6 paginas
   (traia background-position:center!important, que le ganaba al atributo). */
@media(min-width:761px){
  #bc-hero.pagehero--img{min-height:0 !important;padding:100.8px 0 !important;display:block !important}
  #bc-hero.pagehero--img>.wrap{padding-top:48px !important;padding-bottom:0 !important;position:relative !important}
  #bc-hero.pagehero--img .crumb{position:absolute !important;top:12px !important;left:50% !important;
    transform:translateX(-50%) !important;margin:0 !important;white-space:nowrap !important}
  #bc-hero.pagehero--img h1{margin-top:0 !important;margin-bottom:0 !important}
  #bc-hero.pagehero--img .hbtns{margin-top:83px !important;gap:calc(2.656vw - 5px) !important}
}
@media(min-width:1680px){
  #bc-hero.pagehero--img{padding:140px 0 !important}
}


/* ---- 24-sep-2026 · Titulo del hero de caso: corta como el del cliente -------
   Yun (24-sep, sobre AZZ): "el texto ponlo como esta en la pagina original".
   Revierte el text-wrap:balance del 15-sep (decision de la misma Yun): el
   cliente llena la primera linea ("...Establish and Grow its / Industrial
   Coating Technologies Business"). Aplica a los 80 casos; los que quedaban con
   una palabra sola en la segunda linea vuelven a quedar asi, como en su sitio. */
#bc-hero.pagehero--img h1{text-wrap:wrap !important}


/* ---- 24-sep-2026 · Franja de la cita (.qdivider): el encuadre de CADA caso --
   Yun (AZZ): "encuadra la imagen de fondo para que quede como en la pagina
   original" (el texto ya estaba bien: no se toca).
   La foto es la misma en todos (su "Diseno sin titulo (38).png", 1920x400 =
   nuestra bc-quote-divider.webp) pero su CSS la encuadra distinto por caso.
   Leido del CSS de sus 72 paginas con franja: 40 center center, 18 right
   bottom, 6 left bottom, 2 left center, 2 center top, 2 right top, y
   Electrolux con su copia "(38)-1" al centro. La regla del 23-sep (0% 50%,
   de Woodcrafters) solo acertaba en los 2 "left center".
   Cada <div class="qdivider"> lleva data-encuadre con el suyo. */
.qdivider[data-encuadre="center-center"]{background-position:50% 50% !important}
.qdivider[data-encuadre="center-top"]{background-position:50% 0% !important}
.qdivider[data-encuadre="left-bottom"]{background-position:0% 100% !important}
.qdivider[data-encuadre="left-center"]{background-position:0% 50% !important}
.qdivider[data-encuadre="right-bottom"]{background-position:100% 100% !important}
.qdivider[data-encuadre="right-top"]{background-position:100% 0% !important}


/* ---- 24-sep-2026 · Private Equity: la raya bajo "Extensive PE Network" -------
   Medido en su /clients/private-equity-family-office a 1512 y 1920: el titulo
   ya era igual (36/39.6, 700, #333); le faltaba su raya: un ::after navy de
   80x6, absoluto abajo a la izquierda del h2, que lleva 16 de relleno abajo.
   La imagen de logos abre 36 bajo la caja del titulo (la nuestra 22). */
.section-h2:has(+ .pe-net){position:relative !important;padding-bottom:16px !important;margin-bottom:36px !important}
.section-h2:has(+ .pe-net)::after{content:"" !important;position:absolute !important;left:0 !important;bottom:0 !important;
  width:80px !important;height:6px !important;background:var(--navy) !important}


/* ---- 24-sep-2026 · .top-grid (Services y Clients, EN+ES): el reparto del cliente
   Sus dos columnas son span6 (678 a 1512) con 2.58% en medio y 20 de relleno
   hacia el centro en cada una: el contenido mide 658 y la 2a arranca en 794.
   El nuestro: 1fr 1fr con 60 de hueco (666 y 786). Medido a 1280, 1512 y 1920
   en Sell-Side, Family-Owned, Public y Private Equity: el mismo en las cuatro.
   Hueco = 2.58% + 40 (los dos rellenos de 20). Abajo de 900 sigue en 1 columna. */
@media(min-width:901px){
  .top-grid{column-gap:calc(2.58% + 40px) !important}
}


/* ---- 24-sep-2026 · Private Equity: titulos de la columna izquierda ----------
   La regla de §15 (body:has(.pe-net) ... .section-h2 36px) subia a 36 TODOS los
   h2 de la columna. Medido en su sitio a 1512:
     EN  "Services to private equity..."  36   ·  "FAQs from our clients"  24
     ES  "Servicios que ofrecemos..."     24   ·  "Preguntas frecuentes..." 24
   Asi que el 36 queda solo en el de servicios EN (el pegado a la lista). */
@media(min-width:768px){
  body:has(.pe-net) .top-grid>div:first-child .section-h2:not(:has(+.plain-list)){font-size:24px !important;line-height:26.4px !important}
  html:has(link[rel="canonical"][href$="/es/clientes/fondos-de-inversion"]) .top-grid>div:first-child .section-h2{font-size:24px !important;line-height:26.4px !important}
}


/* ---- 24-sep-2026 · Respuestas de FAQ: el espaciado del cliente ---------------
   Ahora que las respuestas van partidas en sus parrafos (PE), se nota el aire.
   Medido con la 1a respuesta abierta de /clients/private-equity-family-office
   a 1512: texto 16/27.2 (el nuestro 25.6), 12 entre parrafos (22), el texto
   arranca 119 bajo el borde de la tarjeta (114) y cierra 33 antes del fondo
   (23). Mismo acordeon en todas sus FAQ: regla general. */
.faq-item p{line-height:27.2px !important;margin:0 0 12px !important}
.faq-item summary + p{margin-top:5px !important}
.faq-item p:last-child{margin-bottom:33px !important}


/* ---- 24-sep-2026 · Textos navy como en el sitio del cliente -----------------
   Yun: "todo lo que sea Navy en la pagina original debe ser color Navy tambien
   en nuestra pagina". Comparado el color computado de cada texto (emparejado por
   su contenido) en las 12 paginas de Services y Clients, EN y ES, a 1512:
   - Los titulos de la lista de servicios y de "FAQs from Our Clients" son navy
     en SU sitio segun la pagina (no en todas: Sell-Side EN no tiene ninguno;
     Public EN solo el de FAQs; en PE EN solo la 2a mitad del de servicios).
     Se marcan en el HTML con .t-navy, uno por uno donde el suyo es navy.
   - Al reves: los nombres de las tarjetas de casos (Beijer Ref, Hertz,
     Grupo Chen...) iban en navy y en su sitio son #333, en todas. */
.section-h2.t-navy,.section-h2 .t-navy{color:var(--navy) !important}
.case-card2 .cbody h3{color:#333 !important}
/* Listas dentro de las respuestas (Family: "Financial / Non-Financial Factors").
   Medido abierto en su /clients/family-owned-and-private-companies a 1512:
   vinetas 16/27.2 sin margen entre ellas, 16 antes y despues de la lista, y
   la vineta sangrada 40 respecto al texto de los parrafos (el nuestro:
   25.6, 10 entre vinetas, sangria 20). */
.faq-item .faq-list-inner{padding-left:72px !important;margin:16px 0 16px !important}
.faq-item .faq-list-inner li{line-height:27.2px !important;margin-bottom:0 !important}
/* 24-sep: el bloque "Approach" de arriba (§ Public and Multinational) se extendio
   a Private Equity EN+ES ("Seamless Collaboration, Unparalleled Expertise"):
   medido en su pagina, mismo rotulo, lead, columnas, fotos y desfase. */


/* ---- 24-sep-2026 · Tarjetas de proceso (atmc-list-04): el cuadro navy y el
   relleno del cliente ----------------------------------------------------------
   Medido en su /clients/private-equity-family-office a 1512: la caja navy va
   8 bajo el borde de la tarjeta (la nuestra 16), el texto arranca en 12 (21)
   y la tarjeta lleva 8 16 8 32 de relleno con texto 16/27.2 (la nuestra
   18 16 18 32 con 25.6: 197 de alto contra sus 179). Mismo acordeon de
   tarjetas en Services y Clients: regla general de .process-step. */
.process-step{padding:8px 16px 8px 32px !important;line-height:27.2px !important}
.process-step h3,.process-step p{line-height:27.2px !important}
.process-num{top:8px !important}
/* Sus dos columnas: 678 con 2.58% en medio (la tarjeta, 16 adentro, mide 662).
   La nuestra iba con 32 de hueco: 664 de tarjeta, y el texto partia distinto. */
@media(min-width:641px){.process-list{column-gap:2.58% !important}}
/* Entre tarjetas: 16 (el suyo), no 20. */
.process-step{margin-bottom:16px !important}


/* ---- 24-sep-2026 · Paginas de industria: bloque de entrada como el cliente ---
   Yun (Aerospace & Defense): "unifica toda esta seccion: el texto, el tamano de
   las cajitas, el boton azul". Medido en su /experience/industries/
   aerospace-and-defense a 1512 con las animaciones terminadas:
   - Dos columnas de contenido 658 (2.58% + 40, el mismo reparto de .top-grid).
     Parrafos 19.2/28.8 (los nuestros 18). Su h2 de la derecha arranca a la
     altura del h1; el primer parrafo 36 bajo el h1 (el nuestro 28).
   - "Areas of Expertise": DOS listas de 321 con 16 entre ellas y 16 de
     sangria; tarjeta 305 de ancho, 43 de alto en una linea, relleno 8 16 8 32,
     16 entre tarjetas, texto 16/27.2 peso 400 gris, radio 4 y la sombra de
     atmc-list-04. Icono: caja navy 32x32 radio 4, 16 por fuera a la izquierda
     y 8 abajo, chevron blanco 9x15. Primera columna = la mitad (hacia arriba).
     La lista abre 52 bajo el h2.
   - Boton: 16/16 peso 700, relleno 12 64 12 16, borde 2 navy, radio 4; icono
     arrow-circle-down de Font Awesome 24x24 blanco dentro de una caja de 48
     pegada a la derecha con filete blanco de 2 a la izquierda. */
@media(min-width:901px){
  .chx-grid:has(.chips){grid-template-columns:1fr 1fr !important;column-gap:calc(2.58% + 40px) !important;margin-top:14px !important}
  .chx-grid:has(.chips)>div:last-child{margin-top:-89px !important}
}
/* Acotado a .chx-grid:has(.chips): el mismo .chx-grid lo usan Contact Us y Careers
   y la primera version (v=230) les subio los parrafos a 19.2 y la columna derecha. */
.chx-grid:has(.chips)>div:first-child p{font-size:19.2px !important;line-height:28.8px !important}
.chx-grid:has(.chips)>div>h2{margin-bottom:0 !important}
.chx-grid .chips{display:block !important;columns:2 !important;column-gap:16px !important;padding:52px 0 0 !important;margin:0 !important}
.chx-grid .chips li{break-inside:avoid !important;margin:0 0 16px 16px !important;padding:8px 16px 8px 32px !important;
  font-size:16px !important;line-height:27.2px !important;font-weight:400 !important;color:var(--esp-gris) !important;
  background:#fff !important;border:0 !important;border-radius:4px !important;box-shadow:0 20px 20px rgba(0,0,0,.15) !important}
.chx-grid .chips li::before{content:"" !important;left:-16px !important;top:8px !important;bottom:auto !important;width:32px !important;height:32px !important;
  border-radius:4px !important;font-size:0 !important;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") center/9px 15px no-repeat !important}
@media(max-width:640px){.chx-grid .chips{columns:auto !important;column-count:auto !important}.chx-grid .chips li{break-after:auto !important}}
.dl-btn{display:inline-block !important;position:relative !important;font-size:16px !important;line-height:16px !important;font-weight:700 !important;
  padding:12px 64px 12px 16px !important;border:2px solid var(--navy) !important;border-radius:4px !important}
.dl-btn .dl-ic{position:absolute !important;right:0 !important;top:0 !important;bottom:0 !important;width:48px !important;height:auto !important;
  border-radius:0 !important;border-left:2px solid #fff !important;font-size:0 !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z'/%3E%3C/svg%3E") center/24px 24px no-repeat !important}
.chx-grid .chips:has(>li:nth-child(2):last-child)>li:nth-child(1){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(3):last-child)>li:nth-child(2){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(4):last-child)>li:nth-child(2){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(5):last-child)>li:nth-child(3){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(6):last-child)>li:nth-child(3){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(7):last-child)>li:nth-child(4){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(8):last-child)>li:nth-child(4){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(9):last-child)>li:nth-child(5){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(10):last-child)>li:nth-child(5){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(11):last-child)>li:nth-child(6){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(12):last-child)>li:nth-child(6){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(13):last-child)>li:nth-child(7){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(14):last-child)>li:nth-child(7){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(15):last-child)>li:nth-child(8){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(16):last-child)>li:nth-child(8){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(17):last-child)>li:nth-child(9){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(18):last-child)>li:nth-child(9){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(19):last-child)>li:nth-child(10){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(20):last-child)>li:nth-child(10){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(21):last-child)>li:nth-child(11){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(22):last-child)>li:nth-child(11){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(23):last-child)>li:nth-child(12){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(24):last-child)>li:nth-child(12){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(25):last-child)>li:nth-child(13){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(26):last-child)>li:nth-child(13){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(27):last-child)>li:nth-child(14){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(28):last-child)>li:nth-child(14){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(29):last-child)>li:nth-child(15){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(30):last-child)>li:nth-child(15){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(31):last-child)>li:nth-child(16){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(32):last-child)>li:nth-child(16){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(33):last-child)>li:nth-child(17){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(34):last-child)>li:nth-child(17){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(35):last-child)>li:nth-child(18){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(36):last-child)>li:nth-child(18){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(37):last-child)>li:nth-child(19){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(38):last-child)>li:nth-child(19){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(39):last-child)>li:nth-child(20){break-after:column !important}
.chx-grid .chips:has(>li:nth-child(40):last-child)>li:nth-child(20){break-after:column !important}


/* ---- 24-sep-2026 · Headers de las paginas de industria: foto y encuadre del cliente
   Yun: "que todos los headers de las paginas a las que entras dando click en los
   cuadritos tengan la misma imagen que la pagina original y el encuadre correcto".
   Leido de su sitio en las 24 industrias (Energy no existe en el suyo: 404):
   la foto va de background cover en una franja de 250 y el encuadre es por
   pagina (21 al centro; Building Products 100% 0%, Construction 50% 0%,
   Fertilizer 0% 0%). Las 24 fotos se regeneraron desde su PNG original sin
   recorte (assets/industry-heroes/<slug>-cliente.webp, archivos nuevos: el de
   Logistics viejo lo comparten 4 paginas) y cada pagina EN+ES lleva su
   --hero-pos en el style. Aerospace y Primary Sector traian otra foto. */
.page-hero.page-hero--espejo[style*="--hero-pos"]::before{background-position:var(--hero-pos) !important}


/* ---- 24-sep-2026 · Contact Us: directores ----------------------------------
   Medido en su /contact-us a 1512 y 1920 (Yun):
   - "Connect with our Managing Directors..." va en UNA linea: su parrafo no
     tiene tope (1400) y va a 19.2; el nuestro .intro-lead topaba en 900 a 18.
   - Entre los iconos de LinkedIn/correo de una fila y las fotos de la
     siguiente hay 64 (el nuestro 20). */
p.intro-lead:has(+ .dir-grid){max-width:none !important;font-size:19.2px !important;line-height:28.8px !important}
.dir-grid{row-gap:64px !important}
/* Contact Us, columna izquierda (medido en su /contact-us a 1512): "CONTACT US"
   12/12 con espaciado 1px; primer parrafo (negrita) 19.2/28.8; "Reach out..."
   16/27.2 y 15 entre los dos. Solo el .chx-grid del formulario. */
.chx-grid:has(#hs-contact-form) .ctc-cap{font-size:12px !important;line-height:12px !important;letter-spacing:1px !important}
.chx-grid:has(#hs-contact-form)>div:first-child p:not(.ctc-cap){font-size:16px !important;line-height:27.2px !important;margin:0 0 12px !important}
.chx-grid:has(#hs-contact-form)>div:first-child p:has(>strong:only-child){font-size:19.2px !important;line-height:28.8px !important;margin-bottom:15px !important}
/* Contact Us, reparto y formulario (medido en su /contact-us a 1280/1440/1512/
   1920): columna de texto 48.7% del contenedor, 11.14% en medio y el formulario
   40.16% (a 1512: 678 / 155 / 559). "Contact Form" 30/33 con 12 abajo; h2 con
   16 abajo. Los campos, etiquetas, reCAPTCHA y Submit se estilizan DENTRO del
   iframe de HubSpot (onFormReady en el HTML de contact-us y es/contacto):
   campos 53 alto, relleno 16 20, #fafafa, borde #dddde4, radio 4; etiqueta
   12/14.4 a 10 del campo; 21 entre campos; nombre/apellido con 16 en medio;
   mensaje 72; reCAPTCHA a 29 del mensaje; Submit 20 abajo, 40 alto, 16/16. */
@media(min-width:901px){
  .chx-grid:has(#hs-contact-form){grid-template-columns:48.717949% 40.16% !important;column-gap:11.122051% !important}
}
.chx-grid:has(#hs-contact-form) .ctc-form-title{margin-bottom:12px !important}
.chx-grid:has(#hs-contact-form)>div>h2{margin-bottom:16px !important}
/* Columna izquierda de Contact: su "CONTACT US" cae 8 bajo el tope de la columna
   (caja de 14) y deja 15 hasta el h2; el h2 sin linea gris debajo. La nota bajo
   el formulario va a 16/27.2 (la nuestra 18/28.8, en dos lineas). */
.chx-grid:has(#hs-contact-form) .ctc-cap{margin:8px 0 15px !important;line-height:14px !important;height:14px}
.chx-grid:has(#hs-contact-form)>div>h2{border-bottom:0 !important}
.chx-grid:has(#hs-contact-form) .ctc-form-note{font-size:16px !important;line-height:27.2px !important}
/* Contact Us, columna de texto: el cliente usa su span6 de HubSpot, 48.717949%
   (682.05 a 1920, 643.06 a 1440). Con 48.7% nos quedaba en 681.80 y el "to" de
   "our team is here to" (682.02) bajaba de linea. El hueco absorbe la diferencia
   para que el formulario no se mueva. (Luis, QA 25-sep)
   "Direct Contact with Our Directors" / "Contacta a Nuestros Directores": el
   cliente no tiene linea gris ni relleno debajo; 16 hasta el parrafo (medido a
   1440 y 1920). Solo en Contact: es la unica .wrap con el formulario. */
main>.wrap:has(#hs-contact-form)>h2{border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:16px !important}

/* ---- Our Team: sombreado de la tarjeta y aire entre filas (Yun, 25-sep) -----
   Medido en su /about-us/our-team a 1440 y 1920, con hover real sobre la tarjeta:
   - Sombreado: su bloque de texto lleva linear-gradient(180deg, blanco 0 ->
     rgb(32,56,100) 100%), navy SOLIDO abajo. El nuestro era rgba(15,25,45) de .86
     a 0 (mas oscuro y mas transparente), por eso se veia tenue.
   - Alto de la franja: 214.8 los dos anchos (el nuestro 198.6). Sus iconos van en
     un inline-flex con mt 16 y 32 de alto (iconos 16 + 8/8), y como es inline
     SUMA con los 9 del cargo (25). Nuestro .icons es block: su mt 14 se fundia con
     los 9 del cargo. Con mt 25 y 32 de alto: iconos centrados a 167 como los suyos.
   - Entre filas: 24 (23.5/24.5 por el medio pixel de su alto) a 1440 y 1920; el
     nuestro 14. Solo escritorio: en celular el suyo es 14 (medido 20-ago).
   Sus tarjetas sin hover traen un ::after navy al .3, pero en pantalla no se
   distingue del gris (medido en la captura): no se copia.
   Solo Our Team EN y ES (unicas paginas con .team-row). */
.team-row .member .info{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgb(32,56,100) 100%) !important}
.team-row .member .icons{margin-top:25px !important;height:32px;align-items:center}
@media(min-width:901px){
  .team-row:not(:last-child){margin-bottom:24px !important}
}

/* ---- Contact Us: aire entre el formulario y "Direct Contact with Our Directors"
   (Yun, 25-sep). Medido en su /contact-us de la nota bajo el formulario al h2:
   el bloque de contacto cierra con su padding (100.8, o 140 desde 1680) y la
   seccion de directores abre con 30 + 10 de margen del h2.
     hasta 767: 91.7 · 768-991: 110 · 992-1679: 140.8 · desde 1680: 180
   (medido a 390, 767, 768, 800, 900, 901, 960, 991, 992, 1023, 1024, 1280,
   1440, 1512, 1660, 1679, 1680, 1700 y 1920). El nuestro era 72 fijo (44 en
   celular). El margen del h2 se funde con los 4 del .chx-grid, asi que el
   hueco es el margen. Solo Contact EN y ES. */
main>.wrap:has(#hs-contact-form)>h2{margin-top:91.7px !important}
@media(min-width:768px){main>.wrap:has(#hs-contact-form)>h2{margin-top:110px !important}}
@media(min-width:992px){main>.wrap:has(#hs-contact-form)>h2{margin-top:140.8px !important}}
@media(min-width:1680px){main>.wrap:has(#hs-contact-form)>h2{margin-top:180px !important}}


/* ==========================================================================
   25-sep-2026 · PASADA MÓVIL (Saulo). Todo va dentro de max-width:767px: el
   escritorio ni lo lee. Medido contra sealeassociates.com emulando 390px
   (estilo computado, animaciones terminadas).
   🪤 Especificidad: aquí compiten reglas con !important de 3-5 clases (hubs,
   casos, estados del autohide). Cada selector lleva :not(#m):not(#m), que
   suma el peso de 2 ids sin cambiar a quién selecciona, y así gana a todas.
   ========================================================================== */
@media (max-width:767px){

/* ---- M1. Header: barra BLANCA siempre, como el suyo en celular -------------
   Cliente: 390x75, fondo #fff, logo navy 133x18 en x=20, y tres celdas a la
   derecha con líneas #dfdbd2: idioma 71 (bandera 30, sin caret) · lupa 76
   (#85868c, borde a los dos lados) · hamburguesa 77 (3 rayas 28x1.5 cada 10px,
   #85868c; abierta = X). El nuestro iba transparente sobre la foto en los hubs,
   casos e insights, con logo y rayas blancas. */
header.top:not(#m):not(#m),header.site:not(#m):not(#m){
  background:#fff !important;box-shadow:none !important;border-bottom:1px solid #fff !important}
header:not(#m):not(#m) .logo-white{display:none !important}
header:not(#m):not(#m) .logo-navy{display:block !important}
header:not(#m):not(#m) .brand-logo{content:url('/assets/img_037.png') !important}
header.top:not(#m):not(#m) .wrap:has(>nav.mainnav){height:75px !important;min-height:75px !important;padding:0 0 0 20px !important;flex-wrap:nowrap !important}
header:not(#m):not(#m) .nav{padding-right:0 !important}
header:not(#m):not(#m) .langsel{height:75px !important;width:71px !important;padding:0 !important;justify-content:center !important;
  border-left:1px solid #dfdbd2 !important;border-right:0 !important;box-sizing:border-box}
header:not(#m):not(#m) .langsel{display:flex !important;align-items:center !important}
header:not(#m):not(#m) .langsel .lang-btn{padding:0 !important;margin:0 auto !important;width:auto !important;min-width:0 !important;height:auto !important}
header:not(#m):not(#m) .langsel .car{display:none !important}
header:not(#m):not(#m) .langsel .lang-btn .flag{width:30px !important;height:30px !important;flex-basis:30px !important}
header:not(#m):not(#m) .ss-open{height:75px !important;width:76px !important;padding:0 !important;margin:0 !important;justify-content:center !important;
  display:flex !important;align-items:center !important;color:#85868c !important;
  border-left:1px solid #dfdbd2 !important;border-right:1px solid #dfdbd2 !important;box-sizing:border-box}
header:not(#m):not(#m) .ss-open svg{width:19px !important;height:19px !important;stroke-width:3.2}
/* Hamburguesa, variante nav.mainnav (.navtog con un svg de 3 rayas) */
header:not(#m):not(#m) .navtog{position:relative;display:block !important;width:77px !important;height:75px !important;flex:0 0 77px !important;
  padding:0 !important;margin:0 !important;color:#85868c !important;border:0 !important;background:none !important}
header:not(#m):not(#m) .navtog svg{display:none !important}
header:not(#m):not(#m) .navtog::before{content:'';position:absolute;left:24px;top:36.75px;width:28px;height:1.5px;background:#85868c;
  box-shadow:0 -10px 0 #85868c,0 10px 0 #85868c;transition:transform .2s}
header.nav-open:not(#m):not(#m) .navtog::before{box-shadow:none;transform:rotate(45deg)}
header.nav-open:not(#m):not(#m) .navtog::after{content:'';position:absolute;left:24px;top:36.75px;width:28px;height:1.5px;background:#85868c;transform:rotate(-45deg)}
/* Hamburguesa, variante .nav>ul (.burger con 3 span) */
header:not(#m):not(#m) .nav-right{gap:0 !important;height:75px !important;margin-left:auto}
header:not(#m):not(#m) .nav-right .burger{width:77px !important;height:75px !important;flex:0 0 77px !important;padding:0 !important;
  flex-direction:column !important;gap:8.5px !important;border-left:0 !important}
header:not(#m):not(#m) .burger span{width:28px !important;height:1.5px !important;background:#85868c !important;transition:transform .2s,opacity .2s}
header.menu-open:not(#m):not(#m) .burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
header.menu-open:not(#m):not(#m) .burger span:nth-child(2){opacity:0}
header.menu-open:not(#m):not(#m) .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ---- M2. Menú abierto: barra NAVY encima del contenido ---------------------
   Cliente: panel a todo lo ancho bajo el header, fondo #203864; cada renglón
   42 de alto (texto 14/14 blanco, padding 14) con línea punteada
   rgba(255,255,255,.35) arriba; a la derecha una celda de 55 con "+" (10x1) y
   borde punteado .2; la sección actual en negrita. Submenú: mismos renglones
   con fondo rgba(255,255,255,.08). El nuestro abría blanco a pantalla casi
   completa (variante .nav>ul) o TRANSPARENTE sobre la foto (nav.mainnav). */
header.top.nav-open:not(#m):not(#m) nav.mainnav,
header.menu-open:not(#m):not(#m) .nav>ul{
  display:flex !important;flex-direction:column !important;position:absolute !important;top:75px !important;left:0 !important;right:0 !important;
  width:100% !important;margin:0 !important;padding:0 !important;gap:0 !important;background:#203864 !important;box-shadow:none !important;
  transform:none !important;max-height:calc(100vh - 75px);overflow-y:auto;z-index:5}
header:not(#m):not(#m) nav.mainnav>.mn-item,header:not(#m):not(#m) nav.mainnav>a,
header:not(#m):not(#m) .nav>ul>li{display:block !important;position:relative;width:100%;margin:0 !important;border-top:1px dotted rgba(255,255,255,.35) !important}
header:not(#m):not(#m) nav.mainnav .mn-btn,header:not(#m):not(#m) nav.mainnav>a,
header:not(#m):not(#m) .nav>ul>li>a,header:not(#m):not(#m) .nav>ul>li>.hn-btn{
  display:block !important;width:100% !important;height:42px !important;box-sizing:border-box;padding:14px !important;margin:0 !important;
  font-size:14px !important;line-height:14px !important;font-weight:400 !important;letter-spacing:0 !important;text-transform:uppercase !important;
  text-align:left !important;color:#fff !important;background:transparent !important;border:0 !important;border-radius:0 !important}
header:not(#m):not(#m) nav.mainnav>a.hn-on,header:not(#m):not(#m) nav.mainnav .mn-item.hn-on>.mn-btn,
header:not(#m):not(#m) .nav>ul>li.hn-on>.hn-btn,header:not(#m):not(#m) .nav>ul>li>a.hn-on,
header:not(#m):not(#m) nav.mainnav [aria-current="page"],header:not(#m):not(#m) .nav>ul [aria-current="page"]{font-weight:700 !important}
header:not(#m):not(#m) nav.mainnav .mn-btn::after,header:not(#m):not(#m) .nav>ul>li>.hn-btn::after{
  content:'';position:absolute;top:0;right:0;width:55px;height:42px;border-left:1px dotted rgba(255,255,255,.2);box-sizing:border-box;
  background:linear-gradient(#fff,#fff) center/10px 1px no-repeat,linear-gradient(#fff,#fff) center/1px 10px no-repeat;
  transform:none !important;opacity:1 !important;display:block !important}
header:not(#m):not(#m) nav.mainnav .mn-item.open>.mn-btn::after,header:not(#m):not(#m) .nav>ul>li.open>.hn-btn::after{
  background:linear-gradient(#fff,#fff) center/10px 1px no-repeat}
header:not(#m):not(#m) nav.mainnav .mn-sub,header:not(#m):not(#m) .nav>ul .hn-sub{display:none !important}
header:not(#m):not(#m) nav.mainnav .mn-item.open>.mn-sub,header:not(#m):not(#m) .nav>ul>li.open>.hn-sub{
  display:block !important;position:static !important;transform:none !important;opacity:1 !important;visibility:visible !important;
  min-width:0 !important;width:100% !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
header:not(#m):not(#m) nav.mainnav .mn-sub a,header:not(#m):not(#m) .nav>ul .hn-sub a{
  display:block !important;height:42px;box-sizing:border-box;padding:14px !important;margin:0 !important;font-size:14px !important;line-height:14px !important;
  font-weight:400 !important;color:#fff !important;background:rgba(255,255,255,.08) !important;border:0 !important;
  border-top:1px dotted rgba(255,255,255,.35) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- M2b. Home · hero y Key Highlights -----------------------------------
   Cliente (desde arriba de la página): h1 en 131, párrafo 18/30.6 de 300 de
   ancho (el nuestro 350: cortaba distinto y quedaba 60px más bajo), Key
   Highlights 82 debajo del párrafo, cifras a 31, 14 entre cifra y rótulo, 65
   entre los dos bloques y 178 de foto libre abajo (hero 1104 contra 784). */
section.hero:not(#m):not(#m){height:auto !important;min-height:0 !important;padding-bottom:178px !important}
section.hero:not(#m):not(#m) .hero-grid{row-gap:0 !important;gap:0 !important}
section.hero:not(#m):not(#m) .hero-left h1{max-width:300px;margin-top:11px !important}
section.hero:not(#m):not(#m) .hero-left p{max-width:300px !important}
section.hero:not(#m):not(#m) .hero-right{margin-top:82px !important;padding:0 !important;row-gap:0 !important;gap:0 !important;display:block !important}
section.hero:not(#m):not(#m) .hero-right .kh{margin:0 0 31px !important}
section.hero:not(#m):not(#m) .kh-stat .n{font-size:20px !important;line-height:22px !important;margin:0 0 14px !important}
section.hero:not(#m):not(#m) .kh-stat .l{font-size:16px !important;line-height:18.4px !important;margin:0 !important}
section.hero:not(#m):not(#m) .kh-stat+.kh-stat{margin-top:65px !important}
section.hero:not(#m):not(#m) .kh-stat+.kh-stat .l{font-size:18px !important;line-height:20.7px !important}
/* Our Services: su h2 va 111 debajo del hero y su lead a 16.8/25.2 (el nuestro 19.2/28.8) */
#services:not(#m):not(#m){padding-top:111px !important}
#services:not(#m):not(#m) .lead-left,#services:not(#m):not(#m) .lead{font-size:16.8px !important;line-height:25.2px !important}

/* ---- M2c. Home · tarjetas de Our Services y Our Clients ---------------------
   Cliente (las 6): foto al alto de su archivo (299/286/311 y 308/292/314),
   cuerpo con relleno 42, título 18/19.8 a 42 de la foto, texto 14/23.8 a 10
   del título, botón 110x39 (14px, relleno 10.5/14) a 10 del texto, y 41 entre
   tarjetas. Las nuestras: fotos 269/257, título 20, texto 16/27.2, botón
   125x44, relleno 30 en servicios. El gris del texto se queda en #68696f (AA). */
:is(#services,#clients):not(#m):not(#m) .cards3{gap:41px !important;row-gap:41px !important}
#services:not(#m):not(#m) .photo-card .cphoto{height:auto !important;aspect-ratio:auto !important}
#services:not(#m):not(#m) .photo-card .cphoto img{width:100% !important;object-fit:cover !important}
#services:not(#m):not(#m) .cards3>.card:nth-child(1) .cphoto img{height:299px !important}
#services:not(#m):not(#m) .cards3>.card:nth-child(2) .cphoto img{height:286px !important}
#services:not(#m):not(#m) .cards3>.card:nth-child(3) .cphoto img{height:311px !important}
#clients:not(#m):not(#m) .cards3>.card:nth-child(1) .card-foto{height:308px !important}
#clients:not(#m):not(#m) .cards3>.card:nth-child(2) .card-foto{height:292px !important}
#clients:not(#m):not(#m) .cards3>.card:nth-child(3) .card-foto{height:314px !important}
#clients:not(#m):not(#m) .cards3 .card-foto{object-fit:cover !important;aspect-ratio:auto !important;margin-bottom:42px !important}
#services:not(#m):not(#m) .photo-card .cbody{padding:42px !important}
:is(#services,#clients):not(#m):not(#m) .cards3 .card h3{font-size:18px !important;line-height:19.8px !important;margin:0 0 10px !important}
:is(#services,#clients):not(#m):not(#m) .cards3 .card p{font-size:14px !important;line-height:23.8px !important;margin:0 0 10px !important}
:is(#services,#clients):not(#m):not(#m) .cards3 .card .more{font-size:14px !important;line-height:14px !important;padding:10.5px 14px !important;margin-top:0 !important}

/* ---- M3. Home · Contact Us: UN director a la vez, con flechas -------------
   Cliente: foto 280x203 centrada; nombre 22/24.2 #333 a 18 de la foto; cargo
   y ciudad 14/23.8 gris; iconos 35x35 navy con sombra 0 20 20 .15, 14 entre
   ellos; flechas 45x45 navy (sombra 0 4 8 .2) en x=21 y x=324, centradas a
   la altura del nombre. Nosotros apilábamos a los 6 (3,495px contra 658).
   Las flechas y el marco los pone #carrusel-movil-js (solo home EN/ES), y
   solo si la página carga en celular: en escritorio el DOM no cambia. */
.team-grid:not(#m):not(#m){display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:0 !important;row-gap:0 !important;
  grid-template-columns:none !important;scrollbar-width:none;margin:0 !important;padding:0 0 34px !important}
.team-grid::-webkit-scrollbar{display:none}
.team-grid:not(#m):not(#m)>.member{flex:0 0 100% !important;width:100% !important;max-width:none !important;scroll-snap-align:start;margin:0 !important}
.team-grid:not(#m):not(#m) .photo{width:280px !important;height:203px !important;aspect-ratio:auto !important;margin:0 auto !important;overflow:hidden}
.team-grid:not(#m):not(#m) .photo img{width:100% !important;height:100% !important;object-fit:cover !important}
.team-grid:not(#m):not(#m) .info{padding:18px 0 0 !important}
.team-grid:not(#m):not(#m) .info h3{font-size:22px !important;line-height:24.2px !important;margin:0 0 10px !important}
.team-grid:not(#m):not(#m) .info .role,.team-grid:not(#m):not(#m) .info .loc{font-size:14px !important;line-height:23.8px !important;margin:0 !important;color:#68696f !important}
.team-grid:not(#m):not(#m) .info .links{gap:14px !important;margin-top:17px !important}
.team-grid:not(#m):not(#m) .info .links a{width:35px !important;height:35px !important;box-shadow:0 20px 20px rgba(0,0,0,.15) !important}
.team-grid:not(#m):not(#m) .info .links a svg{width:15px !important;height:15px !important}
section:has(.team-grid):not(#m):not(#m) .lead{text-align:justify !important;color:#68696f !important}
.cm-marco{position:relative;margin-top:47px}
.cm-flecha{position:absolute;top:235px;z-index:2;width:45px;height:45px;border-radius:50%;border:0;padding:0 0 3px;cursor:pointer;
  background:#203864;color:#fff;font:400 30px/1 Roboto,sans-serif;box-shadow:0 4px 8px rgba(0,0,0,.2)}
.cm-flecha.cm-prev{left:1px}
.cm-flecha.cm-next{right:1px}

/* ---- M4. Home · Our Presence: UNA oficina a la vez, con puntitos ----------
   Cliente: texto 16.8/25.2 blanco, foto 350x350 a ~70 del texto y 5 puntos
   de 8 abajo. El nuestro apilaba las 5 fotos (2,328px contra 855). El título
   y el lead venían a 32 y 19.2 (reglas de escritorio con #presence, que ganan
   a la regla móvil general): aquí van a 22 y 16.8 como el suyo. */
section:has(.offices):not(#m):not(#m){padding:120px 0 44px !important}
section:has(.offices):not(#m):not(#m) .section-title{font-size:22px !important;line-height:24.2px !important}
section:has(.offices):not(#m):not(#m) .lead{font-size:16.8px !important;line-height:25.2px !important}
.offices:not(#m):not(#m){display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:0 !important;grid-template-columns:none !important;
  scrollbar-width:none;margin-top:64px !important}
.offices::-webkit-scrollbar{display:none}
.offices:not(#m):not(#m)>.office{flex:0 0 100% !important;width:100% !important;scroll-snap-align:start;aspect-ratio:1/1 !important;margin:0 !important}
.cm-puntos{display:flex;justify-content:center;gap:12px;margin-top:34px}
.cm-puntos button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer}
.cm-puntos button.on{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}

/* ---- M6. Carrusel de tombstones (home, servicios, clientes, perfiles,
   industrias): UNA tombstone de 260x500 centrada, las vecinas asomando por
   los lados, SIN flechas (QA S3.2, S3.4, C10.1). El nuestro metía 2 de 162x312
   con las flechas encima. Su carril recorta a UNA tarjeta: el nuestro mide
   exactamente una tombstone y va centrado; el autoplay y tcarGlide avanzan
   por scrollLeft (ancho + gap), así que cada paso cae en una tarjeta entera. */
.tcar:has(.tomb):not(#m):not(#m) .tcar-track{gap:21px !important;width:260px !important;max-width:260px !important;margin:0 auto !important;
  padding:0 !important;scroll-snap-type:x mandatory !important;justify-content:flex-start !important}
.tcar:not(#m):not(#m) .tcar-track>.tomb{flex:0 0 260px !important;width:260px !important;max-width:260px !important;scroll-snap-align:center !important}
.tcar:has(.tomb):not(#m):not(#m) .tcar-btn{display:none !important}
.tcar:not(#m):not(#m) .tcar-track .tomb .ttags .tag-i,.tcar:not(#m):not(#m) .tcar-track .tomb .ttags a{line-height:9.8px !important}
/* Home: su bloque de transacciones va en una columna de 250 centrada (x=70),
   subtítulo 16.8/25.2 y botón 177x39 a 14px. */
#transactions:not(#m):not(#m) .wrap>:not(.tcar){margin-left:50px !important;margin-right:50px !important;max-width:250px}
#transactions:not(#m):not(#m) .lead{font-size:16.8px !important;line-height:25.2px !important}
#transactions:not(#m):not(#m) .btn-outline{font-size:14px !important;line-height:14px !important}

/* ---- M7. Servicios y clientes · "Representative Case Studies" --------------
   Cliente: la columna entra 20 más (x=40, 330 de ancho, título incluido);
   foto 330x165; caja blanca de 297 (relleno 28) montada a 123 de la foto;
   título 18/19.8 y texto 14/23.8, los dos con 10.5 abajo; botón 104x39
   (14px, relleno 10.5/14); 21 entre tarjetas. Nosotros: 350 de ancho, título
   24, texto 16/27.2, botón 120x51 (QA S2.10-S2.12, C8.8). */
:is(h2:has(+.case-grid-2),.case-grid-2):not(#m):not(#m){margin-left:20px !important;margin-right:0 !important}
.case-grid-2:not(#m):not(#m){gap:21px !important;row-gap:21px !important}
.case-grid-2:not(#m):not(#m) .cimg{aspect-ratio:2/1 !important;height:auto !important}
.case-grid-2:not(#m):not(#m) .cimg img{width:100% !important;height:100% !important;object-fit:cover !important}
.case-grid-2:not(#m):not(#m) .cbody{width:90% !important;padding:28px !important;margin-top:-42px !important}
.case-grid-2:not(#m):not(#m) .cbody h3{font-size:18px !important;line-height:19.8px !important;margin:0 0 10.5px !important}
.case-grid-2:not(#m):not(#m) .cbody p{font-size:14px !important;line-height:23.8px !important;margin:0 0 10.5px !important}
.case-grid-2:not(#m):not(#m) .cs-btn{font-size:14px !important;line-height:14px !important;padding:10.5px 14px !important;margin-top:0 !important}

/* ---- M8. Lista de pasos (.process-list: "Process Overview", "Key Steps") ----
   Cliente (atmc-list-04 en celular): tarjeta en x=34, relleno 7/14/7/28,
   radio 4, 14 entre tarjetas, texto 14/23.8 (título en negrita del mismo
   tamaño); caja del chevron 28x28 radio 4. El nuestro iba a 16/27.2, relleno
   8/16/8/32, cajas de 32 (la lista medía 2,618 contra ~1,970). */
.process-list:not(#m):not(#m) .process-step{margin:0 0 14px 14px !important;padding:7px 14px 7px 28px !important;border-radius:4px !important}
.process-list:not(#m):not(#m) .process-step :is(h3,h4,p,li,div,span:not(.process-num)){font-size:14px !important;line-height:23.8px !important}
.process-list:not(#m):not(#m) .process-num{width:28px !important;height:28px !important;border-radius:4px !important}

/* ---- M9. "Benefits of working with…" (.benefit-grid) ----------------------
   Cliente (atmc-list-03): texto y título 14/23.8, sangría 21, 14 entre
   renglones, lista a 14 del título. El nuestro 16/26.88, sangría 24, 18 y 30. */
.benefit-grid:not(#m):not(#m){padding-top:14px !important}
.benefit-grid:not(#m):not(#m) .benefit-card{padding-left:21px !important;margin-bottom:14px !important}
.benefit-grid:not(#m):not(#m) .benefit-card :is(h3,h4,p,span,div,li){font-size:14px !important;line-height:23.8px !important}

/* ---- M10. Servicios y clientes · cabecera, intro y FAQs ------------------
   Cabecera: su foto termina en y=224 bajo el header blanco; la nuestra en 300
   (la regla vieja de 300 asumía header transparente flotando encima).
   Columna de texto: la suya mide 330 (la nuestra 350); intro 18/27 con 32
   entre párrafos, a 34 del h1; viñetas 18/30.6 en 290.
   FAQs (QA S2.13): caja de 330, relleno 21, pregunta y respuesta 14/23.8,
   23 entre cajas. La nuestra 350, relleno 32, 16/26.88. */
.page-hero.page-hero--espejo:not(.page-hero--hub):not(#m):not(#m){min-height:224px !important;height:224px !important}
.top-grid:not(#m):not(#m)>div:first-child{max-width:330px}
.top-grid:not(#m):not(#m) .pt-h1{margin-bottom:30px !important}
.top-grid:not(#m):not(#m) .intro-lead{font-size:18px !important;line-height:27px !important;margin:0 0 32px !important}
.faq-item:not(#m):not(#m){margin-right:20px !important;margin-bottom:23px !important}
.faq-item:not(#m):not(#m) summary{padding:21px !important;font-size:14px !important;line-height:23.8px !important}
.faq-item:not(#m):not(#m) p,.faq-item:not(#m):not(#m) .faq-list-inner li{font-size:14px !important;line-height:23.8px !important}
.faq-item:not(#m):not(#m) p{padding:0 21px !important}
.faq-item:not(#m):not(#m) .faq-list-inner{padding-left:41px !important;padding-right:21px !important}

/* ---- M11. Footer ------------------------------------------------------------
   Las columnas de enlaces SE QUEDAN (defensa H9.1: estructura y enlaces). En
   celular se acomodan en 2x2 para no apilar 4 columnas (980px contra 433).
   Lo de abajo sí va como el suyo: logo grande centrado, LinkedIn en círculo
   blanco centrado, línea a todo lo ancho, copyright y Privacy/Terms centrados. */
footer.site:not(#m):not(#m) .foot-top{grid-template-columns:1fr 1fr !important;gap:26px 20px !important}
footer.site:not(#m):not(#m) .foot-top>div:first-child{grid-column:1/-1;text-align:center}
footer.site:not(#m):not(#m) .foot-top>div:first-child img{width:290px !important;margin:10px auto 14px !important;display:block}
footer.site:not(#m):not(#m) .foot-top>div:first-child p{margin:0 auto !important;text-align:center}
footer.site:not(#m):not(#m) .foot-bottom{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:6px !important;text-align:center !important;padding-top:0 !important}
footer.site:not(#m):not(#m) .foot-bottom .social{order:0 !important;display:flex;justify-content:center;margin:8px 0 22px}
footer.site:not(#m):not(#m) .foot-bottom .social a{width:35px !important;height:35px !important;background:#fff !important;color:var(--navy) !important;border-radius:50% !important;box-shadow:0 20px 20px rgba(0,0,0,.15)}
footer.site:not(#m):not(#m) .foot-bottom .copy{order:1 !important;display:block;margin:0 -20px;padding:22px 20px 0;border-top:1px solid rgba(255,255,255,.2);font-weight:700;color:#fff !important}
footer.site:not(#m):not(#m) .foot-bottom>span:not(.copy):not(.social){order:2 !important;flex-basis:auto !important;text-align:center !important}

/* ---- M12. Our Team · tarjetas (EN+ES) -----------------------------------
   Cliente en celular: foto A COLOR (el blanco y negro con color al pasar el
   mouse es cosa de escritorio; en el teléfono no hay mouse) con velo navy
   .3 encima, radio 3.5; texto con relleno 56/28/28; nombre 20 bold; cargo
   10.5/10.5 con 1px de espaciado; iconos sueltos de ~13px, sin círculo,
   a 26 entre sí. El nuestro: gris, nombre 24/40.8, cargo 12, círculos 27. */
.member:has(.nm):not(#m):not(#m){border-radius:3.5px !important;overflow:hidden !important}
.member:has(.nm):not(#m):not(#m) .photo img{filter:none !important}
.member:has(.nm):not(#m):not(#m) .photo::after{content:'';position:absolute;inset:0;background:rgba(32,56,100,.3);pointer-events:none}
.member:has(.nm):not(#m):not(#m) .info{padding:56px 28px 28px !important;z-index:2}
.member:has(.nm):not(#m):not(#m) .info .nm{font-size:20px !important;line-height:22px !important;margin:0 0 8px !important;display:block}
.member:has(.nm):not(#m):not(#m) .info .r{font-size:10.5px !important;line-height:10.5px !important;letter-spacing:1px !important}
.member:has(.nm):not(#m):not(#m) .info .icons{margin-top:21px !important;gap:12px !important;height:auto !important}
.member:has(.nm):not(#m):not(#m) .info .icons a{width:14px !important;height:14px !important;border:0 !important;border-radius:0 !important;background:none !important;padding:0 !important}
.member:has(.nm):not(#m):not(#m) .info .icons a svg{width:14px !important;height:14px !important}

/* ---- M13. Insights (EN+ES) · hero con el formulario ----------------------
   Cliente: h1 en y=160 (el nuestro 225), tarjeta con relleno 42, título
   20/22 #333 CENTRADO, franja navy abajo pegada al botón. Los campos y el
   botón viven dentro del iframe de HubSpot: los ajusta #hs-movil. */
body:has([data-hub="insights"]) .page-hero--hub:has(.ins-hero-card):not(#m):not(#m){padding-top:110px !important;padding-bottom:60px !important}
body:has([data-hub="insights"]):not(#m):not(#m) .ins-hero-grid{gap:30px !important}
body:has([data-hub="insights"]):not(#m):not(#m) .ins-hero-card{padding:42px !important}
body:has([data-hub="insights"]):not(#m):not(#m) .ins-hero-card h3{font-size:20px !important;line-height:22px !important;color:#333 !important;text-align:center !important;margin-bottom:14px !important}
body:has([data-hub="insights"]):not(#m):not(#m) .ins-hero-card-footer{margin:28px -42px -42px !important}

/* ---- M14. Casos de negocio (80) ----------------------------------------------
   Medido en Woodcrafters contra su página a 390 (QA C3.2, C3.6, C3.11, C4.2,
   C4.3, C4.5, C4.7, S6.1, S10.1):
   · hero: título 24/26.4 en 310 de ancho (el nuestro 28/52.8 en 230 → 4
     renglones), botones apilados y centrados a 73 del título, 21 entre ellos,
     14px y 39 de alto; el hero termina en y=408 (el nuestro 653).
   · tombstone 260x500 a 50 del hero (la nuestra 220x423).
   · datos: columna de 330 en x=40; etiqueta 20/22 con raya NAVY de 3px (la
     suya; la nuestra #333 de 2px), 14 a su valor 16.8/25.2, 35 entre datos.
   · prosa 16.8/25.2 justificada.
   · franja de cita: texto 22/24.2 (el nuestro 22/39.6) con 42 arriba.
   · testimonio: relleno 42, texto 14/23.8, nombre 14, cargo 10.5.
   · fotos 168x223, la segunda 30 más abajo (las nuestras 163x411). */
body:has(#bc-hero):not(#m):not(#m) #bc-hero{min-height:0 !important;height:auto !important;padding:105px 0 41px !important}
body:has(#bc-hero):not(#m):not(#m) #bc-hero .wrap{padding:0 40px !important}
body:has(#bc-hero):not(#m):not(#m) #bc-hero .crumb{margin:0 0 11px !important}
body:has(#bc-hero):not(#m):not(#m) #bc-hero h1{font-size:24px !important;line-height:26.4px !important;max-width:310px !important;margin:0 auto !important}
body:has(#bc-hero):not(#m):not(#m) #bc-hero .hbtns{margin-top:73px !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:21px !important}
body:has(#bc-hero):not(#m):not(#m) #bc-hero .hbtn{font-size:14px !important;line-height:14px !important;padding:10.5px 14px !important;margin:0 !important}
body:has(#bc-hero):not(#m):not(#m) .case-grid{padding-top:0 !important;margin-top:0 !important}
body:has(#bc-hero):not(#m):not(#m) .case-tomb{margin-top:50px !important;display:flex !important;justify-content:center !important;max-width:none !important;width:auto !important}
body:has(#bc-hero):not(#m):not(#m) .case-tomb img{width:260px !important;max-width:260px !important;height:auto !important}
body:has(#bc-hero):not(#m):not(#m) .case-body{margin-left:20px !important}
body:has(#bc-hero):not(#m):not(#m) .facts .fact{margin:0 0 35px !important}
body:has(#bc-hero):not(#m):not(#m) .facts dt{font-size:20px !important;line-height:22px !important;font-weight:700 !important;margin:0 0 14px !important;
  text-decoration-color:#203864 !important;text-decoration-thickness:3px !important}
body:has(#bc-hero):not(#m):not(#m) .facts dd{font-size:16.8px !important;line-height:25.2px !important;margin:0 !important}
body:has(#bc-hero):not(#m):not(#m) .facts{margin-bottom:0 !important;padding-bottom:0 !important;gap:0 !important;row-gap:0 !important}
body:has(#bc-hero):not(#m):not(#m) .case-body>h2{margin-top:14px !important}
body:has(#bc-hero):not(#m):not(#m) .case-body>h2:first-of-type{padding-top:23px !important}
body:has(#bc-hero):not(#m):not(#m) .case-body .prose p{font-size:16.8px !important;line-height:25.2px !important;text-align:justify !important;margin:0 0 10.5px !important}
body:has(#bc-hero):not(#m):not(#m) .qdivider p{line-height:24.2px !important;margin:42px 0 10.5px !important}
body:has(#bc-hero):not(#m):not(#m) .testimonial{padding:42px !important}
body:has(#bc-hero):not(#m):not(#m) .testimonial p{font-size:14px !important;line-height:23.8px !important;margin:0 0 21px !important}
body:has(#bc-hero):not(#m):not(#m) .testimonial footer strong{font-size:14px !important;line-height:23.8px !important}
body:has(#bc-hero):not(#m):not(#m) .testimonial .t-rol{font-size:10.5px !important;line-height:23.8px !important;margin:0 !important}
body:has(#bc-hero):not(#m):not(#m) .tphotos{gap:14px !important;justify-content:space-between !important}
body:has(#bc-hero):not(#m):not(#m) .tphotos img{width:168px !important;height:223px !important;object-fit:cover !important;flex:0 0 168px !important}

/* ---- M15. Clientes · "Our Approach" (Family, Public, PE; EN+ES) ------------
   Cliente: rótulo 10.5/10.5 pegado al título; primer párrafo 16.8/25.2 bold
   (el nuestro 19.2/28.8); cuerpo 14/23.8 con 11 entre párrafos (el nuestro
   16/27.2 con 18); fotos 168x223 a la MISMA altura, 14 entre ellas (las
   nuestras 164x262 escalonadas 44). QA C11.1, C18.1, C18.2. */
body.tpl-clientes:not(#m):not(#m) .eyebrow-sec{font-size:10.5px !important;line-height:10.5px !important;letter-spacing:1px !important;font-weight:400 !important;margin:0 0 4px !important}
body.tpl-clientes:not(#m):not(#m) .section-h2~.intro-lead.approach-lead{font-size:16.8px !important;line-height:25.2px !important;margin:0 0 20px !important}
body.tpl-clientes:not(#m):not(#m) .section-h2~.intro-lead:not(.approach-lead){font-size:14px !important;line-height:23.8px !important;margin:0 0 11px !important}
body.tpl-clientes:not(#m):not(#m) .approach-photos{display:flex !important;gap:14px !important;justify-content:space-between !important;margin-top:30px !important;height:auto !important}
body.tpl-clientes:not(#m):not(#m) .approach-photos img{position:static !important;width:168px !important;height:223px !important;flex:0 0 168px !important;object-fit:cover !important;margin:0 !important;transform:none !important}

/* ---- M16. Contact Us (EN+ES) -------------------------------------------------
   Cliente: subtítulo 16.8/25.2 (el nuestro 19.2/28.8), texto y nota del
   formulario 14/23.8 (los nuestros 16/27.2), intro de directores
   justificada, y los directores en CARRUSEL de uno con flechas, igual que el
   home (los nuestros apilados: 6 tarjetas). Las flechas las pone
   #carrusel-movil-js. El h1 "Contact Seale & Associates" espera decisión de
   Luis (K2.1/K2.2): no se toca. */
main>.wrap:has(#hs-contact-form):not(#m):not(#m) h2+p:not(.intro-lead){font-size:16.8px !important;line-height:25.2px !important}
main>.wrap:has(#hs-contact-form):not(#m):not(#m) h2+p+p:not(.intro-lead),
main>.wrap:has(#hs-contact-form):not(#m):not(#m) .ctc-form-note{font-size:14px !important;line-height:23.8px !important}
main>.wrap:has(#hs-contact-form):not(#m):not(#m) .intro-lead{text-align:justify !important}
.dir-grid:not(#m):not(#m){display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:0 !important;row-gap:0 !important;
  grid-template-columns:none !important;scrollbar-width:none;margin:0 !important;padding:0 0 34px !important}
.dir-grid::-webkit-scrollbar{display:none}
.dir-grid:not(#m):not(#m)>.dir-card{flex:0 0 100% !important;width:100% !important;max-width:none !important;scroll-snap-align:start;margin:0 !important;padding:0 !important}
.dir-grid:not(#m):not(#m) .adv-ph{width:280px !important;height:203px !important;aspect-ratio:auto !important;margin:0 auto !important;object-fit:cover !important;border:0 !important}
.dir-grid:not(#m):not(#m) .dir-n{font-size:22px !important;line-height:24.2px !important;margin:18px 0 10px !important;text-align:center}
.dir-grid:not(#m):not(#m) .dir-r{font-size:14px !important;line-height:23.8px !important;text-align:center}
.dir-grid:not(#m):not(#m) .dir-links{gap:14px !important;margin-top:17px !important}
.dir-grid:not(#m):not(#m) .dir-ico{width:35px !important;height:35px !important}

/* ---- M17. Perfiles de directores (EN+ES) -------------------------------------
   Cliente: "Contact Information" 20/22 (QA A10.1; el nuestro 30/33); nombre
   24/26.4 y cargo 22/24.2 (los nuestros 30/52.8 y 22/39.6); bio 16.8/25.2
   (la nuestra 19.2/28.8); nombre, cargo y bio con sangría de 30 (x=50, 320
   de ancho). "Selected transactions" (nuestro, SEO) se queda, con renglones
   14/23.8; su primer grupo lo cierra #byind-movil-js solo en celular. */
body:has(.profhead):not(#m):not(#m) .pcontact h2{font-size:20px !important;line-height:22px !important}
body:has(.profhead):not(#m):not(#m) .ph-right{padding:0 0 0 30px !important}
body:has(.profhead):not(#m):not(#m) .ph-right h1{font-size:24px !important;line-height:26.4px !important;margin:0 0 15px !important}
body:has(.profhead):not(#m):not(#m) .ph-right .role{font-size:22px !important;line-height:24.2px !important;margin:0 0 35px !important}
body:has(.profhead):not(#m):not(#m) .ph-right .bio p{font-size:16.8px !important;line-height:25.2px !important;margin:0 0 13px !important}
body:has(.profhead):not(#m):not(#m) .byind li{font-size:14px !important;line-height:23.8px !important}

/* ---- M18. Página de transacción (410) ----------------------------------------
   Cliente: título y texto en columna de 310 (x=40); texto 15.4/26.18
   justificado (el nuestro 16.8/25.2 en 350); tombstone con el logo a 230x360
   (el nuestro 208x326) y etiquetas de 8.5 con borde de 2 gris, como las del
   carrusel; recuadro "Project Leaders" con borde navy de 2 y radio 8, título
   14, nombre y LinkedIn a 14 con el icono cuadrado. Las pastillas de
   industria arriba se quedan (enlaces de industria: defensa acordada). */
.tx-2col:not(#m):not(#m) .tx-right{padding:0 20px !important}
.tx-2col:not(#m):not(#m) .tx-right article :is(p,li){font-size:15.4px !important;line-height:26.18px !important;text-align:justify !important}
.tx-2col:not(#m):not(#m) .tx-tomb img{left:5.77% !important;right:5.77% !important;top:10.2% !important;bottom:17.8% !important;max-width:88.46% !important;max-height:72% !important}
.tx-2col:not(#m):not(#m) .ttags--hero{bottom:6% !important;gap:4px !important;padding:0 18px !important}
.tx-2col:not(#m):not(#m) .ttags--hero .tag-i{font-size:8.5px !important;line-height:9.8px !important;font-weight:700 !important;letter-spacing:.5px !important;
  padding:4px 6px !important;border:2px solid #68696f !important;border-radius:20px !important;color:#68696f !important;background:transparent !important}
.tx-2col:not(#m):not(#m) .leaders-card{box-shadow:none !important;border:2px solid #203864 !important;border-radius:8px !important;padding:24px 20px 20px !important}
.tx-2col:not(#m):not(#m) .leaders-card .leaders{font-size:14px !important;line-height:16px !important;margin:0 0 24px !important}
.tx-2col:not(#m):not(#m) .leader-card .ld-name,.tx-2col:not(#m):not(#m) .leader-card .ld-li{font-size:14px !important}
.tx-2col:not(#m):not(#m) .leader-card .ld-li svg{border-radius:0 !important;width:14px !important;height:14px !important;padding:2px !important}

/* ---- M19. Hub de casos (EN+ES) -------------------------------------------------
   Cliente: su foto termina en y=224 (aquí el header va en el flujo, así que
   la banda mide 149); título e intro a la IZQUIERDA, intro 14/23.8 (QA E2.1
   para los hubs); tarjetas: foto 350x175, caja blanca de 315 montada 43 sobre
   la foto, relleno 28, título 18/19.8, texto 14/23.8, botón 14px. Las
   nuestras: foto 237, título 24, botón 163x51. */
body:has([data-hub="casos"]):not(#m):not(#m) .page-hero.page-hero--espejo{min-height:149px !important;height:149px !important}
body:has([data-hub="casos"]):not(#m):not(#m) :is(.pt,.pt-h1){text-align:left !important}
body:has([data-hub="casos"]):not(#m):not(#m) main>.wrap>.lead{text-align:left !important;font-size:14px !important;line-height:23.8px !important}
.case-grid-3:not(#m):not(#m){gap:21px !important;row-gap:21px !important}
.case-grid-3:not(#m):not(#m) .cimg{aspect-ratio:2/1 !important;height:auto !important}
.case-grid-3:not(#m):not(#m) .cimg img{width:100% !important;height:100% !important;object-fit:cover !important}
.case-grid-3:not(#m):not(#m) .cbody{width:90% !important;padding:28px !important;margin:-43px 0 0 0 !important}
.case-grid-3:not(#m):not(#m) .cbody h3{font-size:18px !important;line-height:19.8px !important;margin:0 0 10.5px !important}
.case-grid-3:not(#m):not(#m) .cbody p{font-size:14px !important;line-height:23.8px !important;margin:0 0 10.5px !important}
.case-grid-3:not(#m):not(#m) .cs-btn{font-size:14px !important;line-height:14px !important;padding:10.5px 14px !important;margin-top:0 !important}

/* ---- M20. Hub de transacciones: tombstones ----------------------------------
   Su estructura (grupos por industria, buscador) es nuestra y se queda. Solo
   lo visual: la tombstone en x=50 como la suya (la nuestra en x=20) y el
   título debajo (.tname, se queda por decisión de Luis 16-sep) a 14/23.8. */
body:has(.tombgrid):not(#m):not(#m) .tombgrid .tomb{margin-left:30px !important}
body:has(.tombgrid):not(#m):not(#m) .tombgrid .tname{font-size:14px !important;line-height:23.8px !important}

/* ---- M21. Our Culture (EN+ES) · QA A15.1, A16.4, A16.5, A17.1 ------------
   Cliente: intro 16.8/25.2 (la nuestra 19.2/28.8); "Our Values" a 29 del
   intro (el nuestro a 79) y a 24 (el nuestro 48; aquí 22 porque el gate de
   jerarquía exige h1 > h2); tarjetas: foto 350x234 (la nuestra 265),
   relleno 42, título 18/19.8, texto 14/23.8. */
body:has(.values-section):not(#m):not(#m) .intro-lead{font-size:16.8px !important;line-height:25.2px !important}
.values-section:not(#m):not(#m){padding-top:10px !important}
.values-section:not(#m):not(#m) .section-h2{font-size:22px !important;line-height:24.2px !important;margin:0 0 15px !important}
.value-card:not(#m):not(#m) .vimg{aspect-ratio:350/234 !important}
.value-card:not(#m):not(#m) .vbody{padding:42px !important;gap:10px !important}
.value-card:not(#m):not(#m) h3{font-size:18px !important;line-height:19.8px !important}
.value-card:not(#m):not(#m) p{font-size:14px !important;line-height:23.8px !important}

/* ---- M5. Home · Newsletter -------------------------------------------------
   Cliente: su foto (BannerOficinas) SIN velo, relleno 41 arriba y abajo;
   rótulo 10.5/10.5 a 28 del título; raya navy 42x5.5 que cuelga FUERA del
   título (su texto arranca en x=20, igual que el rótulo); subtítulo 16.8/25.2;
   "specialized industry reports" 14/23.8 y botón 191x39 a 14px. El nuestro
   llevaba un velo blanco .96/.92 (la foto casi no se veía), el título y el
   rótulo corridos 36 y 60px a la derecha y el bloque 177px más alto.
   La raya va de left:-20 y 13 de ancho: es exactamente la parte que se ve de
   la suya (x 0-13); la suya sigue fuera de pantalla y aquí no hace falta. */
.section.news:not(#m):not(#m){background:url('/assets/newsletter-banner.webp') center/cover no-repeat !important;padding:41px 0 !important}
#newsletter:not(#m):not(#m) p.news-cap{font-size:10.5px !important;line-height:10.5px !important;margin:0 0 17px !important;padding-left:0 !important}
#newsletter:not(#m):not(#m) .news-title{font-size:22px !important;line-height:24.2px !important;padding-left:0 !important}
#newsletter:not(#m):not(#m) .news-title::before{left:-20px;top:11px;width:13px;height:5.5px}
#newsletter:not(#m):not(#m) .news-sub{font-size:16.8px !important;line-height:25.2px !important;margin:14px 0 36px !important}
#newsletter:not(#m):not(#m) .news-industry p{font-size:14px !important;line-height:23.8px !important;margin:0 0 28px !important}
#newsletter:not(#m):not(#m) .news-industry .btn-light{font-size:14px !important;line-height:14px !important;padding:10.5px 16px !important}

}
/* Fuera del media query a propósito: las piezas del carrusel móvil solo
   existen si la página cargó en celular, pero si alguien gira la tableta o
   agranda la ventana, en ancho de escritorio no se ven. */
@media (min-width:768px){.cm-flecha,.cm-puntos{display:none !important}}