/* ============================================================
   AYC — SERVICIOS COMPARTIDO (capa NATIVA, centralizada).
   Componentes ESTÁNDAR de las 3 páginas de servicio
   (Advisors 78 · Accountants 69 · Ayuda Center 29): HERO,
   CARRUSEL, PROCESO, POR QUÉ (círculo shape-outside), FOOTER.
   Solo cambian fotos/textos → eso vive en native/<slug>.css.

   Scope: clase DOBLADA .ayc-native.ayc-native … (gana a Elementor
   .e-con.e-flex SIN !important). Tokens var(--ayc-*/--fs-*) del Kit
   (ayc-base.css). Tipografía Futura (ayc-native.css / style.css).
   Targetea las clases/data-ids REALES del DOM legacy de Advisors
   (advisors-dom.md): .ayc-svc-*, .ayc-card-*, .ayc-checklist-grid,
   .ayc-check-item/.ayc-check-icon, .ayc-carousel-dot, adv-proc-grid,
   adv-p1..6, adv-why-sec, ftr_*.

   Handle: ayc-native-servicios-shared · dep: ayc-native-bridge ·
   prioridad 10050. Encadena native/<slug>.css DESPUÉS.
   ============================================================ */

/* ============================================================
   1) HERO — banda full-width, overlay navy, divider verde,
      H1 / sub / botón / disclaimer Myriad.  (foto + textos = por-página)
   Real DOM Advisors: sección [data-id="adv-hero-sec"];
   divider widget-divider, H1/H2 widget-heading, botón widget-button
   (.ayc-d-btn), disclaimer widget-text-editor (advhc46abe).
   ============================================================ */
/* La sección hero ES la propia .ayc-native top-level (clase doblada SIN
   espacio antes de [data-id]); las versiones con espacio NO casaban porque
   no hay ancestro .ayc-native (las secciones son hermanas, no anidadas). */
.ayc-native.ayc-native[data-id$="-hero-sec"] {
  position: relative;
  min-height: 476px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 95px; /* reserva: el disclaimer queda POR ENCIMA del solape (-14px) de la tarjeta intro */
  overflow: hidden;
}
/* Overlay navy de marca (legibilidad del texto abajo-izq).
   Elementor pinta este ::before desde background_overlay_color del
   _elementor_data y le mete opacity:0.5 (alpha efectivo ~0.32, foto
   demasiado clara). Lo vencemos: opacity:1 + el alpha real va en los
   stops del gradiente IZQ-más-oscuro (texto a la izq lee navy profundo,
   la derecha con las personas queda algo más clara), como el PDF. */
.ayc-native.ayc-native[data-id$="-hero-sec"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;   /* vence el opacity:0.5 inline de Elementor */
  /* FILTRO AZUL DE MARCA — CANÓNICO (2026-06-23, pedido cliente "todos los hero
     con filtro azul"). Antes: navy casi-negro con el CENTRO TRANSPARENTE (la mitad
     del hero quedaba sin filtro → en fotos claras como Advisors/Ayuda la imagen se
     veía cruda). Ahora: azul de marca arriba → navy abajo cubriendo TODA la altura
     (mismo gradiente que Contacto, el de referencia). El bottom 0.66 mantiene el
     contraste del DISCLAIMER full-width. Cubre adv/acc/ayuda y cualquier *-hero-sec
     sin override. */
  background: linear-gradient(180deg,
      rgba(0,73,116,0.50) 0%,
      rgba(30,39,81,0.70) 100%) !important;
}
/* Contenido por encima del overlay */
.ayc-native.ayc-native[data-id$="-hero-sec"] > .e-con-inner {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  text-align: left;
}

/* Divider verde 6px × 90px */
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--ayc-green);
  border-top-width: 6px;
  width: 90px;
  margin: 0 0 18px;
}

/* H1 hero blanco Futura Bold. El PDF mide ~50px live-equiv (cap-height
   ~75px diseño / 0.72 × 0.4857), bastante menor que --fs-hero (64px que
   es para los grandes titulares de hero del Home). Lo fijamos a 50px. */
.ayc-native.ayc-native[data-id$="-hero-sec"] h1.elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-page-hero);
  line-height: 1.12;
  color: var(--ayc-white);
  margin: 0 0 10px;
}
/* Subtítulo/DESCRIPCIÓN del hero (h2) blanco = NIVEL 2 de la escala.
   Tamaño = token --fs-hero-desc (RONDA 3 jun-2026 = 40px: re-medido por bbox en los
   3 PDFs = 38.5px CSS @1440, idéntico en Advisors/Accountants/Ayuda; el 24/32 previos
   confundían cap-height con font-size y se veían diminutos junto al H1=56). > body 21,
   < H1 56. PESO: los 3 PDFs lo muestran BOLD (Futura Bold, trazos pesados) → negrilla
   700. lh ceñido 1.2. */
.ayc-native.ayc-native[data-id$="-hero-sec"] h2.elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-hero-desc);   /* NIVEL 2 (40px) — descripción del hero, > body, < H1 */
  line-height: 1.2;
  color: var(--ayc-white);
  margin: 0 0 22px;
}

/* Botón del hero — ESTILO CANÓNICO/GLOBAL del sitio (home-reference.md §2):
   RECTANGULAR border-radius:6px (NO pill), verde #9dc41a, texto blanco Futura
   Bold 21px, padding ~15px 40px. El cliente NO quiere estilos de botón por
   página: todos los CTA usan el botón base del Kit/Home. Quitamos el pill
   (50px), la fuente inflada (28px→21px) y el min-width:530px forzado → el botón
   se dimensiona por su label como en el Home (hero "Agendar consulta" = 267×51).
   font-size explícito sólo para vencer la tipografía del Kit que lo bajaba a 15px. */
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-button {
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-button);                     /* canónico del sitio (Home CTA = 21px) */
  font-weight: 700;
  line-height: 1.3;
  border-radius: 6px;                  /* canónico: rect esquinas suaves, NO pill */
  padding: 15px 40px;                  /* canónico CTA grande del Home */
  text-align: center;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
}
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-button:hover {
  background: var(--ayc-green-dark);
}

/* Disclaimer legal del hero — Myriad Pro (NO Futura), gris claro, ⚠.
   El _elementor_data trae un <p style="font-size:9px;color:rgba(...)"> inline
   (ilegible). Forzamos un tamaño legible (~14px) con !important para ganar al
   inline; vale para los 3 heroes de servicio (advhc46abe/acchc46abe/...). */
.ayc-native.ayc-native [data-id$="hc46abe"] p,
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-widget-text-editor p {
  font-family: var(--ayc-font-body) !important;
  font-weight: 400;
  font-size: var(--fs-legal) !important;
  line-height: 1.5 !important;
  color: #d9dee8 !important;
  max-width: none;            /* ancho completo de la banda → cabe en 1 línea */
  text-align: center;         /* PDF línea 50: disclaimer CENTRADO (una sola línea) */
  white-space: nowrap;        /* fuerza 1 sola línea a 14px (la frase cabe) */
  margin: 18px 0 0;
  /* La frase nowrap (~1289px @14px) es MÁS ANCHA que la columna de contenido
     (1200px). En Accountants el widget escapa a ancho completo (1425px) y centra
     simétrico; en Advisors el widget vive DENTRO de la caja boxed (1200px) y la
     frase desbordaría asimétrica hacia la derecha. Para CENTRAR SIMÉTRICO en
     AMBAS estructuras sin tocar el DOM: convertimos el <p> en una caja del ancho
     de su contenido y la centramos sobre el eje de su contenedor (left:50% +
     translateX(-50%)). Así el disclaimer queda centrado respecto al hero en las
     3 páginas, no pegado a ningún borde. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}
/* Glifo ⚠ monocromo que TIÑE con el color del disclaimer (gris claro), como
   el PDF y el footer — sustituye el emoji core a color de WordPress.
   \26A0\FE0E = presentación de TEXTO (no emoji), pintado en currentColor. */
.ayc-native.ayc-native [data-id$="hc46abe"] p img.emoji,
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-widget-text-editor p img.emoji {
  display: none !important;
}
.ayc-native.ayc-native [data-id$="hc46abe"] p::before,
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-widget-text-editor p::before {
  content: "\26A0\FE0E ";
  font-family: var(--ayc-font-body);
  color: #fff !important;      /* cliente: ⚠ SIEMPRE blanco puro */
  margin-right: 4px;
}
/* El widget de texto ocupa el ancho completo del inner para poder centrar. */
.ayc-native.ayc-native [data-id$="hc46abe"],
.ayc-native.ayc-native[data-id$="-hero-sec"] .elementor-widget-text-editor {
  width: 100%;
  align-self: stretch;        /* el contenido del inner es flex-start → estira */
}

/* ============================================================
   1.5) BANDA INTRO — tarjeta gris flotante que solapa el hero.
   COMPARTIDA por las 3 páginas de servicio. Real DOM: sección
   [data-id$="-intro-sec"] (e-con-full) > tarjeta boxed (e-con-boxed,
   p.ej. advieef5f2 en Advisors) > .e-con-inner > 2-3 text-editor.
   Recetas probadas portadas de native/servicios.css + advisors.css viejo.
   ============================================================ */
/* La sección es transparente y solapa ligeramente el pie del hero
   (-14px → tarjeta flotante sin tapar el disclaimer, bottom hero=disclaimer+aire). */
.ayc-native.ayc-native[data-id$="-intro-sec"] {
  background: transparent;
  padding: 0;
  margin-top: -8px;           /* solape flotante sobre el hero SIN tapar el disclaimer (bottom hero=disclaimer+aire) */
  margin-bottom: 50px;        /* aire hacia la banda navy 'Nuestra esencia' (~53px live = 108 PDFpx × 0.4908) */
  position: relative;
  z-index: 2;
}
/* La TARJETA navy = el contenedor boxed hijo directo de la sección.
   bg #1C2340 (NAVY del PDF §2, exacto rgb 28,35,64), radio 20px, sombra
   neutra y sutil hacia abajo, padding generoso 44/60, insets laterales
   ~114px (margin 114px) → ancho ~1211 centrado como el PDF. Texto blanco
   centrado (reglas de cuerpo abajo). COMPARTIDA por las 3 páginas. */
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed {
  background: #eceeef;   /* TARJETA CLARA gris (PDF Advisors Y Accountants: tarjeta clara + texto oscuro; una ronda la puso navy por error → rompia las 2 paginas. Verificado vs ambos PDFs 2026-06-17) */
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.10);
  padding: 44px 60px;
  max-width: 1212px;            /* CAP + CENTRAR: card ~1212 centrado (como el PDF) en CUALQUIER viewport. Sin esto (margin 114 sin max-width) en viewports anchos el card se ensanchaba demasiado (pedido cliente: el intro salia muy ancho). El navy del hero asoma a los lados. */
  margin-left: auto;
  margin-right: auto;
  width: auto;
  position: relative;
  overflow: hidden;
}
/* La caja boxed flexa en su .e-con-inner; lo dejamos a ancho completo de la
   tarjeta (la tarjeta ya está acotada por sus márgenes) y apilamos en columna
   con separación generosa entre párrafos (~22px) → las frases respiran. */
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed > .e-con-inner {
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Cuerpo de la intro — 22px (escala AYC body), TEXTO BLANCO sobre la caja
   navy (PDF §2: 'Texto centrado, blanco'). MYRIAD PRO (sans humanista del
   body/disclaimer AYC; la 'a' lleva espolón, no geométrica como Futura).
   Interlineado 1.5 (PDF §2 'line-height ~1.5'), peso 400. Centrado como el PDF.
   Sin margin (la separación la da el gap del inner / el p+p). El cierre
   "Aquí encuentras…" va blanco bold 700 (regla :last-child abajo). */
.ayc-native.ayc-native[data-id$="-intro-sec"] .elementor-widget-text-editor p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);   /* 22px */
  font-weight: 400;
  line-height: 1.5;
  color: #5f726f;   /* gris-teal de marca (texto oscuro sobre la tarjeta clara, como el PDF) */
  text-align: center;
  margin: 0;
}
.ayc-native.ayc-native[data-id$="-intro-sec"] .elementor-widget-text-editor span {
  font-size: inherit;
}
/* Aire entre párrafos DENTRO de un mismo widget (los 2 primeros van juntos en
   advide5bc7): el gap del flex solo separa widgets, no <p> hermanos. */
.ayc-native.ayc-native[data-id$="-intro-sec"] .elementor-widget-text-editor p + p {
  margin-top: 22px;
}
/* Frase de cierre (último text-editor de la tarjeta, "Aquí encuentras…")
   ENFATIZADA: blanco + bold 700, como el PDF §2 (caja navy → el énfasis es
   peso, no color). Se distingue del cuerpo sin hardcodear el data-id (las 3). */
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed > .e-con-inner > .elementor-widget-text-editor:last-child p,
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed > .e-con-inner > .elementor-widget-text-editor:last-child p span,
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed > .e-con-inner > .elementor-widget-text-editor:last-child p strong {
  color: var(--ayc-navy, #1e2751);   /* "Aqui encuentras..." en NAVY bold sobre tarjeta clara (PDF) */
  font-weight: 700;
}
/* Línea verde degradada de marca en el borde inferior de la tarjeta.
   DEFAULT VISIBLE (scaleX(1)) → nunca queda oculta aunque el observer falle;
   la animación de revelado solo re-dibuja desde la izquierda. */
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--ayc-green) 20%, var(--ayc-green) 80%, transparent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.2s ease-out;
}
/* Estado inicial de dibujo (solo cuando el reveal lo marca explícitamente).
   La clase ayc-line-animate ya viene en el markup; partimos de 0 y animamos
   a 1 al revelar. Sin la clase de inicio, queda VISIBLE por el default de arriba. */
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed.ayc-d-reveal:not(.is-revealed)::after {
  transform: scaleX(0);
}
.ayc-native.ayc-native[data-id$="-intro-sec"] > .e-con-boxed.is-revealed::after {
  transform: scaleX(1);
}

/* ============================================================
   2) CARRUSEL "Qué hacemos" — CENTER-MODE: card central casi-completa con
      PEEK simétrico de las vecinas + dots verdes.
   Real DOM: .ayc-svc-wrap > .ayc-svc-viewport > .ayc-svc-track
   (transform X) > slides e-con, cada uno con .ayc-service-card.
   Navegación: .ayc-carousel-dots > button.ayc-carousel-dot.
   ============================================================ */
.ayc-native.ayc-native .ayc-svc-wrap { position: relative; width: 100%; }
/* CENTER-MODE (PDF §4.1, CRÍTICO): card central a tamaño casi-completo con PEEK
   SIMÉTRICO de las vecinas (~11% de cada una asoma por los bordes). Mecánica
   tipo Slick centerMode:true + centerPadding, SIN tocar el JS:
     · El VIEWPORT lleva padding lateral = el "centerPadding" (130px a cada lado).
       overflow:hidden recorta en el borde EXTERIOR del viewport, pero el área de
       padding es VISIBLE → ahí asoman las cards vecinas.
     · Los SLIDES siguen flex:0 0 100% → resuelven al ancho de CONTENIDO del
       viewport (1200 − 2×130 = 940px), no a los 1200px completos. Así la card
       activa queda CENTRADA (130px de aire a cada lado) y las vecinas asoman.
     · El step del JS = cards[0].offsetWidth (940) + gap (30) = 970 → sigue
       cuadrando sin cambiar animations.js (lee offsetWidth + columnGap reales).
   Medido live @1440: card activa interior centrada 130/130, peek 100px (≈11%)
   a IZQ y DCHA simultáneo, 0 overflow horizontal. COMPARTIDO por las 3 páginas
   (Advisors/Accountants/Ayuda) — misma estructura .ayc-svc-*. */
.ayc-native.ayc-native .ayc-svc-viewport {
  overflow: hidden;
  width: 100%;
  padding: 0 0 38px;           /* 1-CARD (sin centerPadding → la card llena el viewport, sin peek) + reserva inferior 38px para que el CTA "medio-caballo" no lo recorte el overflow:hidden. COMPARTIDO por las 3 (Advisors=Accountants=Ayuda). */
  box-sizing: border-box;
}
.ayc-native.ayc-native .ayc-svc-track {
  display: flex;
  gap: 30px;                   /* separación entre cards del carrusel (Slick slide gutter) */
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
/* Cada SLIDE = 1 card al ancho de CONTENIDO del viewport (940px @1200) → card
   central casi-completa + peek de las vecinas (center-mode). */
.ayc-native.ayc-native .ayc-svc-track > .e-con {
  flex: 0 0 100%;
  max-width: 100%;
}
/* El slide-inner traía padding-top:40px (hueco muerto por encima de la card,
   dentro del viewport) → la banda quedaba alta y los dots lejos de la card.
   El badge asoma sobre la banda navy INTERNA (no sale por el borde superior de
   la card), así que no necesita ese aire. A 0 → la card pega arriba. */
.ayc-native.ayc-native .ayc-svc-track > .e-con > .e-con-inner {
  max-width: 100%;
  padding-top: 0;
}

/* Card — ALTURAS IGUALES entre slides (pedido cliente): el track flex estira
   cada SLIDE a la altura del más alto; hacemos que la CARD llene el 100% de su
   slide (height:100%) y sea flex-column, de modo que las 4 cards midan IGUAL.
   El body es flex:1 (crece para ocupar el sobrante) y el CTA queda EMPUJADO AL
   FONDO → el botón cae a la MISMA altura/posición en los 4 slides. El badge es
   position:absolute → no afecta al flujo de columna. */
.ayc-native.ayc-native .ayc-service-card {
  position: relative;
  background: var(--ayc-white);
  border-radius: 55px; /* 2026-06-25 PDF AJUSTES P1: esquinas redondeadas IGUAL que la página Servicios (servicios.css=55px). Antes 22 → el cliente las veía poco redondeadas */
  box-shadow: 0 8px 28px rgba(30,39,81,.10);
  overflow: visible;
  height: 100%;                 /* iguala la altura de las 4 cards al slide más alto */
  display: flex;
  flex-direction: column;
}
/* El slide debe propagar la altura del track hasta la card. Cadena real:
   slide(.e-con) → .e-con-inner → wrapper(advsf366a2, display:block) → .ayc-service-card.
   Cada eslabón intermedio debe ser flex-column estirado (flex:1; align-items:stretch)
   para que la card herede los 100% de altura del slide más alto → las 4 cards IGUALES. */
.ayc-native.ayc-native .ayc-svc-track > .ayc-svc-slide,
.ayc-native.ayc-native .ayc-svc-track > .e-con.ayc-svc-slide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;            /* el slide-4 (e-con-full e-flex) traía gap por defecto → 10px de
                        altura perdida vs los slides boxed; lo igualamos a 0 */
  padding: 0;        /* sin padding propio del slide → la card ocupa el alto íntegro */
}
.ayc-native.ayc-native .ayc-svc-slide > .e-con-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Wrapper intermedio entre el inner del slide y la card: la card NO vive en un
   .e-con sino dentro de un WIDGET text-editor (.elementor-widget-text-editor,
   hijo directo del .e-con-inner del slide) → su .elementor-widget-container envuelve
   la .ayc-service-card. Estiramos AMBOS (widget + container) a flex-column para que
   la altura del slide más alto llegue a la card → las 4 cards IGUALES. */
/* El widget que envuelve la card cuelga de .e-con-inner (slides boxed 1-3) O
   directamente del slide (slide 4 = e-con-full sin inner). Cubrimos ambos. */
.ayc-native.ayc-native .ayc-svc-slide > .e-con-inner > .elementor-widget,
.ayc-native.ayc-native .ayc-svc-slide > .elementor-widget {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ayc-native.ayc-native .ayc-svc-slide > .e-con-inner > .elementor-widget > .elementor-widget-container,
.ayc-native.ayc-native .ayc-svc-slide > .elementor-widget > .elementor-widget-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* La card dentro del container también se estira para llenar. */
.ayc-native.ayc-native .ayc-svc-slide .ayc-service-card {
  flex: 1 1 auto;
}
.ayc-native.ayc-native .ayc-svc-slide .ayc-service-card > .e-con-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Cabecera con imagen de fondo (esquinas sup. redondeadas).
   RITMO INTERNO (gap ronda 3): la IMAGEN ABSORBE la holgura de altura de las
   cards iguales (flex:1 1 auto, grow). Antes el body era flex:1 → toda la
   holgura caía como banda gris VACÍA encima del CTA (margin-top:auto), desigual
   por slide (109px en slides cortos, 167px en los aún más cortos). Ahora la
   IMAGEN crece para igualar alturas y el BODY es content-sized → el CTA queda a
   un gap FIJO y CONSISTENTE del contenido (28px) en TODOS los slides, agrupado
   al pie como en el crop del diseño, sin dead-space. La imagen llenando el
   tercio superior es justo lo que muestra el PDF §4.2. min-height conserva el
   piso de 460px. COMPARTIDO (3 páginas). Medido live: gap content→CTA = 28px
   idéntico en slide0/1/3; cards siguen IGUALES de altura. */
.ayc-native.ayc-native .ayc-card-image {
  position: relative;
  border-radius: 55px 55px 0 0;  /* 2026-06-25 P1: top corners 55px = igual que Servicios (servicios.css .ayc-card-image) */
  min-height: 460px;            /* piso de la imagen (pedido cliente: estaba muy baja a 360px) */
  flex: 1 1 auto;               /* la imagen crece para absorber la holgura → cards iguales SIN dead-space en el body */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Banda/panel navy sobre la parte baja de la imagen.
   PDF (verificado §4.2): la banda NO ocupa todo el ancho de la card — arranca en
   el borde IZQUIERDO y llega a ~70% del ancho (el ~30% derecho deja ver la foto,
   p.ej. el pasaporte). Es ~30% MÁS ALTA que antes (cubre desde el badge hasta el
   pie de la imagen). Anclada abajo-izquierda como el diseño.
     · width:70% + left:0 (sin right:0) → ~70% del ancho, pegada a la izquierda.
     · min-height ~292px (224 × 1.3 = +30% de alto) → banda más alta.
     · padding-top generoso reserva el aire sobre el badge/título.
   PDF: banda navy SÓLIDA/saturada tras el título (muestreo ~rgb(15-30,40-55,70-105),
   navy fuerte ~0.85+). Subimos los stops tempranos: base 0.50 ya navy desde arriba,
   0.85 a la altura del título, casi opaco al pie → texto blanco con alto contraste. */
.ayc-native.ayc-native .ayc-card-overlay {
  position: absolute;
  left: 0; bottom: 0;
  /* [2026-08-27 NUEVO-01] El PDF (pág.2) marca con un círculo rojo la esquina
     SUPERIOR DERECHA de esta banda: en el diseño va redondeada, en el live estaba
     a 0. El resto de esquinas siguen rectas (la banda encaja con la card). */
  border-radius: 0 28px 0 0;
  width: 70%;                  /* −30%: la banda NO llega al borde derecho (PDF) */
  min-height: 292px;           /* +30% de alto (antes ~224px) */
  background: linear-gradient(180deg, rgba(30,39,81,.50) 0%, rgba(30,39,81,.80) 45%, rgba(30,39,81,.97) 100%);
  color: var(--ayc-white);
  padding: 90px 32px 26px;     /* +30% de alto via más aire arriba (banda crece hacia arriba) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* título/desc agrupados al pie de la banda (PDF) */
}
/* Título de card = subtítulo de card (STANDARD-COMPONENTS §1.3): token --fs-h2
   = 32px, peso 700, Futura Bold, blanco. NO es el h1 de página (44px=--fs-h1).
   El "~44px render" del PDF era render-px → ~29px CSS (design-accountants.md
   L95), que mapea a --fs-h2=32px. El override puntual a 44px (ronda 1) confundía
   render-px con CSS-px y subía el título al peso de h1. Volvemos al token. lh
   ceñido 1.15 → títulos largos (Incorporación/Acompañamiento) envuelven natural
   a 2 líneas por longitud (hay ancho de sobra), sin <br>. */
.ayc-native.ayc-native .ayc-card-title {
  font-family: var(--ayc-font-head);
  /* CARRUSEL R3 #3 (2026-06-23): título blanco sobre el filtro navy. El token de
     título de card (--fs-h2=26px) leía un pelo grande junto al crop (y envolvía a
     2 líneas en acc/advisors). Bajamos 1 paso a 24px (rango 23-24) → encaja al PDF
     y reduce el wrap. Peso 700 + blanco SIN cambios. Override local; NO se toca
     --fs-h2 (títulos de card de otras secciones). */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ayc-white);
  margin: 0 0 6px;
}
.ayc-native.ayc-native .ayc-card-desc {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ayc-white);
  opacity: .92;
  margin: 0;
}

/* Badge numérico verde — solapa imagen/banda, a la izquierda */
.ayc-native.ayc-native .ayc-card-badge {
  position: absolute;
  left: 24px;
  bottom: calc(100% - 30px); /* asoma por encima de la banda navy */
  z-index: 3;
  width: 56px; height: 56px;       /* STANDARD-COMPONENTS §1.3: badge Ø=56px sólido (sin anillo) */
  border-radius: 50%;
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-h3);         /* 26px — nº blanco peso 700 proporcional al disco 56px */
  font-weight: 700;                /* PDF §4.2: número blanco peso 700 */
  line-height: 56px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
}

/* Cuerpo de la card — panel gris claro (PDF muestrea #efefef, NO blanco puro)
   para distinguir la zona "Incluye:" de la card blanca. Esquinas inferiores
   redondeadas (radio de la card) ya que es el último bloque. */
.ayc-native.ayc-native .ayc-card-body {
  padding: 26px 32px 32px;
  text-align: left;
  background: #efefef;
  border-radius: 0 0 55px 55px; /* 2026-06-25 P1: esquinas inferiores 55px (uniforme con la card, = Servicios) */
  flex: 0 0 auto;           /* body = content-sized; la holgura de altura la absorbe la IMAGEN (arriba) → CTA pegado al contenido, sin banda gris vacía */
  display: flex;
  flex-direction: column;
  overflow: visible;        /* deja que el CTA "medio-caballo" sobresalga bajo el filo de la card */
}
.ayc-native.ayc-native .ayc-includes-title {
  font-family: var(--ayc-font-head);
  /* CARRUSEL R3 #3 (2026-06-23): "Incluye:" / "Enfoque humano" / "Ejemplos de
     casos frecuentes" son mini-títulos DENTRO de la card del carrusel, una escala
     propia más compacta que el subtítulo global (--fs-h3=26px). El PDF (bbox ≈30px
     ÷1.34 ≈ 22px live) los muestra solo modestamente mayores que el body 21px →
     fijamos 21px explícito (tope 22). Peso 700 + navy SIN cambios. Override de
     componente local; NO se toca el token --fs-h3 (lo usan tabs/botones/citas). */
  font-size: 21px;
  font-weight: 700;
  color: var(--ayc-navy);
  margin: 0 0 12px;
}
.ayc-native.ayc-native .ayc-card-body .ayc-includes-title + * { margin-top: 0; }
/* "Ejemplos de casos frecuentes:" (2º includes-title de algunas cards) */
.ayc-native.ayc-native .ayc-checklist-grid + .ayc-includes-title { margin-top: 18px; }

/* Lista en grid — nº de columnas lo decide la página (Advisors = 3) */
.ayc-native.ayc-native .ayc-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* [2026-08-27 AD3] Cliente: "información desorganizada, grandes espacios".
     Causa medida: por defecto las filas del grid se estiran al ítem MÁS ALTO y
     `align-items:stretch` hace que cada celda herede ese alto → celdas de 176px
     con texto de 18px. Medido en Advisors: 2233px de alto desperdiciado en la
     página. `start` + `min-content` hace que cada ítem ocupe solo lo suyo. */
  align-items: start;
  grid-auto-rows: min-content;
}
.ayc-native.ayc-native .ayc-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--ayc-font-body);
  /* Mapeado al TOKEN BASE --fs-body (22px) — el cliente veía 19px (huérfano
     no-token) demasiado pequeño. Los ítems del carrusel son copy de cuerpo →
     equivalentes al body del sitio = una sola medida en las 3 páginas. Verificado
     live que la card de 4 columnas (Nómina, col ~201px en center-mode) envuelve
     dentro de su celda y NO desborda (0 overflow horizontal). */
  font-size: var(--fs-body);   /* 22px — token base */
  line-height: 1.4;
  color: #839795;   /* gris-teal de marca del PDF (rgb 130,147,149), mismo tono que el disclaimer */
}
/* Check verde REAL del diseño (img.ayc-check-icon = adv-check.png) */
.ayc-native.ayc-native .ayc-check-icon {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  object-fit: contain;
}
/* Items de viñeta "• ..." (sin icono) en "Ejemplos de casos frecuentes" */
/* [ÍTEM 2 · 2026-09-04] SANGRÍA FRANCESA (hanging indent).
   Cliente: "Puntos de lista desalineados (ej. la 'H' queda debajo del puntito)...
   Ej: Visas profesionales H-1B, H-1B1 (Chile)".
   CAUSA RAÍZ MEDIDA: en estos 4 ítems el "•" es TEXTO del nodo, no un marcador
   (`<div class="ayc-check-item">• Visas profesionales H-1B...</div>`), a diferencia
   de los otros 65 ítems del sitio que llevan `<img class="ayc-check-icon">` y que,
   por ser flex items hermanos, ya sangran bien (drift medido = 0.00px).
   Al ser texto plano dentro de un contenedor flex de un solo ítem anónimo, la 2ª
   línea arranca en el borde del bloque = EXACTAMENTE bajo el "•".
   Medido en Chrome @1536/768/390: la 2ª línea caía 18.72 / 16.05 / 14.27 px a la
   IZQUIERDA de la 1ª letra. Ese offset es el avance del glifo "• " y resulta ser
   CONSTANTE en tipografía: 0.892em (18.734/21 · 16.063/18 · 14.266/16).
   Por eso el indent va en `em` y no en px: se autoescala con --fs-body en cada
   breakpoint sin necesidad de repetir la regla en media queries.
   `display:block` en lugar del flex heredado porque estos ítems NO tienen hijo
   (`:not(:has(.ayc-check-icon))`) y `text-indent` solo aplica a block containers:
   así no dependemos de que herede al ítem flex anónimo.
   `padding-left: calc(2px + 0.892em)` + `text-indent: -0.892em` deja la 1ª línea
   (el "•") EXACTAMENTE donde estaba (2px, sin desplazamiento visual) y manda la
   2ª línea a la x de la 1ª letra. Se conserva la viñeta (opción del cliente
   "quitarlos" descartada: el "•" es un nodo de texto y CSS no puede eliminarlo
   sin recortar también la letra). */
.ayc-native.ayc-native .ayc-check-item:not(:has(.ayc-check-icon)) {
  display: block;
  padding-left: calc(2px + 0.892em);
  text-indent: -0.892em;
}

/* Texto de cierre de la card */
.ayc-native.ayc-native .ayc-card-footer-text {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-navy);   /* parity #6: el párrafo de cierre va NAVY #1e2751 peso 400 (PDF). Los items del checklist (.ayc-check-item) y mini-títulos NO se tocan: siguen gris/navy-bold por sus propias reglas. */
  margin: 16px 0 0;
}

/* CTA del carrusel al pie (label ÚNICO por slide) — ESTILO CANÓNICO/GLOBAL
   (home-reference.md §2): rect border-radius:6px, verde #9dc41a, texto blanco
   Futura Bold 21px, padding ~14px 34px (= CTA "Ver todos los servicios" del
   Home). El cliente NO quiere estilos de botón por página: unificado al canon
   (antes radius 12px + 26px). font-weight 700 explícito. */
.ayc-native.ayc-native .ayc-card-cta-btn {
  display: inline-block;
  margin: 22px auto 0;
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  /* CARRUSEL R3 #3 (2026-06-23): el CTA por-slide lleva un LABEL LARGO ("Quiero
     organizar la contabilidad de mi empresa", etc.). Al token global de botón
     (--fs-button=26px) el label envolvía a 2 líneas (h=62) en acc/advisors/ayuda;
     el PDF lo muestra en UNA línea, píldora compacta blanca (bbox ÷1.34 ≈ 18-20px).
     Bajamos a 19px → una línea. Peso 700, color #fff, bg verde, radio 6px y padding
     SIN cambios. Override de componente local; NO se toca --fs-button (hero/CTA
     final/reseñas siguen a 26px). */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 6px;              /* canónico: rect, NO pill ni 12px */
  padding: 14px 34px;
  text-decoration: none;
}
.ayc-native.ayc-native .ayc-card-cta-btn:hover { background: var(--ayc-green-dark); }
/* El wrapper del CTA va CENTRADO, a un gap FIJO del contenido (28px) en TODOS
   los slides. ANTES era margin-top:auto → empujaba el CTA al fondo del body
   flex:1 y, como cada slide tiene distinto nº de ítems, dejaba una banda gris
   VACÍA desigual (109–167px) entre el contenido y el CTA (gap ronda 3, top-heavy
   con dead-space). Ahora la holgura de altura la absorbe la IMAGEN (body
   content-sized) → el CTA queda agrupado con el contenido, como el crop del
   diseño, y a la MISMA distancia en cada slide (consistencia del CTA preservada).
   Medido live: gap content→CTA = 28px idéntico en slide0/1/3. */
.ayc-native.ayc-native .ayc-card-body > div:last-child {
  text-align: center;
  margin-top: 28px;
  margin-bottom: -60px;   /* CTA A MEDIO-CABALLO: tira el wrapper arriba 60px (≈ media altura del botón + padding-bottom del body) → el filo inferior de la card cae por el CENTRO del boton (mitad dentro/mitad fuera, PDF). COMPARTIDO por las 3 paginas. */
  position: relative;
  z-index: 4;
}

/* Flechas del carrusel ocultas (navegación por dots) */
.ayc-native.ayc-native .ayc-svc-arrow,
.ayc-native.ayc-native .ayc-svc-arrow-prev,
.ayc-native.ayc-native .ayc-svc-arrow-next { display: none; }

/* Reequilibrar la banda del carrusel: el inner de la sección de servicios
   traía padding-bottom:80px (inline del data) → ~265px de banda muerta bajo
   los dots. Los DOTS viven FUERA del inner (hijos directos de la sección),
   así que el padding-bottom del inner era hueco muerto ENTRE card y dots
   (gap card→dots = 40 + margin-top 36 = 76px > diseño). Lo bajamos a 0 y
   dejamos que el margin-top de los dots (40px) dé el único gap card→dots
   (~40px, dentro del 30-50px del PDF). El aire BAJO los dots lo da su
   margin-bottom. Compartido por las 3 páginas (sufijo -svc-sec). */
.ayc-native.ayc-native[data-id$="-svc-sec"] > .e-con-inner {
  padding-bottom: 0;
}
/* TÍTULO DE SECCIÓN del carrusel ("Nuestros Servicios" / "Qué hacemos en AYC…") =
   NIVEL 3 (var(--fs-section) 34). Es el .elementor-widget-heading de la sección;
   los títulos de CARD son h3.ayc-card-title dentro del HTML .ayc-service-card (no
   son headings) → NO se ven afectados. Sin esta regla el heading caía a 48 (inline
   del kit). Compartido por las 3 páginas. !important vence el inline per-data-id. */
.ayc-native.ayc-native[data-id$="-svc-sec"] .elementor-widget-heading .elementor-heading-title {
  font-size: var(--fs-section) !important;
  /* FAMILIA = TOKEN cabecera (Futura Bold). Sin esta línea el título del carrusel
     caía a var(--ayc-font-body) (Futura Medium) tras quitar el typography_font_family
     foráneo del _elementor_data — y antes renderizaba Montserrat (3ª familia). El
     bridge .elementor-heading-title{font:inherit} (0,3,0) tapaba la regla h2 base
     (0,2,1); esta regla (0,4,1) la vence. Centralizada → las 3 páginas (Advisors/
     Accountants/Ayuda) heredan Futura Bold como todo H2 de sección. */
  font-family: var(--ayc-font-head);
}

/* DOTS verdes — activo relleno, inactivo hueco con borde verde.
   El inner del carrusel ya NO tiene padding-bottom → este margin-top es el
   ÚNICO gap card→dots: 40px (PDF: 30-50px), bloque card+dots compacto.
   margin-bottom 32px da el aire simétrico BAJO los dots (antes 0). */
.ayc-native.ayc-native .ayc-carousel-dots {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 20px;             /* menos espacio card→dots (pedido cliente: había mucho a 40px) */
  margin-bottom: 32px;
}
.ayc-native.ayc-native .ayc-carousel-dot {
  width: 18px; height: 18px;       /* PDF: Ø~39px design × escala ≈ 19px live; subimos 16→18 */
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 2px solid var(--ayc-green);
  transition: background .2s;
}
.ayc-native.ayc-native .ayc-carousel-dot.active {
  background: var(--ayc-green);
}

/* ============================================================
   3) PROCESO "Cómo trabajamos" — banda gradiente teal→navy,
      cards blancas, badge 90px con anillo teal + solape −45px,
      flecha chevron blanca.
   Real DOM Advisors: [data-id="adv-proc-sec"] > .e-con-inner >
   adv-proc-title (heading) + adv-proc-grid (grid de 6 widget-icon-box
   adv-p1..adv-p6). El "badge numérico" = .elementor-icon-box-icon.
   NO existe svg.ayc-timeline-arrow en el DOM → lo inyecta animations.js;
   aquí solo se asegura su color blanco.
   ============================================================ */
/* BANDA gradiente teal→navy, FULL-BLEED. La sección ES la propia .ayc-native
   top-level (clase DOBLADA SIN espacio antes de [data-id]; con espacio el
   selector descendente NO casaba la sección → banda transparente → título y
   flechas blancas invisibles sobre el page blanco). Además la sección es el
   4º+ contenedor top-level → el <style> inline lazy-load de Elementor
   (.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded){background-image:none
   !important}, spec 0,5,0) suprime el background-image. Lo vencemos con clase
   CUÁDRUPLE (0,4,1) + !important sobre background-image, y damos también un
   background-color sólido de respaldo (el overlay/lazy no lo toca). */
.ayc-native.ayc-native[data-id$="-proc-sec"] {
  position: relative;
  background-color: var(--ayc-blue);
}
/* Full-bleed: la sección es e-con-boxed (~1200 inner) pero la BANDA debe
   ocupar el ancho de viewport. La sección ya arranca en left:0 y ~100vw; el
   ::before pinta el degradado a 100vw centrado, detrás del contenido. */
.ayc-native.ayc-native.ayc-native.ayc-native[data-id$="-proc-sec"] {
  background-image: linear-gradient(180deg, var(--ayc-blue) 0%, var(--ayc-navy) 100%) !important;
}
/* Título BLANCO sobre la banda teal. post-78.css fija per-elemento
   (.elementor-78 .elementor-element.elementor-element-adv-proc-title
   .elementor-heading-title, spec 0,4,0) font-size:48px + color navy
   rgb(30,39,81) → invisible/bajo-contraste sobre el teal. Anteponemos el
   data-id de la SECCIÓN (0,4,0) + .elementor-heading-title (0,5,0) para
   ganarle y forzar blanco. Mantenemos 48px (el diseño lo lee como display
   grande; el auditor marcó 44px como posiblemente chico) — sin singularizar:
   sigue siendo decisión de página, este es el único título sobre fondo oscuro. */
.ayc-native.ayc-native[data-id$="-proc-sec"] [data-id$="-proc-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-section);   /* TOKEN: título de sección consolidado (48px). De-orfanizado a
                        --fs-section (ayc-base.css) — mismo valor renderizado, ahora un token con nombre. */
  line-height: 1.2;
  color: var(--ayc-white);
  text-align: center;
}
/* RITMO del título: ~45px de banda-top→título (poco arriba) y ~120–127px
   título→primera fila de cards (aire generoso abajo, PDF 207px ×0.6148 ≈127px).
   El hueco banda-top lo da el padding-top del inner de la sección (80px→45px);
   el hueco título→grid lo da el margin-bottom del título. El badge solapa −40px
   sobre la card, así que el gap visible título→card ≈ margin-bottom − 40. */
.ayc-native.ayc-native[data-id$="-proc-sec"] > .e-con-inner {
  padding-top: 45px;
  padding-bottom: 90px;   /* aire bajo la última fila ~90px (PDF ~96.5px); al
                             comprimir la card a 228px la banda quedó corta abajo */
}
.ayc-native.ayc-native[data-id$="-proc-sec"] [data-id$="-proc-title"] {
  margin-bottom: 44px;   /* −35% (67→44, jun-2026): el cliente veía demasiado blanco bajo el
                            título → ritmo vertical más apretado. El badge solapa −40px →
                            gap visible título→card ≈ 44+asomo. */
}

/* Grid de cards del proceso. Gap COLUMNA ~45px (PDF 75px diseño × 0.6147 ≈ 46px;
   antes 32px → cards demasiado juntas). gap fila 56px (generoso para que el
   badge solape −45px sin chocar con la fila de arriba). align-items:stretch +
   min-height en la card → las 6 cards igualan altura (fila2 con títulos largos
   ya no crece respecto a fila1). */
.ayc-native.ayc-native [data-id$="-proc-grid"] > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;  /* AMBAS filas a la misma altura (la más alta) → fila1==fila2 */
  gap: 79px 46px;       /* fila ~79px (PDF 129px ×0.6148; el badge solapa −40px) · columna ~46px (PDF) */
  align-items: stretch;
}

/* Card blanca del paso (cada icon-box). Aspecto ANCHO-BAJO del PDF (~369×228
   live, ratio ~1.62). FLEX COLUMN + justify-content:center → el bloque
   título+descripción queda VERTICALMENTE CENTRADO (PDF ~76px aire arriba /
   ~51px abajo) en vez de pegado arriba con banda muerta abajo. El badge es
   position:absolute (fuera de flujo) → no afecta al centrado. Padding lateral
   20px (antes 28) da ~329px de caja de texto: 'Checklist y documentación'
   (~308px) y 'Preparación y revisión final' (~323px) caben en 1 línea como el
   PDF (solo 'Coordinación interna (AYC Group)' queda en 2 por longitud real).
   padding-top algo > bottom para reservar el asomo del badge y reproducir la
   ligera asimetría del PDF (más aire arriba). min-height baja a ~228px;
   grid-auto-rows:1fr nivela ambas filas a la más alta → fila1==fila2. */
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-widget-icon-box {
  background: var(--ayc-white);
  border-radius: 14px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* TOP-LOADED como el PDF (el badge solapa la zona superior →
                                    reparto ~75 arriba/~46 abajo, no centrado). flex-start fija el
                                    AIRE SUPERIOR por padding-top → idéntico en las 6 cards, sea cual
                                    sea el nº de líneas de la descripción (el sobrante cae abajo) */
  padding: 75px 16px 22px;  /* top 75px = aire sobre el título del PDF (122px ×0.6148 ≈ 75); lateral
                               16px → caja texto ~337px: 'Preparación y revisión final' (~334px glifo
                               live) cabe en 1 línea como el PDF; solo 'Coordinación interna (AYC
                               Group)' (~411px) queda en 2 por longitud */
  min-height: 228px;   /* border-box → alto TOTAL de card ~228px (PDF, ratio ~1.62 sobre ~369px ancho).
                          flex-start + padding-top 75 → aire bajo descripción ~46px (PDF) en card de
                          1 línea de desc, idéntico arriba en todas */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  text-align: center;
  position: relative;
}
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-wrapper {
  position: static;
  text-align: center;
}

/* Badge numérico (icono del icon-box) — disco verde 90px, anillo teal,
   solape −45px sobre el borde superior de la card */
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-icon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin: -40px 0 0;          /* medio diámetro outer (~79px) fuera */
  width: 76px; height: 76px;  /* disco verde LIMPIO 76px (NO cambia con el aro: content-box) */
  border-radius: 50%;
  background: var(--ayc-green);
  border: 6px solid var(--ayc-blue);   /* ANILLO teal #0075a9 alrededor del disco verde (PDF: separa el badge de la card blanca) */
  box-sizing: content-box;             /* el anillo NO encoge el disco 76px (queda 76 + 2×6 = 88 total) */
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-icon .elementor-icon,
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-icon a {
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-proc-num);          /* numeral proporcional al disco limpio de 76px */
  line-height: 1;
  background: transparent;
}
/* NÚMERO de paso 1–6 BLANCO dentro del badge (PDF: numeral grueso blanco, no
   icono). El icon-box trae el mismo glifo FA (estrella) en las 6 → lo ocultamos
   con opacity:0 (NO display:none: conserva el tamaño del icon-box) y pintamos el
   número con un CSS counter sobre el grid. El counter incrementa por icon-box en
   ORDEN DOM (adv-p1..p6 = 1..6); centralizado y editable, sin tocar el markup ni
   per-data-id. Funciona para cualquier nº de pasos secuenciales (las 3 páginas). */
.ayc-native.ayc-native [data-id$="-proc-grid"] > .e-con-inner {
  counter-reset: ayc-proc-step;
}
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-widget-icon-box {
  counter-increment: ayc-proc-step;
}
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-icon i,
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-icon svg {
  display: none;       /* el badge ya tiene width/height fijos → la estrella FA
                          sobra; el counter ::after es el único contenido */
}
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-icon::after {
  content: counter(ayc-proc-step);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-proc-num);          /* numeral proporcional al disco limpio de 76px */
  line-height: 1;
  pointer-events: none;
}

/* Título del paso. El PDF lo lee ~23-24px (cap-height ≈ "Diagnóstico inicial"
   ocupa ~0.57 del ancho de card; a 32px ocupaba ~0.80 y rompía
   "Coordinación interna (AYC Group)" a 3 líneas). Override puntual 24px (NO toco
   --fs-h2, que gobierna otros card-titles globalmente). Futura Bold 700, navy,
   lh 1.2, centrado → títulos largos vuelven a 2 líneas como el diseño, natural
   por longitud (sin <br>, hay ancho de sobra). */
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-title,
.ayc-native.ayc-native [data-id$="-proc-grid"] .elementor-icon-box-title a {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-step);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 10px;
  min-height: 2.4em; /* 2026-06-25 P2/P5: reserva 2 líneas de título → los CUERPOS de todas las cards
                        arrancan a la MISMA altura (estaban desalineados por nº de líneas). NO cambia el
                        tamaño de letra (el cliente: ese tamaño es estándar transversal). Ayuda override 3 líneas. */
}
/* Descripción del paso ≈20px (PDF ~20px live; suelo de legibilidad ~18px). El
   post-78.css fija font-size:15px per-elemento (.elementor-78 .elementor-element
   .elementor-element-adv-pN .elementor-icon-box-description, spec 0,4,0) y empata
   con la regla base shared (0,4,0) ganando por orden de carga. Subimos la
   especificidad anteponiendo el data-id de la SECCIÓN (0,5,0) para gobernar las 6
   descripciones a la vez (single source of truth, sin per-data-id por card).
   style.css fija .elementor-widget-icon-box .elementor-icon-box-description{
   font-size:15px !IMPORTANT} (legacy Hello-child) → un !important del legado solo
   se vence con !important (gana al non-important sea cual sea la especificidad). */
.ayc-native.ayc-native[data-id$="-proc-sec"] [data-id$="-proc-grid"] .elementor-icon-box-description {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-quote) !important;
  line-height: 1.4 !important;   /* ~28px */
  color: var(--ayc-muted) !important;   /* gris-teal de marca #839794 (PANTONE 5497C, el del footer/disclaimer; el PDF muestrea frío/teal B-R=+19/G-R=+17, NO neutro). !important vence al legacy style.css .elementor-widget-icon-box .elementor-icon-box-description{color:#757575 !IMPORTANT} */
  margin: 0;
}

/* ============================================================
   [UNIFICACIÓN 2026-06-16] FLECHA DE PROCESO = la MISMA del Home
   "Soluciones claras" (nw0oe484/rf75jvl7), en BLANCO sobre la banda teal.
   El cliente pedía que fueran idénticas: antes el proceso usaba un SVG con
   stroke chevron (path + dashoffset) → otra forma/animación. Ahora
   animations.js inyecta un DIV .ayc-home-arrow entre badges consecutivos y
   este bloque lo pinta con la MISMA geometría + animación que el Home:
     · TRONCO (::before): gradiente transparente→blanco, height 9px, radius 6px.
     · CABEZA (::after): CHEVRON = caja 18px con border-top/right 8px, rotate 45°.
     · ANIMACIÓN: tronco se "dibuja" izq→der (clip-path) y luego funde el chevron
       (mismo timing/curvas que home.css: clip-path .85s ease .15s + opacity .4s
       ease .85s). Estado por defecto (sin JS) = visible.
   La única diferencia con el Home es el COLOR (blanco aquí; gris #c2c7d0 allá).
   ============================================================ */
.ayc-native .ayc-home-arrow {
  position: absolute;
  overflow: visible;
  z-index: 30;
  pointer-events: none;
}
/* TRONCO: barra blanca con gradiente (transparente→blanco), centrada en el eje. */
.ayc-native .ayc-home-arrow::before {
  content: "";
  position: absolute;
  /* [Acc R2 minor] El tronco se detenía a 26px del borde → quedaba un HUECO
     visible antes del chevron y se leía como ">" suelto en vez de "→".
     Lo extendemos a 13px para que el tronco toque la base del chevron y se
     lea como una flecha continua "→" (línea→cabeza unidas). */
  left: 0; right: 13px;
  top: 0; transform: translateY(-50%);
  height: 9px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 26%, #ffffff 66%, #ffffff 100%);
  border-radius: 6px;
  display: block;
  clip-path: inset(0 0 0 0);       /* estado por defecto = visible (fallback sin JS) */
}
/* CABEZA = chevron blanco ">" (caja rotada 45°), misma proporción que el Home. */
.ayc-native .ayc-home-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: 18px; height: 18px;
  border-top: 8px solid #ffffff;
  border-right: 8px solid #ffffff;
  border-left: 0; border-bottom: 0;
  background: transparent;
  transform: translateY(-50%) rotate(45deg);
  display: block;
}
/* ANIMACIÓN de dibujado (idéntica al Home): estado inicial sólo con .ayc-arrowfx;
   .is-visible (del JS) la reproduce. Sin JS la flecha queda visible. */
.ayc-native .ayc-home-arrow.ayc-arrowfx::before { clip-path: inset(0 100% 0 0); }
.ayc-native .ayc-home-arrow.ayc-arrowfx::after  { opacity: 0; }
.ayc-native .ayc-home-arrow.ayc-arrowfx.is-visible::before {
  clip-path: inset(0 0 0 0); transition: clip-path 0.85s ease 0.15s;
}
.ayc-native .ayc-home-arrow.ayc-arrowfx.is-visible::after {
  opacity: 1; transition: opacity 0.4s ease 0.85s;
}
/* [UNIFICACIÓN 2026-06-17] El proceso de las 3 páginas de servicio usa la MISMA
   svg.ayc-timeline-arrow del Home "Soluciones claras" (animations.js generic).
   La pintamos BLANCA sobre la banda teal (el Home la pinta gris #c2c7d0). */
.ayc-native[data-id$="-proc-sec"] svg.ayc-timeline-arrow path,
.ayc-native[data-id$="-proc-sec"] svg.ayc-timeline-arrow .ayc-arrow-line {
  stroke: #ffffff !important; stroke-width: 3px !important; fill: none !important; /* 2026-06-25 P2/P5: flechas DELGADAS (5→3px) */
}
.ayc-native[data-id$="-proc-sec"] svg.ayc-timeline-arrow { opacity: 1; }
/* [2026-06-24 PDF AJUSTES AN3/AC2/AD5] Flechas del proceso CONSISTENTES (~5px) en las 3 páginas.
   Ayuda/Accountants veían el DIV grueso (tronco 9px) → "más delgada"; Advisors la SVG fina (3px)
   → "muy delgadas". Igualamos AMBAS variantes a ~5px, SOLO en -proc-sec (no toca el Home). */
/* 2026-06-25 P2/P5: flechas DELGADAS (3px) + INSET horizontal para que NO toquen las cards
   (antes el tronco iba de borde a borde tocando las cards; ahora flota entre los círculos). */
/* [2026-06-25 FIX flechas] Override por CLASE DIRECTA (el selector por [data-id$="-proc-sec"] NO
   matcheaba porque el data-id real es un hash, no "acc-proc-sec"). servicios-shared.css se carga
   SOLO en las 3 páginas de servicio → no afecta el Home. tronco 9→3px + inset (no toca las cards). */
/* [2026-08-27 NUEVO-02] CONSISTENCIA DE GROSOR entre las 3 páginas de servicio.
   Estaban a dos grosores: Ayuda Center 5px (override propio) y Accountants/
   Advisors 3px → el PDF pide que sean iguales.
   Se unifica en 5px, NO en 3px, por cronología del feedback del cliente:
   el PDF (24-jun) pedía "más delgada", pero el 25-jun el cliente respondió que
   "quedaron EXCESIVAMENTE delgadas" y por eso Ayuda se subió a 5px. Manda lo
   más reciente. Reversible: cambiar 5 -> 3 aquí y en ayuda-center.css:580-584. */
.ayc-native.ayc-native .ayc-home-arrow::before {
  height: 5px !important; left: 26px !important; right: 32px !important;
}
.ayc-native.ayc-native .ayc-home-arrow::after {
  width: 13px !important; height: 13px !important; right: 20px !important;
  border-top-width: 5px !important; border-right-width: 5px !important;
}
/* Ocultar cualquier flecha FA redundante del proceso */
.ayc-native.ayc-native [data-id$="-proc-sec"] i.fa-arrow-right,
.ayc-native.ayc-native [data-id$="-proc-sec"] .fa-long-arrow-alt-right { display: none; }

/* ============================================================
   4) POR QUÉ ELEGIR — imagen circular + texto que ENVUELVE
      (shape-outside circular). El legacy NO trae círculo: lo
      construimos. El círculo + foto + lado (float) = por-página.
   Real DOM Advisors: [data-id="adv-why-sec"] > .e-con-inner >
   advw-title (heading) + advw-grid (stack de 5 widget-icon-box).
   Aquí: matar el flex de advw-grid (display:block) para que el
   float del círculo funcione, y estilar título/desc/check de cada
   icon-box. El pseudo-círculo flotado lo aporta native/<slug>.css
   (foto + lado).
   ============================================================ */
.ayc-native.ayc-native [data-id$="w-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-section);   /* TOKEN: título de sección consolidado (48px). De-orfanizado a
                        --fs-section (ayc-base.css) — un solo valor para todos los títulos de sección
                        (Qué hacemos / Cómo trabajamos / Nuestra esencia / Por qué elegir). Mismo valor
                        renderizado; NO toco --fs-h1 (heros/CTA). Compartido por las 3 páginas. */
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 13px;             /* −35% (20→13, jun-2026): menos blanco bajo el título del "por qué" → ritmo más apretado */
}

/* LAYOUT 2-COLUMNAS REAL (PDF §6, ronda 2 — RESUELVE EL BLOCKER DE OCLUSIÓN).
   El intento previo (display:block + ::before float + shape-outside) NO
   funcionaba: los 5 icon-boxes son bloques de nivel y su TEXTO vive 3 niveles
   adentro (.elementor-icon-box-content > -title/-description), cuyo ancho se
   calcula al ancho completo del icon-box (1140px) IGNORANDO el float → las
   líneas no se acortan y el círculo (::before) se pintaba ENCIMA del ~40%
   derecho de cada línea (shape-outside:none en todos los nodos, medido).
   El PDF §6 NO es un wrap circular: es 2 COLUMNAS limpias (checks en UNA mitad +
   UNA imagen circular en su propia COLUMNA al otro lado, con aire generoso entre
   ambas; ninguna línea pasa por debajo del círculo).

   El círculo + el LADO + la COLUMNA de texto los fija CADA PÁGINA en su propio
   CSS (Accountants: círculo derecha / columna izquierda · Advisors: círculo
   izquierda / columna derecha), porque el lado difiere entre páginas y un
   ancho/lado fijo en shared regresaría la otra página. Aquí shared SOLO deja el
   contenedor como contexto de posicionamiento (block + relative + overflow
   visible) y la tipografía/check de cada ítem (abajo). */
.ayc-native.ayc-native [data-id$="w-grid"],
.ayc-native.ayc-native [data-id$="w-grid"] > .e-con-inner {
  display: block;
  position: relative;
  overflow: visible;
}
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-widget-icon-box {
  clear: none;
  width: auto;          /* la PÁGINA acota la columna (max-width + lado); shared neutro */
  background: transparent;
  box-shadow: none;
  padding: 8px 0;   /* (jun-2026 r2) separación entre beneficios. Con --fs-body=20 (más chico)
                       hay sitio: subido 5px → 8px para que respiren entre sí, sin sacarlos del
                       alto del círculo (Ø~567). Los 5 deben seguir cabiendo al lado del círculo
                       (no full-width abajo) y conservar la margen redonda. */
}
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-wrapper {
  display: block;
  text-align: left;
}
/* Ocultar el icono FA original del icon-box (lo sustituye el check verde) */
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-icon { display: none; }

.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-h3);   /* 26px — TOKEN BASE. Rol de sub-título/H3 del por-qué
                        ('Lenguaje claro', 'Enfoque humano', etc.): debe ser claramente > body
                        y diferenciarse de su descripción. Antes 19px (huérfano no-token, el
                        cliente lo veía pequeño). Mapeado al token; NO toco --fs-h3 global. */
  line-height: 1.25; /* (jun-2026 r2) más aire en el título: 1.16 → 1.25. Con --fs-body=20 caben */
  color: var(--ayc-navy);
  margin: 0 0 3px;
}
/* Check verde BOLD (mismo icono del carrusel) antepuesto al título.
   PDF: aro/palomita ≈30-33px live-eq (check crop w 61-69 × 0.4908 = 30/31/34/32).
   Asset correcto = Recurso 20.png = check-green-bold.png (trazo GRUESO, palomita
   grande cuyo brazo derecho rebasa el aro por arriba-derecha) — igual que
   ayc-advisors.css:357 y ayuda-center.css:542. check-green.png (Recurso 19) es la
   palomita FINA y NO corresponde a este diseño. Color #9dc41a y diámetro 31px OK. */
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-title::before {
  content: "";
  display: inline-block;
  width: 31px; height: 31px;
  margin-right: 11px;
  vertical-align: -7px;
  background: url('/wp-content/uploads/ayc-icons/check-green-bold.png') center/contain no-repeat;
}
/* Cuerpo de cada beneficio. El PDF lo lee ~18-20px (line-height diseño ~33pt
   → cuerpo ~24pt design / escala 0.75 ≈ 18px live); el cliente pide cuerpo
   legible en las 3. text-align:LEFT (flush-left, ragged-right) → las líneas
   arrancan en la curva del círculo y el borde izq. sigue el shape-outside como
   el PDF (el center movía ambos bordes y rompía el abrazo). color #787e95
   (slate/azul-pizarra apagado del PDF, con matiz azul; no el #757575 neutro).
   El legacy style.css fija .elementor-widget-icon-box .elementor-icon-box-description{
   font-size:15px; color:#757575 !IMPORTANT} → un !important del legado solo se
   vence con !important (gana sea cual sea la especificidad). */
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-description {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body) !important;   /* 22px — TOKEN BASE. Cuerpo de cada beneficio del
                                       por-qué: copy de cuerpo, igualado al body del sitio. Antes 21px
                                       (huérfano no-token). !important vence el legacy style.css
                                       (.elementor-widget-icon-box ...{font-size:15px!IMPORTANT}). */
  line-height: 1.42 !important;      /* (jun-2026 r2) AIRE entre líneas: 1.28 → 1.42. El cliente veía
                                       el interlineado apretado (compactado previo); con --fs-body=20
                                       (más chico) hay sitio. 1.5 dejaba caer ~2 líneas del 5º beneficio
                                       bajo la curva del círculo (stack 590 > Ø+margin 567); 1.42 mantiene
                                       los 5 abrazando el círculo y conserva un interlineado cómodo
                                       (≥1.42 = pedido cliente "que respire"). */
  color: #839794 !important;        /* gris-teal de marca (PANTONE 5497C, g≈b verdoso-apagado) —
                                       el PDF muestrea el núcleo de glifo en rgb(130,147,149)≈#839795,
                                       NO el slate azulado rgb(120,126,149). Mismo tono que footer /
                                       disclaimer / check-items del carrusel → centralizado. */
  text-align: left !important;      /* flush-left: el borde izq. abraza la curva del círculo.
                                       !important: vence el legacy style.css
                                       .elementor-widget-icon-box .elementor-icon-box-description{
                                       text-align:center !IMPORTANT} (el center movía ambos bordes
                                       y rompía el abrazo limpio al shape-outside del PDF) */
  margin: 0;
}
/* El título del beneficio también flush-left (mismo borde que el cuerpo, para
   que ambos arranquen en la curva del shape-outside como el PDF). */
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-title {
  text-align: left;
}
/* [2026-06-25 P9/punto 3] "Por qué elegir" (Ayuda/Accountants/Advisors): el check verde es un
   ::before del título (31+11px) → el título arrancaba en x≈42 y el párrafo en x=0 (desalineados).
   Indent COLGANTE: el check cuelga a la izquierda y TÍTULO + PÁRRAFO arrancan alineados al mismo x. */
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-title { padding-left: 42px; }
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-title::before { margin-left: -42px; }
.ayc-native.ayc-native [data-id$="w-grid"] .elementor-icon-box-description { padding-left: 42px; }

/* ============================================================
   5) FOOTER — reusar el del sitio, 100% ancho, disclaimer 1 línea.
   Real DOM: ftr_main > ftr_inner > ftr_col1..4 ; ftr_bottom >
   ftr_disclaimer. Fondo blanco + texto gris-teal (chrome compartido).
   ============================================================ */
/* 100% ancho: el flex vive en .e-con-inner del contenedor boxed */
.ayc-native.ayc-native [data-id="ftr_inner"] > .e-con-inner {
  max-width: none;
  width: 100%;
}
.ayc-native.ayc-native [data-id="ftr_inner"] > .e-con-inner > .e-con {
  flex-direction: row;
  flex-wrap: nowrap;
}

/* Disclaimer del footer (1 línea, idéntico al hero), Myriad/gris-teal, ⚠ */
.ayc-native.ayc-native [data-id="ftr_disclaimer"] {
  text-align: left;
  max-width: none;
  margin: 0;
}
.ayc-native.ayc-native [data-id="ftr_disclaimer"] p {
  white-space: normal;
  font-family: var(--ayc-font-body);
  font-weight: 400;
  font-size: var(--fs-legal);
  line-height: 1.4;
  color: var(--ayc-muted, var(--color-muted-brand));
  margin: 0;
}
.ayc-native.ayc-native [data-id="ftr_disclaimer"] p::before { content: "\26A0\FE0E "; color: #839794 !important; font-family: 'Arial', sans-serif; } /* footer = fondo claro → ⚠ teal visible (no blanco) */

/* ============================================================
   BANDA NAVY "Nuestra esencia" — COMPARTIDA (Advisors 78 + Accountants 69).
   El bloque es UN text-editor [data-id$="-esencia-content"] cuyo layout de
   2 columnas + divisor verde está en HTML interno con estilos INLINE
   (spec 1,0,0,0). Para imponer la escala de marca hay que usar !important
   sobre la doble clase. Estructura interna real:
     widget > div[banner bg] > div[fila flex] > [col-izq | divisor | col-der]
   Tipografía gobernada por widget-class/tag (un solo set de tamaños):
     · H2 título de sección = Futura Bold 44px (igual que el resto de la página)
     · subtítulo (col-izq STRONG/P) = blanco sólido
     · párrafo cuerpo (col-der) = 20px / lh ~27px, blanco sólido (suelo legibilidad)
     · divisor verde = alto prominente (~134px) vía min-height
   ============================================================ */
/* H2 título: misma fuente display de marca y mismo tamaño que las otras secciones.
   46px = estimación PDF verificada (cap-ish 67px × escala 0.4908). */
.ayc-native.ayc-native [data-id$="-esencia-content"] h2 {
  font-family: var(--ayc-font-head) !important;   /* TOKEN base display (Futura Bold), no literal */
  font-size: var(--fs-section) !important;   /* TOKEN: título de sección consolidado (48px), de-orfanizado a --fs-section */
  line-height: 1.1 !important;
  color: #ffffff !important;
}
/* Subtítulo/LEAD (columna izquierda): es un paso de escala PROPIO, claramente
   por encima del body (no fine-print). PDF: el subtítulo "Lo hacemos simple,
   ordenado y claro." va en VERDE LIMA de marca (#9DC41A), peso 700 (es el único
   color de acento del diseño compartido) — NO blanco. El inline trae color:#fff
   + font-size:15px/weight:400 (spec 1,0,0,0) → !important sobre la doble clase
   para vencerlo. Subido a 24px (paso lead claramente > body 22px del PDF render
   ~26px × 0.49 ≈ 24-26). Sin <br>: envuelve natural en el ancho de la columna. */
.ayc-native.ayc-native [data-id$="-esencia-content"] > div > div > div:nth-child(1) p,
.ayc-native.ayc-native [data-id$="-esencia-content"] > div > div > div:nth-child(1) p strong,
.ayc-native.ayc-native [data-id$="-esencia-content"] > div > div > div:nth-child(1) strong {
  color: #ffffff !important;   /* BLANCO — los PDFs de Advisors Y Accountants muestran el subtítulo en BLANCO, no en verde lima (la 'ronda 1 legacy' se equivocó; verificado contra ambos PDFs 2026-06-17) */
  font-size: var(--fs-step) !important;
  font-weight: 500 !important;  /* [2026-06-25 punto 2 v2] BAJADO 700→500: a 700 con Futura Medium (declarado @500) el navegador SINTETIZA bold (faux, "mucho peso"). 500 = peso real del font, limpio; el lead se distingue por TAMAÑO (--fs-step 26), no por bold. */
  line-height: 30px !important;
}
/* Párrafo cuerpo (columna derecha): 22px / lh 30px, blanco sólido (PDF render
   ~24px × 0.49 ≈ 22-24; subido 20→22 para igualar el render del diseño y
   mantenerse por debajo del lead lima de 24px). */
.ayc-native.ayc-native [data-id$="-esencia-content"] > div > div > div:nth-child(3) p {
  font-size: var(--fs-body) !important;
  line-height: 30px !important;
  color: #ffffff !important;
}
/* Divisor verde: prominente, recorre encabezado + subtítulo (~134px) */
.ayc-native.ayc-native [data-id$="-esencia-content"] > div > div > div:nth-child(2) {
  min-height: 134px !important;
}

/* ------------------------------------------------------------
   OVERLAY NAVY DENSO + ALTURA DE BANDA (gap ronda 1, blocker+major).
   DISEÑO (§3): banda alta con FOTO de fondo + OVERLAY navy denso (~#262D4E)
   encima, de modo que el texto blanco/lima quede legible. El banner (inner
   div del widget) trae la foto vía background:url(...) INLINE; aquí ponemos
   el overlay y la altura. El overlay es invariante del componente compartido.
   - El banner ya es position:relative (inline) → el ::before inset:0 lo cubre.
   - z-index: overlay 0, fila de contenido (> div > div) 1 → texto SOBRE el navy.
   - overflow:hidden recorta la foto a la banda (esquinas/bleed).
   NOTA: la FOTO en sí (background-image) la re-asegura cada página por su
   propio data-id con !important (la inline shorthand se computa 'none' en
   este DOM); Advisors mantiene su altura propia (375px, scoped a su data-id,
   gana por orden de carga) — esta regla shared sólo eleva Accountants/Ayuda. */
.ayc-native.ayc-native [data-id$="-esencia-content"] > div {
  position: relative !important;
  overflow: hidden !important;
  min-height: 640px !important;     /* banda alta ~diseño (PDF ~800px render); el contenido queda centrado (align-items:center inline) */
  /* PARALLAX MARCADO (ronda 3 2026-06-17, COMPARTIDO por sufijo → las 3 páginas).
     background-attachment:fixed clava la FOTO al viewport mientras el contenido y
     la banda navy (overlay ::before, que queda ENCIMA) hacen scroll normal → la
     foto se mueve a OTRO ritmo (parallax claro). Robusto y sin JS. El inline
     'background:url(...)' del banner pone attachment:scroll (spec 1,0,0,0) → lo
     vencemos con !important. background-size:cover + position:center mantienen el
     encuadre; con fixed el cover se calcula contra el viewport → la foto llena la
     banda y se desplaza al hacer scroll. NO rompe el texto blanco (sobre el overlay)
     ni el alto ~375 (lo fija la regla de abajo). */
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center !important;
}
.ayc-native.ayc-native [data-id$="-esencia-content"] > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(38, 45, 78, 0.72);   /* navy denso #262D4E @0.72 (antes 0.82) — bajado 10pp para que el
                                           PARALLAX (background-attachment:fixed, abajo) se NOTE CLARAMENTE al
                                           hacer scroll (la foto fija se mueve a otro ritmo y ahora se ve más a
                                           través del overlay). A 0.72 sobre la foto ya oscurecida el texto
                                           blanco/divisor verde siguen con alto contraste y legibles (verificado
                                           live). COMPARTIDO por las 3 páginas de servicio (sufijo $=). */
  z-index: 0;
  pointer-events: none;
}
/* La fila de 2 columnas (col-izq | divisor | col-der) SOBRE el overlay */
.ayc-native.ayc-native [data-id$="-esencia-content"] > div > div {
  position: relative;
  z-index: 1;
}

/* GAP por defecto de Elementor en el inner de la sección esencia (gap ronda 1,
   minor): el .e-con-inner trae gap:20px (default). Lo neutralizamos para evitar
   slivers si se añade otro hijo. Bajo impacto (1 solo hijo hoy). */
.ayc-native.ayc-native[data-id$="-esencia-sec"] > .e-con-inner,
.ayc-native.ayc-native[data-id$="-esencia-sec"].e-con-full {
  gap: 0 !important;
}

/* ============================================================
   6) TESTIMONIOS "Lo que nuestros clientes dicen de nosotros"
      — ESTÁNDAR del sitio (compartido por las 3 páginas de servicio).
   Real DOM Advisors: sección [data-id$="-test-sec"] (.ayc-native top-level,
   clase DOBLADA SIN espacio) > inner con:
     · heading título  (advxc4c5aec)
     · text-editor subtítulo (advx169b901)
     · text-editor lead (advx5fa45fe)
     · contenedor [data-id="581ginu8"] > HTML widget (carrusel .ayc-tst-*:
       wrap/carousel/viewport/track/card/ava/quote/name/role/nav/dots —
       las cards viven en un <style> inline del widget, spec 0,1,0..0,2,0)
     · botón [data-id$="…"] a.elementor-button "Ver más testimonios"
   DISEÑO (design-advisors.md §8): banda NAVY sólida #1E2751, título/sub/lead
   BLANCOS centrados, cita RECTA navy, flechas chevron BLANCAS finas SIN disco,
   botón pill VERDE bajo el carrusel, SIN fila de dots. El Kit (.elementor-kit-92
   button, spec 0,1,1) pinta TODO <button> verde → vence al inline .ayc-tst-nav/
   .ayc-tst-dot (0,1,0); nuestro scope doble .ayc-native.ayc-native … (0,3,0)
   le gana sin !important.
   ============================================================ */

/* Banda NAVY sólida + ritmo vertical (título y botón respiran dentro de la
   banda). La sección es la propia .ayc-native top-level (clase doblada SIN
   espacio). padding-top ~54px (PDF 111px ×0.4908 ≈54) banda→título; padding-
   bottom equilibrado bajo el botón. CUÁDRUPLE clase (0,5,0) para vencer a
   post-78.css .elementor-78 .elementor-element.elementor-element-adv-test-sec
   (0,4,0) que fija el fondo claro rgb(247,249,252). */
.ayc-native.ayc-native.ayc-native.ayc-native[data-id$="-test-sec"] {
  background: var(--ayc-navy);
}
.ayc-native.ayc-native[data-id$="-test-sec"] {
  padding-top: 54px;
  padding-bottom: 56px;
}
/* Título BLANCO + line-height reparado (el bridge .elementor-heading-title{
   line-height:inherit} hereda 25.6px del body → recortaba descendentes de
   'q/g/y'). Fijamos lh 1.2 explícito y color blanco, centrado. */
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-heading .elementor-heading-title {
  color: var(--ayc-white);
  line-height: 1.2;
  text-align: center;
  /* Título de Testimonios = MISMA jerarquía de título-de-sección que el resto de
     la página (Nuestra esencia / Qué hacemos / Cómo trabajamos / Por qué elegir /
     CTA renderizan 48px/800). El PDF da el cap-height de Testimonios (54px)
     idéntico al de 'Por qué elegir' (52px) → mismo rol. Subimos 37→48 y 700→800
     para entrar en el set CONSOLIDADO de H2-de-sección (un solo valor cross-page),
     eliminando el outlier. Afecta a las 3 páginas (componente compartido). */
  font-size: var(--fs-section);   /* TOKEN: título de sección consolidado (48px), de-orfanizado */
  /* [2026-08-27] 800 -> 700: Futura Bold ES 700; pedir 800 hace que el navegador
     sintetice un faux-bold deformado. Canon del proyecto = 700. */
  font-weight: 700;
  /* FAMILIA = TOKEN cabecera (Futura Bold). Igual que -svc-sec: sin esto el título
     de Testimonios caía a Futura Medium tras quitar el Montserrat foráneo del
     _elementor_data. (0,4,1) vence al bridge font:inherit. Las 3 páginas heredan. */
  font-family: var(--ayc-font-head);
}
/* Subtítulo + lead BLANCOS centrados sobre la banda navy. El <p> del subtítulo
   trae color:#6B7280 INLINE (style attr, spec 1,0,0,0) → solo se vence con
   !important. */
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-text-editor p {
  color: var(--ayc-white) !important;
  text-align: center;
}

/* Botón "Ver más testimonios": pill VERDE de marca, texto BLANCO (PDF: letras
   blancas claras sobre el pill verde — muestreo del recorte), centrado bajo el
   carrusel con aire arriba. El wrapper del botón centra; el margin-top da el aire
   carrusel→botón y el padding-bottom de la banda da el aire bajo el botón. */
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-button {
  text-align: center;
  margin-top: 14px;
}
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-button .elementor-button {
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-button);            /* = el botón de reseñas del Home (21px) */
  border-radius: 6px;         /* = Home (6px), NO pill — pedido cliente: usar el botón estándar/global, no el redondo */
  padding: 13px 34px;
  border: 0;
  text-decoration: none;
}
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-button .elementor-button:hover {
  background: var(--ayc-green-dark);
  color: var(--ayc-white);
}

/* ──────────────────────────────────────────────────────────────────────────
   COMPONENTE DE TESTIMONIOS = EL MISMO DEL HOME (.ayc-tst-row con cards NATIVAS).
   2026-06-16: Advisors dejó de usar el widget HTML divergente (cards con borde
   verde + radio 26px + nav/dots propios). Ahora su sección [data-id="581ginu8"]
   es un contenedor NATIVO .ayc-tst-row con 2 chevrons (icon) + 3 cards
   (.ayc-tst-card: image .ayc-tst-ava + text .ayc-tst-quote + heading
   .ayc-tst-name + text .ayc-tst-role), IDÉNTICO al Home (home.css §testimonios).
   Replicamos aquí ESE MISMO estilo, scope .ayc-native, para que las 3 páginas de
   servicio rendericen igual que el Home: banda navy, cards BLANCAS sin borde,
   radio 18px, sombra, avatar con aro verde solapando arriba, cita recta navy,
   nombre navy bold, rol navy, chevrons blancos finos a los lados.
   (Las reglas de banda/título/botón/lead/subtítulo de arriba se conservan;
   este bloque sustituye TODA la mecánica del antiguo carrusel HTML.)
   ────────────────────────────────────────────────────────────────────────── */

/* FILA: flex row, 3 cards a igual altura + 2 chevrons a los lados, centrada. */
.ayc-native [data-id="581ginu8"].ayc-tst-row,
.ayc-native .ayc-tst-row {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: stretch !important; justify-content: center !important;
  gap: 30px !important; width: 100% !important; max-width: 1200px;
  margin-inline: auto;
}
.ayc-native .ayc-tst-row > .e-con-inner {
  width: 100%; display: flex; flex-direction: row; align-items: stretch; gap: 30px !important;
}

/* CARD: blanca, radio 18px, SIN borde, sombra; padding-top generoso para el aro
   solapado; flex column centrada, contenido agrupado arriba; misma altura. */
.ayc-native .ayc-tst-card {
  position: relative !important;
  flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
  align-self: stretch !important;
  background: #ffffff !important; border: 2px solid var(--ayc-green) !important; border-radius: 18px !important;  /* contorno verde fino #9dc41a alrededor de toda la tarjeta (PDF) */
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  padding: 62px 28px 32px !important;   /* top reserva el aro que sale por arriba */
  margin-top: 48px !important;          /* sitio físico para la mitad del aro */
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: flex-start !important; text-align: center !important; overflow: visible !important;
}
.ayc-native .ayc-tst-card::after { content: none !important; }  /* mata la barra verde del componente viejo */
.ayc-native .ayc-tst-card > .e-con-inner {
  display: flex; flex-direction: column; align-items: center; width: 100%;
}

/* AVATAR FOTO: círculo con aro verde, solapando el borde superior de la card.
   display:block anula el bridge `.elementor-widget-image{display:contents}`. */
.ayc-native .ayc-tst-card .ayc-tst-ava {
  display: block !important;
  position: absolute !important; top: -42px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 84px !important; height: 84px !important; margin: 0 !important; z-index: 3 !important;
}
.ayc-native .ayc-tst-card .ayc-tst-ava > .elementor-widget-container,
.ayc-native .ayc-tst-card .ayc-tst-ava .elementor-image,
.ayc-native .ayc-tst-card .ayc-tst-ava figure {
  display: block !important; width: 84px !important; height: 84px !important; margin: 0 !important;
}
.ayc-native .ayc-tst-card .ayc-tst-ava img {
  width: 84px !important; height: 84px !important; border-radius: 50% !important;
  object-fit: cover !important; display: block !important;
  border: 3px solid #9dc41a !important;       /* aro verde de marca */
  background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

/* CITA: navy, recta (no itálica), comillas ya en el texto. Familia = TOKEN base
   de cuerpo (var --ayc-font-body = Futura Medium) → single source, no literal. */
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-quote,
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-quote p {
  color: var(--ayc-navy) !important; font-family: var(--ayc-font-body) !important;
  font-style: normal !important; font-size: var(--fs-quote) !important; line-height: 1.6 !important;  /* = cita del Home (20px), paridad exacta */
  text-align: center !important; margin: 8px 0 18px !important;
}
/* NOMBRE: navy bold. Familia = TOKEN base display (var --ayc-font-head = Futura Bold). */
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-name,
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-name .elementor-heading-title {
  color: var(--ayc-navy) !important; font-family: var(--ayc-font-head) !important;
  font-weight: 700 !important; font-size: var(--fs-h3) !important; line-height: 1.2 !important;
  margin: 0 0 2px !important; text-align: center !important;
}
/* ROL: navy regular, debajo del nombre. Familia = TOKEN base de cuerpo. */
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-role,
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-role p {
  color: var(--ayc-navy) !important; font-family: var(--ayc-font-body) !important;
  font-size: var(--fs-quote) !important; line-height: 1.3 !important; margin-top: 2px !important;  /* = rol del Home (20px) */
  text-align: center !important;
}

/* CHEVRONS ‹ › blancos a los lados (icon widgets), centrados respecto a las cards. */
.ayc-native .ayc-tst-chev {
  flex: 0 0 auto !important; align-self: center !important;
}
.ayc-native .ayc-tst-chev .elementor-icon,
.ayc-native .ayc-tst-chev i,
.ayc-native .ayc-tst-chev svg {
  color: rgba(255,255,255,.85) !important; fill: rgba(255,255,255,.85) !important;
  font-size: var(--fs-icon-sm) !important; width: 30px !important; height: 30px !important; cursor: pointer;
}
.ayc-native .ayc-tst-chev .elementor-widget-container { padding: 0 4px !important; }

/* PÁRRAFO INTRO/LEAD del componente testimonios ('Las más de 400 reseñas…').
   Ronda 4: renderizaba a 15px (bajo el piso legible y MÁS pequeño que la cita/rol
   → jerarquía invertida para un lead). Subimos a 20px (lead, por encima del cuerpo)
   con line-height ~29px, y ensanchamos el contenedor a ~860px para que la frase en
   negrita quepa en una línea y el párrafo se mantenga en ~3 líneas natural (sin
   <br>). El <p> trae color/size INLINE (style attr) → !important para el size.
   Afecta a las 3 páginas de servicio (componente compartido). */
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-text-editor:not(.ayc-tst-quote):not(.ayc-tst-role):has(p strong),
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-text-editor:not(.ayc-tst-quote):not(.ayc-tst-role):has(p b) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-text-editor:not(.ayc-tst-quote):not(.ayc-tst-role):has(p strong) p,
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-text-editor:not(.ayc-tst-quote):not(.ayc-tst-role):has(p b) p {
  font-size: var(--fs-quote) !important;
  line-height: 29px;
}

/* SUBTÍTULO ('Cada historia que acompañamos deja una huella.') por DEBAJO del
   lead. RONDA 2 (jun-2026): era el ÚNICO literal de texto real (18px) fuera de la
   escala → TOKENIZADO. Medido en el PDF: cap-height de la 'C' = 14.4px CSS @1440 →
   font ≈20px, así que --fs-body (21, suelo de cuerpo generoso del proyecto) es el
   paso de escala correcto y respeta el piso de legibilidad. Queda en peso REGULAR
   (no bold) → visualmente bajo el lead bold sin necesidad de un tamaño huérfano.
   EXCLUIMOS la cita .ayc-tst-quote y el rol .ayc-tst-role del card. Compartido. */
.ayc-native.ayc-native[data-id$="-test-sec"] .elementor-widget-text-editor:not(.ayc-tst-quote):not(.ayc-tst-role):not(:has(p strong)):not(:has(p b)) p {
  font-size: var(--fs-body) !important;
  line-height: 1.4;
}

/* (Las flechas .ayc-tst-nav y los dots .ayc-tst-dots del antiguo widget HTML ya
   NO existen: el componente nativo usa chevrons icon .ayc-tst-chev — estilados
   arriba, igual que el Home. Reglas .ayc-tst-nav/.ayc-tst-dots eliminadas.) */

/* ============================================================
   7) CTA FINAL "Avanza con claridad…" — ESTÁNDAR (compartido por las 3
      páginas de servicio). PÁGINA BLANCA + TARJETA gris-claro redondeada
      que contiene el bloque (H2 navy + subtítulo gris-teal + botón pill
      verde), todo verticalmente centrado con aire generoso.
   Real DOM: sección [data-id$="-cta-sec"] (.ayc-native top-level, e-con-full,
   clase DOBLADA SIN espacio) > UN contenedor hijo e-con-full (la TARJETA,
   p.ej. advx961c09 en Advisors) > heading (H2) + text-editor (subtítulo) +
   button (.ayc-d-btn).
   DISEÑO (gaps ronda 1): fondo de página BLANCO; tarjeta #F2F2F2 (≈--ayc-paper
   #f3f4f2), radio ~18px, insets laterales ~94px (max ~1240 centrada); ~64-72px
   de aire arriba/abajo dentro de la tarjeta; H2 navy legible; subtítulo lead
   gris-teal; botón pill verde de marca generoso (~460×50, label ~23px).
   ============================================================ */

/* SECCIÓN = PÁGINA BLANCA. post-78.css fija el fondo NAVY con
   .elementor-78 .elementor-element.elementor-element-adv-cta-sec (spec 0,3,0)
   que CONTINUABA la banda navy de testimonios. La clase DOBLE (0,3,0) solo
   empata y pierde por orden de carga → CUÁDRUPLE clase (0,5,0) le gana sin
   !important. background-color sólido (no hay imagen que lazy-load afecte). */
.ayc-native.ayc-native.ayc-native.ayc-native[data-id$="-cta-sec"] {
  background-color: var(--ayc-white);
}
/* Ritmo vertical de la sección: el contenido (la tarjeta) va centrado con aire
   arriba/abajo (la sección antes tenía padding 0 → tarjeta pegada a ambos
   bordes). ~70px de aire blanco sobre/bajo la tarjeta, y centrado horizontal. */
.ayc-native.ayc-native[data-id$="-cta-sec"] {
  padding-top: 70px;
  padding-bottom: 70px;
  align-items: center;          /* centra la tarjeta horizontalmente (flex column) */
  justify-content: center;
}
/* [2026-06-25 P4] RAYA VERDE al FINAL del CTA (degradado transparente→verde→transparente) +
   animación de carga (scaleX). Es lo que el cliente pedía en los CTA (no en las features). */
.ayc-native.ayc-native[data-id$="-cta-sec"] > .e-con { position: relative; }
/* [2026-06-25] EXCLUIR el CTA de Quiénes Somos ("Queremos conocer tu historia"): QS reusa
   servicios-shared.css por sufijo, pero su CTA NO lleva línea verde en el diseño. La línea verde
   queda solo en los CTA de las 3 páginas de servicio (Accountants/Advisors aquí + Ayuda en su css). */
.ayc-native.ayc-native[data-id$="-cta-sec"]:not([data-id="qs-cta-sec"]) > .e-con::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--ayc-green) 20%, var(--ayc-green) 80%, transparent);
  /* [2026-06-25] anima al ENTRAR en viewport (efecto dibujado), igual que el intro card de Contacto.
     El JS (animations.js) añade .ayc-line-animate a la sección al hacer scroll. Antes era animación de
     CARGA → terminaba antes de llegar al CTA (está abajo) y no se veía. */
  transform: scaleX(0); transform-origin: left center; transition: transform 1.1s ease-out;
}
.ayc-native.ayc-native[data-id$="-cta-sec"].ayc-line-animate:not([data-id="qs-cta-sec"]) > .e-con::after { transform: scaleX(1); }

/* TARJETA gris-claro = el contenedor hijo directo de la sección (e-con-full).
   bg --ayc-paper (#f3f4f2 ≈ #F2F2F2 del PDF), radio 18px, insets laterales por
   margin auto + max-width ~1240 → ~94px de aire a cada lado en 1440. Padding
   vertical 64px + lateral 60px → el bloque respira y queda centrado. Flex
   COLUMN centrada con gaps generosos H2→sub→botón. La sección es e-con-full
   (sin .e-con-inner): la TARJETA es el primer contenedor hijo. */
.ayc-native.ayc-native[data-id$="-cta-sec"] > .e-con {
  background: var(--ayc-paper, #f2f2f2);
  border-radius: 18px;
  max-width: 1296px;            /* PDF: tarjeta ~1296px, inset ~72px/lado en 1440 (antes 1240/inset 100) */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 54px 50px;           /* v 64→54 (gap ronda 3: tarjeta más PLANA ~335-345px vs PDF ~332px) ·
                                   lateral 50 → contenido 1296−100=1196px → la línea 2 del H2 (44px = 1168px)
                                   entra natural en UNA línea (sin <br> extra, sin reducir fuente) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;                    /* aire H2→subtítulo→botón (respira, no pegado) */
  box-shadow: 0 6px 28px rgba(30,39,81,.08);
}
/* Si la tarjeta flexa en un .e-con-inner (contenedor boxed en otra página),
   replicamos ahí el layout centrado para que el bloque quede igual de centrado. */
.ayc-native.ayc-native[data-id$="-cta-sec"] > .e-con > .e-con-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

/* H2 navy LEGIBLE sobre la tarjeta gris (gap #2: antes navy-sobre-navy
   invisible). 48px = ESCALA H2-de-sección CONSOLIDADA de la página. El
   per-elemento post-78 fija color navy rgb(30,39,81) → al estar la tarjeta
   gris ahora lee con alto contraste; reafirmamos navy + centrado por si el
   per-página cambia. */
.ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-widget-heading .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-cta-title);   /* TOKEN CTA: 56px = TIER HERO (RONDA 3, PDF 50-59). El cliente lo
                                       quiere PROMINENTE como un hero, no el 34 de sección. */
  font-weight: 700;
  line-height: 1.15;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0;
}
/* SUBTÍTULO/LEAD gris-teal de marca, centrado (gap #5: antes blanco-sobre-navy
   ilegible). Paso de escala LEAD (--fs-h3 26px, claramente > body 22px). El <p>
   trae INLINE en el _elementor_data style="color:rgba(255,255,255,.85);
   font-size:18px;text-align:center" (spec 1,0,0,0, sobra de la era banda-navy)
   → un estilo inline solo se vence con !important. Forzamos gris-teal #839794
   (--ayc-muted), tamaño lead 26px y centrado. Compartido por las 3 páginas. */
.ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-widget-text-editor p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-cta-sub) !important;   /* TOKEN CTA subtítulo = 34px (RONDA 3, PDF Advisors 33 /
                                                Ayuda 34.8). Peso REGULAR (Futura Medium), gris-teal.
                                                Proporcional al título 56, algo menor que el hero-sub 40. */
  line-height: 1.4 !important;
  color: var(--ayc-muted) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* BOTÓN final — ESTILO CANÓNICO/GLOBAL del sitio (home-reference.md §2): rect
   border-radius:6px (NO pill ni 8px), verde #9dc41a, texto blanco Futura Bold
   21px, padding ~15px 40px (= CTA "Agenda una consulta" del Home, 305×51). El
   cliente NO quiere estilos de botón por página: unificado al canon (antes 29px/
   radius 8px/min-width 340px → botón sobredimensionado y divergente). post-78.css
   fija el verde Material rgb(76,175,80) con .elementor-78 .elementor-element.
   elementor-element-advx45fcf2 .elementor-button (spec 0,4,0) → CUÁDRUPLE clase +
   data-id de sección + .elementor-button (0,6,0) le gana sin !important. */
/* NOTA (jun-2026): hay DOS patrones de DOM para el wrapper .ayc-native entre las
   páginas con CTA: en Advisors/Accountants/Ayuda la clase vive en la PROPIA sección
   `-cta-sec` (selector COMPUESTO `.ayc-native…[data-id$="-cta-sec"]`); en Servicios la
   clase vive en un contenedor RAÍZ (`svcnatroot`) y la sección `svc-cta-sec` no la
   lleva → el compuesto NO casa y post-27.css (0,3,1: radius:50px pill + font Montserrat
   16px) ganaba. Añadimos la variante DESCENDIENTE `.ayc-native×4 [data-id$="-cta-sec"]`
   (0,5,1, vence post-N.css) para cubrir AMBOS casos sin tocar el data ni meter literales
   por página. Single source of truth del botón CTA en las 5 páginas. */
.ayc-native.ayc-native.ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-button,
.ayc-native.ayc-native.ayc-native.ayc-native [data-id$="-cta-sec"] .elementor-button {
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-button);              /* canónico del sitio */
  font-weight: 700;
  line-height: 1.3;
  border-radius: 6px;           /* canónico: rect, NO pill */
  padding: 15px 40px;           /* canónico CTA grande del Home */
  text-align: center;
  text-decoration: none;
  border: 0;
  white-space: nowrap;          /* la etiqueta "Agenda una consulta" en UNA línea (regla #7) */
}
.ayc-native.ayc-native.ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-button:hover,
.ayc-native.ayc-native.ayc-native.ayc-native [data-id$="-cta-sec"] .elementor-button:hover {
  background: var(--ayc-green-dark);
  color: var(--ayc-white);
}
/* El wrapper del botón centra (Elementor ya pone elementor-align-center, pero
   reafirmamos por si el data difiere entre páginas). */
.ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-widget-button,
.ayc-native.ayc-native [data-id$="-cta-sec"] .elementor-widget-button {
  text-align: center;
  width: 100%;
}

/* ESENCIA — matar la 3a familia (Open Sans inline del _elementor_data) en las 3
   paginas de servicio: subtitulo de enfasis + parrafo de cuerpo deben usar la
   FUENTE DE MARCA (Futura), no Open Sans. !important vence el font-family inline.
   Compartido por sufijo (adv-/acc-/ac-esencia-content|-sec). Invariante <=2 familias. */
.ayc-native.ayc-native [data-id$="-esencia-content"] p,
.ayc-native.ayc-native [data-id$="-esencia-content"] p strong,
.ayc-native.ayc-native [data-id$="-esencia-content"] p span,
.ayc-native.ayc-native [data-id$="-esencia-content"] strong,
.ayc-native.ayc-native [data-id$="-esencia-sec"] p,
.ayc-native.ayc-native [data-id$="-esencia-sec"] p strong,
.ayc-native.ayc-native [data-id$="-esencia-sec"] span {
  font-family: var(--ayc-font-body) !important;
}

/* ESENCIA — BANDA COMPACTA (~375px como el PDF/Advisors). El _elementor_data trae
   min-height:640px inline → banda 2x demasiado alta con espacio muerto enorme (el
   cliente: "totalmente malo"). El tuning vivia solo en ayc-advisors.css → Accountants
   no lo heredaba. Ahora COMPARTIDO por sufijo. align-items:center centra el contenido. */
.ayc-native.ayc-native [data-id$="-esencia-content"] > div {
  min-height: 375px !important;
}
/* ESENCIA — TEXTO BLANCO sobre la banda navy (PDF: titulo, subtitulo y body en blanco;
   en vivo el subtitulo "Lo hacemos simple..." salia verde). Triple clase + !important
   para vencer el color inline/por-pagina. El divisor verde es borde, no se afecta. */
.ayc-native.ayc-native.ayc-native [data-id$="-esencia-content"] p,
.ayc-native.ayc-native.ayc-native [data-id$="-esencia-content"] p strong,
.ayc-native.ayc-native.ayc-native [data-id$="-esencia-content"] p span,
.ayc-native.ayc-native.ayc-native [data-id$="-esencia-content"] h2,
.ayc-native.ayc-native.ayc-native [data-id$="-esencia-content"] h2 * {
  color: #ffffff !important;
}

/* ============================================================================
   RESEÑAS — AVATAR = DISCO DE INICIALES (2026-08-28)
   ----------------------------------------------------------------------------
   ANTES: el avatar era una FOTO DE STOCK que js/ayc-reviews.js asignaba POR
   POSICIÓN del array (`AVATARS[i % 12]`), sin ninguna relación con quien firma.
   Resultado: reseña de hombre con foto de mujer y al revés (queja del cliente).
   Además las 15 reseñas son REALES, con nombres REALES del perfil de Google de
   AYC: la cara de un desconocido al lado del testimonio es levemente engañosa.
   AHORA: círculo con las INICIALES (patrón Google Reviews / Gmail / Trustpilot).
   El JS quita el <img> y añade <span class="ayc-tst-ini ayc-tst-ini--TONO">.

   GEOMETRÍA: idéntica a la foto que sustituye — el span va absoluto a inset 0
   sobre .ayc-tst-ava (que ya es position:absolute → es su bloque contenedor), o
   sea 84×84px, radio 50%, aro 3px #9dc41a y la MISMA sombra. Anclarlo al wrapper
   (y no a figure/.elementor-image) lo hace inmune a las cajas intermedias que
   mete Elementor y al bridge `.elementor-widget-image{display:contents}`.

   COLOR: sale del NOMBRE (suma de charCodes % 3), NO del índice → la misma
   persona conserva su color aunque el carrusel la mueva de sitio. CONTRASTE
   MEDIDO (WCAG 2.x, todos ≥ 4.5:1):
     navy  #1e2751 + texto #ffffff = 14.34:1
     blue  #0075a9 + texto #ffffff =  5.10:1
     green #9dc41a + texto #1e2751 =  7.06:1
   OJO: blanco sobre el verde #9dc41a da 2.03:1 → NO se usa. El verde SIEMPRE
   lleva texto navy. (Sobre verde, el aro verde se funde con el fondo: el disco
   queda liso, pero el diámetro exterior sigue siendo 84px → 0 descuadre.)

   TIPOGRAFÍA: var(--ayc-font-head) (Futura Bold) a peso 700 — Futura Bold ES
   700; 800 sintetiza faux-bold. Tamaño = var(--fs-proc-num) (34px), el token
   del glifo centrado en disco de marca (numeral del "proceso"), mismo rol
   visual y NO se redefine en @media → estable en los 3 breakpoints.
   ============================================================================ */
.ayc-native .ayc-tst-card .ayc-tst-ava .ayc-tst-ini {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; box-sizing: border-box !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  border: 3px solid var(--ayc-green) !important;      /* mismo aro verde que la foto */
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;   /* misma sombra que la foto */
  font-family: var(--ayc-font-head) !important;
  font-weight: 700 !important;                        /* NUNCA 800 (faux-bold) */
  font-size: var(--fs-proc-num) !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  padding-left: 1px !important;   /* compensa el letter-spacing de la ÚLTIMA letra → centrado óptico */
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  -webkit-user-select: none !important; user-select: none !important;
  z-index: 1 !important;
}
.ayc-native .ayc-tst-card .ayc-tst-ava .ayc-tst-ini--navy {
  background-color: var(--ayc-navy) !important;  color: #ffffff !important;      /* 14.34:1 */
}
.ayc-native .ayc-tst-card .ayc-tst-ava .ayc-tst-ini--blue {
  background-color: var(--ayc-blue) !important;  color: #ffffff !important;      /*  5.10:1 */
}
.ayc-native .ayc-tst-card .ayc-tst-ava .ayc-tst-ini--green {
  background-color: var(--ayc-green) !important; color: var(--ayc-navy) !important; /* 7.06:1 — blanco aquí daría 2.03:1 */
}
/* Red de seguridad: si por una carrera de render quedara el <img> de la foto en
   un avatar que YA tiene iniciales, no se solapan. Va con :has() para NO tocar
   el caso degradado (JS caído / sin Swiper) en el que las 3 cards originales de
   Elementor siguen mostrando su imagen: ahí no hay .ayc-tst-ini y el img se ve. */
.ayc-native .ayc-tst-card .ayc-tst-ava:has(.ayc-tst-ini) img { display: none !important; }