/* ============================================================
   AYUDA CENTER (ID 29) — CSS POR-PÁGINA (nativo, flip 2026-06-18).
   Base ESTÁNDAR compartida = native/servicios-shared.css (hero, carrusel,
   proceso, por-qué, testimonios, CTA, footer) por SUFIJO de data-id:
     ac-hero-sec  → $="-hero-sec"   ac-svc-sec → $="-svc-sec" (carrusel .ayc-svc-*)
     ac-proc-sec  → $="-proc-sec"   acw-grid/acw-title → $="w-grid"/$="w-title"
     ac-test-sec  → $="-test-sec"   ac-cta-sec → $="-cta-sec"
   Aquí SOLO van las particularidades de Ayuda Center (imágenes/lados/contenido
   único): la banda "¿Qué hacemos?" (ac-que-sec, propia de esta página), la foto
   del hero, la foto del círculo del por-qué (CENTRADO, texto a ambos lados) y
   cualquier ajuste fino que NO deba tocar el shared. Scope: .ayc-native.ayc-native
   + data-id. SIN !important salvo para vencer un !important del legacy.
   Los agentes del workflow rellenan cada bloque tras medir vs el PDF (ac-crops/).
   ============================================================ */

/* ============================================================
   1) HERO (ac-hero-sec) — el shared da el layout; aquí la FOTO de fondo
      y cualquier overlay propio. (Builder: medir vs ac-crops/hero.png)
   ============================================================ */

/* RONDA 2 — distribución vertical del contenido en la banda navy.
   La sección es flex-direction:column con --min-height:85vh (≈765px @900),
   pero el bloque de contenido (boxed ac-hero-inner, ~378px) quedaba pegado
   ARRIBA (justify-content:normal del .e-con-full de Elementor; la regla
   compartida que ponía justify-content:flex-end NO llega a esta página),
   dejando ~397px de navy VACÍO debajo del disclaimer. Empujamos el bloque
   al fondo y dejamos ~30px de aire bajo el disclaimer, como el diseño
   (banda ≈736px, disclaimer ~31px del borde inferior). Sólo Ayuda Center
   (no toca el shared → Advisors/Accountants intactos). El selector doblado
   gana al .elementor-element:where(.e-con-full…){justify-content:var(...)}. */
.ayc-native.ayc-native[data-id="ac-hero-sec"] {
  justify-content: flex-end;
  /* 20px aquí + 10px del padding-bottom del .e-con-inner boxed = ~30px de aire
     real bajo el disclaimer, sobre el borde inferior de la banda navy. */
  padding-bottom: 20px;
}

/* RONDA 3 — gaps del auditor (SOLO Ayuda Center; NO toca el shared, así
   Advisors/Accountants quedan intactos).

   (major) Subtítulo H2 a TODO el ancho (w=1200, 2 líneas). El PDF lo muestra en
   columna angosta ~mitad izquierda envolviendo en ~3 líneas. Capamos el bloque
   de texto del hero (H1+sub+botón) a ~600px → el subtítulo vuelve a ~3 líneas
   SIN reducir la fuente. Capamos el H2 (y H1/botón heredan el ancho de columna
   del inner boxed; el cap explícito al H2 garantiza el wrap). */
.ayc-native.ayc-native[data-id="ac-hero-sec"] [data-id="ac-hero-sub"] h2.elementor-heading-title,
.ayc-native.ayc-native[data-id="ac-hero-sec"] [data-id="ac-hero-sub"] .elementor-heading-title {
  max-width: 880px;   /* el font-size lo da shared (--fs-hero-desc 45px); ~880px → ~3 líneas natural sin sobre-partir */
}

/* (minor) Disclaimer alineado al MARGEN de contenido (⚠ arranca ~x113 como
   H1/sub/botón), NO centrado ni a full-bleed. Vencemos el centrado del shared
   ($="-hero-sec"): deshacemos el truco left:50%/translateX/width:max-content y
   lo dejamos alineado a la izquierda dentro de la columna de 1200px. */
.ayc-native.ayc-native[data-id="ac-hero-sec"] .elementor-widget-text-editor p,
.ayc-native.ayc-native [data-id="ac-hero-legal"] p {
  text-align: left !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (minor, baja-confianza confirmada vs ac-crops/hero.png por muestreo: la foto
   del PDF lee ~30-50% MÁS clara que el render en la zona del documento "VISA
   APPLICATION"). Aclaramos el overlay navy SOLO en Ayuda Center (no toca el
   shared → Advisors/Accountants conservan su overlay). Reducimos ambas capas:
   la diagonal de marca (.78→.45 izq, derecha casi transparente para que las
   personas/foto se vean claras como el PDF) y la vertical inferior (.62→.46)
   manteniendo contraste del disclaimer abajo-izq. Vence al ::before del shared
   por especificidad de clase doblada + !important (el shared usa !important). */
.ayc-native.ayc-native[data-id="ac-hero-sec"]::before {
  /* Filtro azul de marca CANÓNICO (unificado 2026-06-23) — antes navy con centro
     transparente → la foto (familia, muy clara) se veía cruda sin azul. Ahora azul
     de marca cubriendo TODA la altura, como el resto de heroes. */
  background: linear-gradient(180deg,
      rgba(0,73,116,0.50) 0%,
      rgba(30,39,81,0.70) 100%) !important;
}

/* ============================================================
   2) ¿QUÉ HACEMOS? (ac-que-sec) — ÚNICO de Ayuda Center: banda gris clara,
      intro centrada + grid de 6 icon-box (iconos verde-outline + título navy)
      + outro centrada. (Builder R1: medido vs ac-crops/que.png + ac-full-1.png;
      iconos reales de recursos/img_ayuda-center, ya subidos a uploads/2026/04/
      ac-iconN.png == Recurso 13..18.)

   Hallazgos R1 (getBoundingClientRect @1440):
   · background_color #F4F5F7 del _elementor_data NO pinta (sec transparente) →
     re-aseguramos la banda gris #efefef (muestreado del PDF) en CSS.
   · icon-box renderiza el GLYPH FA (icon_type:image se ignora en icon-box) →
     ocultamos el glyph con opacity:0 (NO display:none, conserva caja) y pintamos
     el PNG real como background-image en .elementor-icon-box-icon por data-id.
   · layout era flex-column centrado → diseño = icono IZQUIERDA + título navy
     bold a la derecha, alineado izquierda, 3 columnas iguales × 2 filas.
   · escala: título 44 (=--fs-h1, no 48), intro/outro body 22 gris-teal --ayc-muted,
     sub "Trabajamos…" 26 (=--fs-h3) navy bold, títulos de tarjeta 22 navy bold.
   ============================================================ */

/* --- Banda gris clara (el background_color del data no aplica) --- */
.ayc-native.ayc-native[data-id="ac-que-sec"] {
  background-color: #efefef;
}

/* --- Título de sección: ESCALA H2-de-sección CONSOLIDADA = 48px (R2: igualar a
   Nuestros Servicios / Proceso / Por qué / Testimonios / Da el primer paso, que
   renderizan 48px literal en servicios-shared.css — NO --fs-h1=44px, ese token
   gobierna heros/CTA). line-height proporcional al glifo (~1.25) en vez de heredar
   el 25.6px del kit (la caja contenía menos que la cap-height). --- */
.ayc-native.ayc-native [data-id="ac-que-title"] .elementor-heading-title {
  font-size: var(--fs-section);
  line-height: 1.25;
  /* FAMILIA explícita = Futura Bold (igual que el resto de H2 de sección). Antes el
     _elementor_data fijaba Montserrat per-widget (post-29.css, 0,2,1) y ganaba al
     scope; tras quitarlo, fijamos aquí el token de marca para blindar la herencia. */
  font-family: var(--ayc-font-head);
}

/* --- Intro y outro: párrafo body 22 gris-teal de marca, centrado --- */
.ayc-native.ayc-native [data-id="ac-que-desc"] p,
.ayc-native.ayc-native [data-id="ac-que-foot"] p {
  font-size: var(--fs-body, 22px);
  color: var(--ayc-muted, #839794);
  line-height: 1.55;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
/* R3: intro wrapeaba a 3 líneas con max-width:1000px; el PDF la muestra en ~2
   líneas (~992px de glifo). Hay sitio (sección 1425px) → ensanchamos SOLO la
   intro a 1180px para que wrapee natural a 2 líneas (sin <br>, sin bajar la
   fuente: se mantiene el body-floor de 22px). La outro queda en 1000px. */
.ayc-native.ayc-native [data-id="ac-que-desc"] p {
  max-width: 1180px;
}
/* outro un punto más claro (nota secundaria), mismo tamaño (elementos equivalentes) */
.ayc-native.ayc-native [data-id="ac-que-foot"] p {
  color: #9aa6a6;
}

/* --- Sub "Trabajamos con…": navy bold, escala --fs-h3 (26), > body --- */
.ayc-native.ayc-native [data-id="ac-que-sub"] .elementor-heading-title {
  font-size: var(--fs-h3, 26px);
  line-height: 1.25;   /* R2: proporcional al glifo (26px → ~33px), no el 25.6px heredado del kit */
  color: var(--ayc-navy, #1e2751);
  font-family: var(--ayc-font-head);
  /* shrink-wrap al ancho del TEXTO + centrado → el subrayado (::after 100%) abarca
     exactamente el ancho del título (pedido cliente: la línea debe cubrir todo el título). */
  width: fit-content;
  margin: 14px auto 0;
}
/* Subrayado verde = ANCHO COMPLETO del título (100% del heading, ya shrink-wrapeado). */
.ayc-native.ayc-native [data-id="ac-que-sub"] .elementor-heading-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: var(--ayc-green, #9dc41a);
  margin: 14px auto 0;
}

/* --- GRID: 3 columnas iguales × 2 filas (pitch ~380px en el PDF) --- */
.ayc-native.ayc-native [data-id="ac-que-grid"] > .e-con-inner,
.ayc-native.ayc-native [data-id="ac-que-grid"].e-con > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: 56px;
  row-gap: 30px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
/* cada item: 3 por fila (≈33% menos gaps) */
.ayc-native.ayc-native [data-id="ac-que-grid"] [data-id^="ac-qi"] {
  flex: 0 0 300px;
  max-width: 300px;
}

/* --- icon-box: icono IZQUIERDA + texto a la derecha, alineado izquierda --- */
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
}
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-icon {
  margin: 0;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  /* el PNG real verde-outline (set per data-id abajo) */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}
/* ocultar el glyph FA SIN perder la caja (opacity, NO display:none) */
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-icon .elementor-icon,
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-icon i {
  opacity: 0;
}
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-content {
  text-align: left;
}
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-title {
  margin: 0;
}
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-title,
.ayc-native.ayc-native [data-id^="ac-qi"] .elementor-icon-box-title span {
  font-size: var(--fs-body, 22px);
  line-height: 1.25;
  color: var(--ayc-navy, #1e2751);
  /* PESO: el PDF de Ayuda muestra estos 6 ítems ("Estudiar o trabajar temporalmente",
     "Reunirse con sus seres queridos", etc.) en REGULAR/medium, NO en negrilla (jun-2026,
     el bold era el de la subsección "Trabajamos con personas…", no el de los ítems).
     Familia = cuerpo (Futura Medium) + weight 400 para que rinda regular real.
     !important: el style.css del tema padre fija .elementor-widget-icon-box
     .elementor-icon-box-title { font-weight:800 !important } → solo se vence con !important. */
  font-family: var(--ayc-font-body) !important;
  font-weight: 400 !important;
  text-align: left;
}

/* --- iconos reales (PNG exportados, == Recurso 13..18), uno por slot ---
   !important OBLIGATORIO: la sección "Trabajamos con…" es el 4º+ contenedor
   top-level, así que el experimento "Lazy Load Background Images" de Elementor
   inyecta un <style> INLINE con
     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * { background-image:none !important }
   (spec 0,5,0 + !important + combinador descendente '*') que MATA el background
   del icono hasta que la sección entra en viewport (.e-lazyloaded en scroll). Sin
   scroll → icono invisible y el glyph FA queda en opacity:0 → "no hay icono"
   (falso-positivo del auditor: gotcha 7f). Re-afirmamos el PNG con !important para
   que pinte SIEMPRE, también above-the-fold / antes del scroll. */
/* spec (0,6,0) para vencer SIN AMBIGÜEDAD al inline 0,5,0+!important de lazy-load
   (4× .ayc-native = 0,4,0 + [data-id] + .elementor-icon-box-icon = 0,6,0 > 0,5,0,
   así no depende del orden inline-vs-enlazado). */
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="ac-qi1"] .elementor-icon-box-icon { background-image: url(/wp-content/uploads/2026/04/ac-icon1.png) !important; }
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="ac-qi2"] .elementor-icon-box-icon { background-image: url(/wp-content/uploads/2026/04/ac-icon2.png) !important; }
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="ac-qi3"] .elementor-icon-box-icon { background-image: url(/wp-content/uploads/2026/04/ac-icon3.png) !important; }
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="ac-qi4"] .elementor-icon-box-icon { background-image: url(/wp-content/uploads/2026/04/ac-icon4.png) !important; }
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="ac-qi5"] .elementor-icon-box-icon { background-image: url(/wp-content/uploads/2026/04/ac-icon5.png) !important; }
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="ac-qi6"] .elementor-icon-box-icon { background-image: url(/wp-content/uploads/2026/04/ac-icon6.png) !important; }

/* ============================================================
   3) NUESTROS SERVICIOS (ac-svc-sec) — CARRUSEL COMPARTIDO (.ayc-svc-*),
      1 card visible (pedido cliente para las 3 páginas), CTA medio-caballo.
      Reconstruir cards al formato .ayc-service-card como Accountants (sin tabs).
      Aquí solo overrides de contenido si hicieran falta. (vs ac-crops/svc.png)
   ============================================================ */

/* ============================================================
   4) CONOCE NUESTRO PROCESO (ac-proc-sec) — banda navy/teal, 7 pasos (4+3),
      badges verdes numerados + FLECHAS animadas iguales al home/Advisors/
      Accountants (animations.js). Cards, tamaños y tipos de letra = shared.
      (vs ac-crops/proc.png)

   El COMPONENTE (banda gradiente, badge, counter, título/desc, flechas
   .ayc-home-arrow) viene ÍNTEGRO de servicios-shared.css vía $="-proc-sec"/
   $="-proc-grid"/$="-proc-title" + animations.js (línea 613:
   {svc:'ac-svc-sec', proc:'ac-proc-grid'}). Aquí SOLO cambia el LAYOUT del
   grid: el shared usa repeat(3,1fr) (6 pasos 3+3 de Advisors/Accountants),
   pero Ayuda Center tiene 7 pasos y el PDF los dispone 4 (fila1) + 3 (fila2
   CENTRADA). Medido en ac-crops/proc.png (banda full-bleed ≈1440, inner 1200):
   · fila1 cards en 7.8%→92.1% → 4 columnas que LLENAN el inner de 1200px.
   · fila2 (3 cards) en 18.5%→81.5% → CENTRADA (offset ≈10.7%×1440≈154px/lado),
     que es exactamente lo que da 3 cards + justify-content:center en el mismo
     ancho de card/gap. → flex-wrap + justify:center con card de base fija.
   Card ancho ≈282px (≈ (1200−3×24)/4), gap-col 24px → fila2 centrada cae bajo
   las columnas 1.5..3.5 igual que el PDF. Sin tocar el shared (no rompe
   Advisors/Accountants, que siguen en repeat(3,1fr)).
   ============================================================ */
/* Anulamos el grid de 3-col del shared SOLO en Ayuda Center (sufijo de página
   ac-proc-grid; especificidad 0,3,0 con clase doblada + 0,3,1 vence al
   0,3,1 del shared por orden de carga: ayuda-center.css se enlaza DESPUÉS). */
.ayc-native.ayc-native [data-id="ac-proc-grid"] > .e-con-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  grid-template-columns: none;   /* desarma el grid heredado del shared */
  gap: 79px 24px;                /* fila ~79px (badge solapa −40px) · columna 24px (PDF) */
}
/* Cada paso = card de ancho fijo (4 caben en fila1; las 3 restantes centran
   en fila2). flex:0 0 282px → 4×282 + 3×24 = 1200 (inner exacto). En flex se
   pierde grid-auto-rows:1fr → igualamos altura con min-height (ya en shared
   min-height:228px; aquí solo aseguramos que crezca a la card más alta de la
   misma fila vía align-items:stretch + height de la card). */
/* Subtítulo "Así te acompañamos:" — el shared sólo pinta -proc-title (blanco
   48px); este segundo heading (-proc-sub) es propio de Ayuda Center (las otras
   2 páginas no lo tienen) y traía inline title_color:#374151 (gris oscuro,
   ILEGIBLE sobre la banda teal) + 44px (casi tan grande como el título). El PDF
   lo muestra BLANCO y claramente secundario (~½ del título). Medido en el crop:
   cap-height ≈17px×(1440/2934)→ fs≈28px. Lo forzamos blanco 28px, peso normal,
   centrado, con un poco de aire bajo el título. Scope de página (data-id exacto)
   → no afecta a Advisors/Accountants. */
.ayc-native.ayc-native [data-id="ac-proc-sub"] .elementor-heading-title {
  color: var(--ayc-white, #ffffff);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  /* FAMILIA: subtítulo ligero → Futura Medium (cuerpo), NO Bold. Una vez quitado el
     override per-widget Open Sans del _elementor_data, este heading H3 heredaría
     --ayc-font-head (Bold) del scope; lo fijamos a --ayc-font-body para el peso ligero
     que pide el diseño. (Invariante: 0 familias ajenas, solo las 2 Futura.) */
  font-family: var(--ayc-font-body);
}
/* RITMO título→subtítulo→grid. El shared fija -proc-title{margin-bottom:67px}
   (pensado para páginas SIN subtítulo, donde es el hueco título→cards). Aquí el
   subtítulo se intercala → ese 67px empuja el subtítulo demasiado abajo (87px) y
   deja el subtítulo pegado al grid (20px). Lo corregimos en scope de página:
   título→subtítulo CERCA (~18px, leen como UN bloque de cabecera, como el PDF) y
   el aire GENEROSO va bajo el SUBTÍTULO (~70px; +40px de solape del badge ⇒
   ~110px subtítulo→card visibles, ritmo del PDF). */
.ayc-native.ayc-native[data-id="ac-proc-sec"] [data-id="ac-proc-title"] {
  margin-bottom: 18px;
}
.ayc-native.ayc-native [data-id="ac-proc-sub"] {
  margin-bottom: 70px;
}

.ayc-native.ayc-native [data-id="ac-proc-grid"] .elementor-widget-icon-box {
  /* [2026-08-27 AC2] 282 -> 255px: cards más compactas, como pide el PDF. */
  flex: 0 0 272px;
  max-width: 272px;
  /* [2026-08-27 AC3] padding lateral 16 -> 14 (shared: 75px 16px 22px). Son 4px más
     de caja de texto (240 -> 244) que NO se ven pero doblan la holgura del título
     más largo (ac-p6 necesita 236px a 18.5px): 4px -> 8px de margen. Medido: no
     cambia el nº de líneas de NINGUNA descripción, así que no altera alturas. */
  padding-left: 14px;
  padding-right: 14px;
  /* En flex se pierde grid-auto-rows:1fr → fila2 (descripciones largas de los
     pasos 5/7) crecía a 305px y fila1 quedaba en 277px. Fijamos min-height a la
     card más alta para que las 7 igualen altura como el PDF (todas las cards del
     proceso son iguales). 305px = alto medido de la card más alta a 1440. */
  min-height: 270px;   /* [2026-08-27 AC2] 305 -> 270: al caber los títulos en 2 líneas sobra alto */
}

/* ============================================================
   5) POR QUÉ ELEGIRNOS (ac-why-sec / acw-grid / acw-title) — círculo CENTRADO
      con beneficios a IZQUIERDA y DERECHA; el texto de AMBOS lados forma margen
      REDONDA contra el círculo. Foto propia del círculo. Check verde real.
      (vs ac-crops/why.png; referencia de wrap: Accountants accw-grid)

   DIFERENCIA con Advisors/Accountants: allí el círculo va a UN lado (float) y una
   SOLA columna abraza UNA curva. Aquí el círculo va CENTRADO y hay DOS columnas que
   abrazan AMBAS curvas. Para que shape-outside recorte de verdad, CADA columna debe
   ser UN bloque con UN disco flotado alto = al círculo y centrado vertical sobre la
   masa de sus 2 beneficios (igual que Accountants flota un solo círculo en accw-grid
   y los 5 ítems lo abrazan). Por eso el _elementor_data se reestructuró: acw-grid
   ahora tiene acw-col-left (ac-w1+ac-w3) · acw-col-right (ac-w2+ac-w4) · ac-w5.
   El disco es ::before del .e-con-inner de cada columna (mismo BFC que las desc).
   Validado en vivo: con disco float real + circle(R) el texto curva (amp medido).
   Un disco por ÍTEM (texto sólo arriba del disco → arco casi vertical) daba amp<20:
   por eso una columna ENTERA por disco, centrado, que es donde el arco es diagonal.
   shared §4 ya dejó acw-grid display:block+relative+overflow:visible y estiló
   check/título/desc; aquí va el LAYOUT de columnas + foto central + discos.
   ============================================================ */
/* ------------------------------------------------------------------
   RONDA 3 — MARGEN REDONDA REAL (shape-outside circular por columna).
   Diagnóstico del auditor: el círculo era un ::after ABSOLUTO (fuera de
   flujo) → el texto no lo podía envolver; y los shapers vivían en el
   ::before de CADA <p> (arco local débil, amp≈0). Bordes internos PLANOS.

   Fix (técnica Accountants accw-grid adaptada al círculo CENTRADO, validado
   en vivo): el inner de acw-grid se parte en DOS columnas FLOTADAS de 590px
   (block, NO flex — el flex mata el float). En CADA columna, el PRIMER hijo
   es un FLOAT-SHAPER real (::before de la columna) = un rectángulo de ancho
   = radio del círculo, alto = diámetro, con shape-outside:circle() anclado al
   borde INTERIOR. Como NINGÚN descendiente de la columna abre un BFC nuevo
   (icon-box / wrapper / content son display:block, overflow:visible — medido),
   el float de la columna recorta TODAS las líneas de los 2 beneficios de esa
   columna → el borde interno del texto sigue la curva (corto en el ecuador,
   largo arriba/abajo). La FOTO visible es un elemento absoluto centrado en x
   sobre el hueco que dejan los dos shapers (la foto no envuelve; los shapers,
   invisibles, son los que envuelven — modelo aprobado por el auditor).
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   RONDA 4 — MARGEN REDONDA REAL con SHAPER FLOTADO NATIVO (validado en vivo
   midiendo amplitud >150px en ambas columnas a 1440).

   POR QUÉ falló la ronda 3: el shaper era el ::before de .e-con (columna).
   MEDIDO en vivo: aunque computa float:right/left + position:static +
   shape-outside:circle(...) correctos, el ::before de un contenedor Elementor
   NO se comporta como un float en-flujo real → NO recorta las líneas
   (amplitud derecha ≈4px, plano). Un ELEMENTO DOM real flotado como PRIMER
   hijo de la columna SÍ recorta TODAS las líneas de los 2 icon-box (ninguno
   abre BFC: wrapper/content/desc son display:block overflow:visible →
   medido amplitud 170-240px). Por eso se añadió un widget SPACER nativo
   (acw-shaper-l / acw-shaper-r) como primer hijo de cada columna en
   _elementor_data: queda editable y da el float DOM real.

   GEOMETRÍA (medida): círculo COMPLETO (width=height=diámetro, circle()) por
   columna; el ecuador cae en el HUECO entre los 2 beneficios → el beneficio de
   arriba abraza el arco superior y el de abajo el inferior, SIN que ninguna
   línea se meta bajo la foto (la curva nunca cruza el centro x=713). La foto
   visible es el ::after absoluto centrado sobre los dos shapers.
   ------------------------------------------------------------------ */
:root {
  /* RONDA 4 (cierre): el shaper de cada columna ahora COINCIDE con la foto
     (centro x=713 = centro del inner, mismo Ø) — antes el círculo de exclusión
     vivía centrado en el borde de la columna (x=503/923) y el texto envolvía un
     círculo fantasma desplazado ~210px → hueco muerto a la foto. Medido a 1440:
     colL amp=202px / colR amp=75px (>40), texto a ~10-40px de la curva real. */
  --acw-d: 440px;               /* diámetro del círculo (foto + shaper) */
  --acw-r: 220px;               /* radio = --acw-d/2 */
  --acw-air: 66px;              /* shape-margin: aire redondo GENEROSO y CONSISTENTE texto↔curva. RONDA 2:
                                   subo 48→66 en línea con Advisors(70)/Accountants(66) para que el MÍNIMO real
                                   borde-texto→curva llegue a ~48px (cliente: "muy pegados"). Aplica por igual a
                                   ambos shapers (izq/der) → el centrado y el doble arco NO cambian (mismo Ø,
                                   mismo centro, anclado a 100%/0% 50%), solo crece el aire. */
  --acw-colw: 590px;            /* media-banda: inner 1180/2 → borde interior en el centro (x=713) */
  --acw-mt: -30px;              /* margin-top del shaper: sube el ecuador del círculo */
}

/* inner block centrado; aire vertical superior */
.ayc-native.ayc-native [data-id="acw-grid"] > .e-con-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 24px;
}

/* FOTO circular CENTRADA (absoluta, solo decorativa: el hueco lo reservan los
   shapers de cada columna). Centro en x=50% (centro del inner), centro en y al
   nivel del centro de los shapers (= padding-top 24 + --acw-mt + --acw-r). */
.ayc-native.ayc-native [data-id="acw-grid"] > .e-con-inner::after {
  content: "";
  position: absolute;
  top: calc(24px + var(--acw-mt) + var(--acw-r));
  left: 50%;
  width: var(--acw-d);
  height: var(--acw-d);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* [2026-08-27] FOTO REAL. Sustituye la imagen generada por IA (ac-why-circle.png)
     por una foto de oficina AYC (IMG_6718, crop cuadrado 1365² → 1100²). Origen
     cuadrado ⇒ el recorte circular no descentra nada y ninguna cabeza queda cortada.
     El .bak de la IA queda en uploads/ayc-photos/ac-why-circle.png.pre-fotos-reales-20260827.bak */
  background: url('/wp-content/uploads/ayc-photos/ac-why-circle-real.jpg') center/cover no-repeat;
  box-shadow: 0 8px 28px rgba(20,30,60,0.14);
  z-index: 1;
  pointer-events: none;
}

/* ---- COLUMNAS: block + float (el flex de Elementor mataría el float DOM) ---- */
.ayc-native.ayc-native [data-id="acw-col-left"],
.ayc-native.ayc-native [data-id="acw-col-right"] {
  display: block;
  width: var(--acw-colw);
  position: relative;
  z-index: 2;
  padding-bottom: 30px;
}
.ayc-native.ayc-native [data-id="acw-col-left"]  { float: left; }
.ayc-native.ayc-native [data-id="acw-col-right"] { float: right; }

/* ---- SHAPER FLOTADO REAL (widget spacer nativo, primer hijo de la columna).
   Círculo COMPLETO con shape-outside:circle() → recorta las líneas de los 2
   beneficios de la columna siguiendo el arco. Invisible (sin fondo): la foto
   la pinta el ::after centrado. El widget spacer trae wrappers internos
   (.elementor-widget-container) que NEUTRALIZAMOS para que el float sea el
   propio .elementor-element. ---- */
.ayc-native.ayc-native [data-id="acw-shaper-l"],
.ayc-native.ayc-native [data-id="acw-shaper-r"] {
  width: var(--acw-d);
  height: var(--acw-d);
  border-radius: 50%;
  shape-margin: var(--acw-air);
  margin: var(--acw-mt) 0 0 0;
  background: none;
  pointer-events: none;
}
/* el spacer no debe aportar altura propia ni romper el float */
.ayc-native.ayc-native [data-id="acw-shaper-l"] .elementor-widget-container,
.ayc-native.ayc-native [data-id="acw-shaper-r"] .elementor-widget-container,
.ayc-native.ayc-native [data-id="acw-shaper-l"] .elementor-spacer,
.ayc-native.ayc-native [data-id="acw-shaper-r"] .elementor-spacer,
.ayc-native.ayc-native [data-id="acw-shaper-l"] .elementor-spacer-inner,
.ayc-native.ayc-native [data-id="acw-shaper-r"] .elementor-spacer-inner {
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* IZQUIERDA: shaper flotado a la DERECHA dentro de col-left (borde col = x713).
   El círculo de exclusión se ANCLA al borde derecho del box (= centro foto x713)
   con `at 100% 50%` → coincide con la foto (513..913) en vez del centro del box
   (503). El borde DERECHO del texto abraza la curva IZQUIERDA del círculo. */
.ayc-native.ayc-native [data-id="acw-shaper-l"] {
  float: right;
  shape-outside: circle(var(--acw-r) at 100% 50%);
}
/* DERECHA: shaper flotado a la IZQUIERDA dentro de col-right (borde col = x713).
   El círculo de exclusión se ANCLA al borde izquierdo del box (= centro foto x713)
   con `at 0% 50%` → coincide con la foto. El borde IZQUIERDO del texto abraza la
   curva DERECHA del círculo. */
.ayc-native.ayc-native [data-id="acw-shaper-r"] {
  float: left;
  shape-outside: circle(var(--acw-r) at 0% 50%);
}

/* DISTRIBUCIÓN VERTICAL de los 2 beneficios de cada columna para que crucen el
   arco diagonal del círculo (corto cerca del ecuador, largo arriba): el bloque
   superior sube (margin-top:-40) hacia el casquete estrecho y el inferior baja
   (margin-top:60) hasta el ecuador → amplitud del borde >40px por columna. */
.ayc-native.ayc-native [data-id="ac-w1"],
.ayc-native.ayc-native [data-id="ac-w2"] { margin-top: -40px; }
.ayc-native.ayc-native [data-id="ac-w3"],
.ayc-native.ayc-native [data-id="ac-w4"] { margin-top: 60px; }

/* ---- Beneficios dentro de las columnas ---- */
.ayc-native.ayc-native [data-id="acw-grid"] .elementor-widget-icon-box {
  background: transparent;
  box-shadow: none;
  padding: 0 0 30px;
  margin: 0;
}
.ayc-native.ayc-native [data-id="acw-grid"] .elementor-icon-box-wrapper,
.ayc-native.ayc-native [data-id="acw-grid"] .elementor-icon-box-content {
  display: block;             /* NO abrir BFC nuevo → el float de la columna recorta sus líneas */
  overflow: visible;
}
/* SIN cap de ancho: el texto ocupa la columna completa y es el float-shaper quien
   recorta cada línea siguiendo el arco. Un max-width pequeño dejaba el bloque en la
   banda exterior, lejos de la curva (hueco muerto que marcó el auditor). */
.ayc-native.ayc-native [data-id="acw-col-left"]  .elementor-icon-box-wrapper,
.ayc-native.ayc-native [data-id="acw-col-right"] .elementor-icon-box-wrapper { max-width: none; }

/* AMBOS cuerpos LEFT (ragged): así el borde que abraza la curva queda dentado y
   sigue el arco. `justify` enderezaba ese borde y mataba la amplitud. */
.ayc-native.ayc-native [data-id="acw-col-left"] .elementor-icon-box-title,
.ayc-native.ayc-native [data-id="acw-col-right"] .elementor-icon-box-title { text-align: left; }
.ayc-native.ayc-native [data-id="acw-col-left"] .elementor-icon-box-description,
.ayc-native.ayc-native [data-id="acw-col-right"] .elementor-icon-box-description {
  text-align: left !important;        /* vence el left/justify !important del shared/legacy */
}

/* Limpieza (minor del auditor): ocultar el <i> Font Awesome heredado de cada
   beneficio (renderiza 0x0 pero queda residuo frágil); el check verde de marca lo
   pinta ::before sobre .elementor-icon-box-icon. */
.ayc-native.ayc-native [data-id="acw-grid"] .elementor-icon-box-icon > i,
.ayc-native.ayc-native [data-id="acw-grid"] .elementor-icon-box-icon > svg { display: none !important; }

/* CHECK VERDE GRUESO (gap auditor) — igual que Advisors.
   El shared (servicios-shared.css §por-qué) pinta el ::before del título con
   check-green.png = Recurso 19 (palomita FINA, aro fino). El diseño de Ayuda
   (ac-crops/why.png) muestra junto a CADA beneficio el check GRUESO del diseño:
   Recurso 20 = check-green-bold.png (trazo ancho, palomita grande que rebasa la
   parte superior-derecha del aro). Override SOLO la imagen aquí (misma spec 0,4,1
   que el shared, carga después → gana en cascada). Tamaño se mantiene 31×31 vía el
   shared (width/height, NUNCA font-size). Fondo del PNG es TRANSPARENTE (sin caja
   gris): el aro fino que el auditor leyó como "caja" es el propio anillo del icono. */
.ayc-native.ayc-native [data-id="acw-grid"] .elementor-icon-box-title::before {
  background-image: url('/wp-content/uploads/ayc-icons/check-green-bold.png');
}

/* [2026-06-25 CORRECCIÓN] La rayita verde NO va en las cards de "Por qué elegirnos" (era mala
   interpretación del PDF). Va al FINAL de los CTA (ver servicios-shared.css / contacto.css). Quitada de aquí. */
/* [2026-06-25 P4] El CTA de Ayuda es BOXED (sin .e-con card) → la regla shared no lo cubre.
   Raya verde al final de su tarjeta (el > .e-con-inner). Reusa el keyframe ayc-cta-greenline (shared). */
.ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con-inner { position: relative; }
.ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con-inner::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 (igual que el intro card de Contacto) */
  transform: scaleX(0); transform-origin: left center; transition: transform 1.1s ease-out;
}
.ayc-native.ayc-native[data-id="ac-cta-sec"].ayc-line-animate > .e-con-inner::after { transform: scaleX(1); }

/* [2026-06-25 P2 "Conoce nuestro proceso"] Los títulos del proceso de Ayuda son largos y
   llegan a 3 líneas ("Revisión + organización profesional"). Reservamos 3 líneas (override del
   2.4em base de shared) para que TODOS los cuerpos arranquen a la misma altura SIN cambiar el
   tamaño de letra (que es el estándar de subtítulos del sitio). */
/* [2026-08-27 AC2] El cliente pidió en el PDF que estas cards fueran MÁS PEQUEÑAS
   y que los títulos quedaran en 2 líneas (los largos llegaban a 3 y obligaban a
   reservar 3 líneas, inflando las 7 cards). Se bajó el título de --fs-h2 (26) a
   --fs-body (21) y la reserva de 3.6em a 3.9em... pero a 21px seguían en 3 líneas.
   [2026-08-27 AC3 — CIERRE] Medido en vivo (Chrome, 1536, Futura Bold 700) el ancho
   de caja MÍNIMO que mete cada título en 2 líneas; el que manda es siempre ac-p6
   ("Preparación para entrevista o cita consular"):
       fs   caja necesaria (ac-p6)   card = caja + 2×padding
       18       228 px                   256 (pad 14)
       18.5     236 px                   264 (pad 14)   ← elegido, holgura 8px
       19       242 px                   270 (pad 14)   holgura 2px → frágil
       19.5     248 px                   276 (pad 14)   > 272 → no cabe
       20       254 px                   282 (pad 14)   > 272 → no cabe
       21       266 px                   294 (pad 14)   > 272 → no cabe
   Con card de 272px y padding lateral 14 la caja de texto es 244px ⇒ el tope real
   es 18.5px. Ensanchar la card NO es salida: el inner del grid mide 1200px y con
   gap 24 el máximo que deja 4 por fila es (1200−3×24)/4 = 282px; medido, a 290 y a
   300px la fila se rompe a 3 cards (3+3+1) — se descarta la vía "subir el ancho".
   Tampoco sirve text-wrap:balance (reparte las líneas, NO reduce su número: mismo
   min2 medido con y sin él) ni letter-spacing −0.4px a 21px (baja la necesidad a
   256px, sigue > 244).
   → 18.5px = el 18.4px que pide el diseño (PDF ÷1.34) redondeado al medio píxel, y
   por encima del piso de legibilidad de 18px del proyecto. Se expresa anclado al
   token: --fs-body (21) − 2.5px, con max(18px, …) para que el piso se cumpla SOLO
   por CSS: en ≤1024 --fs-body baja a 18 y en ≤767 a 16, y sin el max() el título
   habría quedado en 15.5/13.5 (de hecho HOY, con var(--fs-body) pelado, el título
   móvil renderiza a 16px = por DEBAJO del cuerpo de la card, 17px: se corrige). */
.ayc-native.ayc-native [data-id="ac-proc-grid"] .elementor-icon-box-title {
  /* Reserva 2 líneas (2 × 1.3em = 2.6em): con 18.5px los 7 títulos caben en 2, así
     que los 7 CUERPOS siguen arrancando a la misma altura (offset medido 133.1px,
     antes 166.9) y la card deja de pagar la 3ª línea fantasma: 81.9px de reserva
     → 48.1px. */
  min-height: 2.6em;
  font-size: max(18px, calc(var(--fs-body) - 2.5px)) !important;
  line-height: 1.3 !important;
  /* Reparte las 2 líneas en vez de dejar la 2ª huérfana ("…o cita / consular").
     No cambia el NÚMERO de líneas (medido), solo dónde corta; degrada a normal en
     navegadores sin soporte. */
  text-wrap: balance;
}

/* [2026-06-25 P9] La alineación título/párrafo de "Por qué elegirnos" se movió a servicios-shared.css
   (sufijo $="w-grid") para cubrir también Accountants y Advisors. */

/* [2026-06-25 punto 1] Las flechas del proceso de Ayuda ("Conoce nuestro proceso") se veían MUY
   delgadas (3px) y pegadas al borde superior de las cards. SOLO Ayuda (este archivo no carga en
   Accountants/Advisors, donde están bien): un poco más gruesas (5px) + subidas (más aire sobre la card). */
.ayc-native.ayc-native .ayc-home-arrow::before { height: 5px !important; }
.ayc-native.ayc-native .ayc-home-arrow::after {
  width: 13px !important; height: 13px !important;
  border-top-width: 5px !important; border-right-width: 5px !important;
}
.ayc-native.ayc-native .ayc-home-arrow { margin-top: -12px !important; }

/* Item 5 (Experiencia real): centrado bajo la foto. clear:both para bajar bajo las
   2 columnas flotadas. Aire EQUILIBRADO (R3 major: antes ~228px de banda muerta). */
.ayc-native.ayc-native [data-id="ac-w5"] {
  clear: both !important;
  width: 64%;
  margin: 24px auto 0;
  text-align: center;
}
.ayc-native.ayc-native [data-id="ac-w5"] .elementor-icon-box-title,
.ayc-native.ayc-native [data-id="ac-w5"] .elementor-icon-box-description {
  text-align: center !important;
}
/* R3 minor: el ::before residual de la descripción del 5º (spacer fantasma 180×360)
   se neutraliza — ese wrap ya no vive aquí (vive en las columnas). */
.ayc-native.ayc-native [data-id="ac-w5"] .elementor-icon-box-description::before {
  content: none;
}

/* R3 minor: respiro título→grid (antes 90px arriba vs 20px abajo). */
.ayc-native.ayc-native [data-id="acw-title"] .elementor-heading-title {
  margin-bottom: 44px;
}

/* ============================================================
   6) TESTIMONIOS (ac-test-sec) — reseñas REUTILIZABLES del shared $="-test-sec";
      NO sobrescribir estilos propios. (vs ac-crops/test.png)
   ============================================================ */

/* ============================================================
   7) CTA (ac-cta-sec) — tarjeta estándar del shared $="-cta-sec"; aquí solo el
      H2/subtítulo/label si difieren. (vs ac-crops/cta.png)

   ESTRUCTURA REAL de ESTA página (difiere de Advisors/Accountants):
   la sección ac-cta-sec es e-con-BOXED (NO e-con-full) y NO tiene un
   contenedor-tarjeta hijo (.e-con); los 3 widgets (H2 heading, subtítulo
   HEADING —no text-editor— y botón) cuelgan directos de su > .e-con-inner.
   → El shared apunta a "> .e-con" (tarjeta hija que aquí NO existe) y a
     ".elementor-widget-text-editor p" (el subtítulo aquí es HEADING) → ni la
     tarjeta gris ni el subtítulo-lead aplicaban. Lo cerramos AQUÍ (page-CSS),
     sin tocar el shared (Advisors/Accountants conservan su .e-con hija).
   El fondo blanco de sección, H2 navy 48px y botón canónico verde 305×57 YA
   los aplica el shared por sufijo y se mantienen. */

/* TARJETA gris = el propio .e-con-inner (la sección es boxed). El inline de
   Elementor fija width:1200px / max-width:min(100%,1200px) y padding:64px 0;
   reafirmamos ancho de tarjeta (max 1296, centrada), bg paper, radio 18px,
   sombra suave y padding interno generoso (54/60). Doble clase (0,2,0) +
   data-id (0,2,1) vence al inline solo donde no hay inline en esa propiedad;
   width/max-width/padding van con la clase doblada y, por orden de carga,
   ganan al CSS por-data-id de Elementor (misma especificidad 0,2,1). */
.ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con-inner {
  background: var(--ayc-paper, #f3f4f2);
  border-radius: 18px;
  max-width: 1296px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 54px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 6px 28px rgba(30, 39, 81, .08);
}

/* TÍTULO DEL CTA: el diseño lo muestra en ~2 líneas balanceadas dentro de la
   tarjeta ("Da el primer paso con claridad" / "y acompañamiento real."). A 38px
   (locked, --fs-cta-title) cabe en 1 línea (1076px) porque la tarjeta es ancha.
   NO bajamos la fuente ni metemos <br>: limitamos el ANCHO del propio H2 para que
   wrapee NATURAL tras "claridad" ("Da el primer paso con claridad"≈596px → cap a
   660px deja la 2ª línea para "y acompañamiento real."). Centrado, sin tocar la
   tarjeta (subtítulo/botón intactos). max-width = restricción de layout (como el
   intro de ¿Qué hacemos? a 1180px), no del token de escala tipográfica. */
.ayc-native.ayc-native [data-id="ac-cta-h2"] .elementor-heading-title {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* SUBTÍTULO/LEAD: aquí es un widget HEADING (no text-editor), por eso el shared
   no lo alcanzaba y renderizaba a 48px navy peso 400 (escala H2 heredada). Lo
   bajamos al TOKEN del subtítulo de CTA (--fs-cta-sub = 24px = subtítulo del
   hero), gris-teal de marca, centrado, fuente de cuerpo. RONDA 2 (jun-2026):
   antes --fs-h3 (26) → ahora --fs-cta-sub (24) para que el subtítulo del CTA de
   Ayuda use EL MISMO tamaño que el del hero y que los CTA de Advisors/Accountants
   (cuyo subtítulo es text-editor y ya usa --fs-cta-sub). Centralizado: el tamaño
   sale del token, aquí solo lo enrutamos porque este subtítulo es HEADING (H3),
   no text-editor, así que la regla shared del CTA (que mira text-editor p) no lo
   alcanza.
   El shared CTA fija TODO heading de la sección a 48px navy con
   ".ayc-native.ayc-native[data-id$='-cta-sec'] .elementor-widget-heading
   .elementor-heading-title" (spec 0,3,1) → para vencerlo SIN !important usamos
   TRIPLE clase doblada + data-id propio + .elementor-widget-heading
   (spec 0,5,1 > 0,3,1). Sólo afecta a ESTE subtítulo, no al H2. */
.ayc-native.ayc-native.ayc-native[data-id="ac-cta-sub"] .elementor-widget-heading .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="ac-cta-sub"].elementor-widget-heading .elementor-heading-title {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-cta-sub);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ayc-muted);
  text-align: center;
  margin: 0;
}

/* Aire entre subtítulo y botón un punto mayor que el gap del bloque, como el
   crop (el botón respira bajo el subtítulo). */
.ayc-native.ayc-native[data-id="ac-cta-btn"] {
  margin-top: 8px;
}

/* ============================================================================
   ════════════════════  RESPONSIVE — TABLET (≤1024px)  ════════════════════
   SOLO añade/edita reglas DENTRO de estos media-queries. El DESKTOP (≥1025px)
   queda BYTE-IDÉNTICO (estos bloques NO aplican ahí). Los tamaños de fuente ya
   bajan por tokens centralizados (ayc-base.css @media): aquí ajustamos SÓLO el
   LAYOUT de las secciones (apilado, gaps, padding, diagrama absoluto→apilado).
   El componente compartido (servicios-shared.css) no tiene reglas responsive;
   las que necesita Ayuda Center viven aquí, scope a sus data-id ac-*.
   ============================================================================ */
@media (max-width: 1024px) {

  /* ---- HERO: el disclaimer/legal del hero deja de ser 1 línea nowrap (heredada
     del shared) → envuelve y se acota al inner; el botón permite envolver. ---- */
  .ayc-native.ayc-native[data-id="ac-hero-sec"] [data-id="ac-hero-legal"] p,
  .ayc-native.ayc-native[data-id="ac-hero-sec"] .elementor-widget-text-editor p {
    white-space: normal !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .ayc-native.ayc-native[data-id="ac-hero-sec"] h2.elementor-heading-title {
    max-width: 100%;
  }
  .ayc-native.ayc-native[data-id="ac-hero-sec"] .elementor-button {
    white-space: normal;
    max-width: 100%;
  }

  /* ---- ¿QUÉ HACEMOS? — fila de 6 ítems (flex 300px) → 2 columnas estables ----
     Bajamos el column-gap del shared (56px) para que 2 cols entren holgadas y
     acotamos cada ítem a 1fr de la media-banda. */
  .ayc-native.ayc-native [data-id="ac-que-grid"] > .e-con-inner,
  .ayc-native.ayc-native [data-id="ac-que-grid"].e-con > .e-con-inner {
    column-gap: 32px;
    row-gap: 22px;
  }
  .ayc-native.ayc-native [data-id="ac-que-grid"] [data-id^="ac-qi"] {
    flex: 1 1 260px;
    max-width: 320px;
  }

  /* ---- PROCESO — fila de 7 cards (flex 282px) → 3 columnas máx (wrap) ---- */
  .ayc-native.ayc-native [data-id="ac-proc-grid"] > .e-con-inner {
    gap: 48px 24px;
  }
  .ayc-native.ayc-native [data-id="ac-proc-grid"] [data-id^="ac-p"] {
    flex: 1 1 200px;
    max-width: 240px;
  }
  /* [2026-08-27 AC3] En tablet la card se queda en 240px (caja 212px) y el título
     sigue a 18px (piso), así que ac-p4/ac-p6 SIGUEN en 3 líneas: aquí la reserva
     tiene que seguir siendo de 3 (2.6em dejaría los cuerpos desalineados). El
     2.6em solo aplica a desktop y, más abajo, a ≤767 (card 320px = caja 292px,
     donde 18px sí entra en 2 líneas). */
  .ayc-native.ayc-native [data-id="ac-proc-grid"] .elementor-icon-box-title {
    min-height: 3.9em;
  }

  /* ============================================================
     ¿POR QUÉ ELEGIRNOS? (acw-grid) — DIAGRAMA ABSOLUTO → APILADO VERTICAL.
     En desktop: foto circular central (::after) + 2 columnas FLOTADAS de 590px
     con shape-outside (acw-shaper-l/r) que abrazan la curva + 5º ítem centrado.
     Ese diagrama no escala (las columnas de 590px desbordan ~1020px en móvil).
     En ≤1024 lo CONVERTIMOS en una pila vertical que CONSERVA TODO el texto:
       · foto circular: pasa de ::after absoluto a una imagen centrada propia
         (::before del inner) que SÍ ocupa flujo → no se pierde la foto.
       · columnas: dejan de flotar, ancho 100%, en orden (ac-w1..ac-w4) y debajo
         el 5º (ac-w5). Se anulan shapers (decorativos) y márgenes de cruce.
     ============================================================ */
  /* inner: pila vertical centrada, sin la foto absoluta ::after */
  .ayc-native.ayc-native [data-id="acw-grid"] > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 100% !important;
    padding-top: 8px;
  }
  /* la foto circular: era ::after absoluta (decorativa); aquí la mostramos como
     ::before en flujo, centrada arriba, para no perder el recurso visual. */
  .ayc-native.ayc-native [data-id="acw-grid"] > .e-con-inner::after {
    display: none !important;
  }
  .ayc-native.ayc-native [data-id="acw-grid"] > .e-con-inner::before {
    content: "";
    display: block;
    width: 300px;
    height: 300px;
    max-width: 70vw;
    max-height: 70vw;
    margin: 0 auto 28px;
    border-radius: 50%;
    /* [2026-08-27] FOTO REAL — mismo archivo que el ::after de desktop (L433). */
    background: url('/wp-content/uploads/ayc-photos/ac-why-circle-real.jpg') center/cover no-repeat;
    box-shadow: 0 8px 28px rgba(20,30,60,0.14);
  }
  /* columnas: dejan de flotar y se apilan a ancho completo, en orden DOM */
  .ayc-native.ayc-native [data-id="acw-col-left"],
  .ayc-native.ayc-native [data-id="acw-col-right"] {
    float: none !important;
    width: 100% !important;
    max-width: 560px !important;
    padding-bottom: 0 !important;
  }
  /* shapers de exclusión (spacers decorativos): fuera en apilado vertical */
  .ayc-native.ayc-native [data-id="acw-shaper-l"],
  .ayc-native.ayc-native [data-id="acw-shaper-r"] {
    display: none !important;
  }
  /* anular el desplazamiento vertical de cruce de arco (los beneficios ya no
     deben subir/bajar para abrazar la curva) y dar aire uniforme entre ellos */
  .ayc-native.ayc-native [data-id="ac-w1"],
  .ayc-native.ayc-native [data-id="ac-w2"],
  .ayc-native.ayc-native [data-id="ac-w3"],
  .ayc-native.ayc-native [data-id="ac-w4"] {
    margin-top: 0 !important;
  }
  .ayc-native.ayc-native [data-id="acw-grid"] .elementor-widget-icon-box {
    padding-bottom: 22px;
  }
  /* texto a la izquierda con icono; ya no hay curva que abrazar → ancho pleno */
  .ayc-native.ayc-native [data-id="acw-col-left"] .elementor-icon-box-wrapper,
  .ayc-native.ayc-native [data-id="acw-col-right"] .elementor-icon-box-wrapper {
    max-width: 100% !important;
  }
  /* 5º ítem (Experiencia real): ya sin float; centrado, ancho cómodo */
  .ayc-native.ayc-native [data-id="ac-w5"] {
    width: 100% !important;
    max-width: 560px !important;
    margin: 4px auto 0 !important;
  }

  /* ---- TESTIMONIOS — fila de 3 cards (flex nowrap) → 2 por fila (wrap) ---- */
  .ayc-native .ayc-tst-row,
  .ayc-native [data-id="581ginu8"].ayc-tst-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
  }
  .ayc-native .ayc-tst-card {
    flex: 1 1 280px !important;
    min-width: 260px !important;
    max-width: 360px !important;
  }
  /* chevrons de nav: con las cards envueltas y visibles ya no navegan nada útil;
     son decorativos (controles), no contenido → ocultar para no desbordar. */
  .ayc-native .ayc-tst-chev,
  .ayc-native [data-id="581ginu8"] .ayc-tst-chev {
    display: none !important;
  }

  /* ---- CTA FINAL — tarjeta a ancho fluido; subtítulo/título envuelven ---- */
  .ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con,
  .ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con-inner > .e-con {
    max-width: 92% !important;
  }
  .ayc-native.ayc-native[data-id="ac-cta-h2"] .elementor-heading-title {
    max-width: 100%;
  }
}

/* ============================================================================
   ════════════════════  RESPONSIVE — MÓVIL (≤767px)  ════════════════════
   Apilado total a 1 columna; gaps/padding mínimos; nada se oculta; cero overflow.
   La escala tipográfica mínima legible la fija ayc-base.css (tokens --fs-*).
   ============================================================================ */
@media (max-width: 767px) {

  /* ---- HERO — botón con padding lateral más estrecho para entrar holgado en
     360px (sin tocar la fuente, que vive en --fs-button). ---- */
  .ayc-native.ayc-native[data-id="ac-hero-sec"] .elementor-button {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ---- ¿QUÉ HACEMOS? — 6 ítems → 1 columna ---- */
  .ayc-native.ayc-native [data-id="ac-que-grid"] [data-id^="ac-qi"] {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* ---- PROCESO — 7 cards → 1 columna ---- */
  .ayc-native.ayc-native [data-id="ac-proc-grid"] > .e-con-inner {
    gap: 32px 0;
  }
  .ayc-native.ayc-native [data-id="ac-proc-grid"] [data-id^="ac-p"] {
    flex: 1 1 100%;
    max-width: 320px;
  }
  /* [2026-08-27 AC3] Card 320px (caja 292px) a 1 columna: a 18px los 7 títulos
     entran en 2 líneas → se devuelve la reserva a 2 (el 3.9em del bloque ≤1024
     dejaba ~21px de hueco muerto entre título y cuerpo en móvil). */
  .ayc-native.ayc-native [data-id="ac-proc-grid"] .elementor-icon-box-title {
    min-height: 2.6em;
  }

  /* ---- ¿POR QUÉ? — círculo apilado más pequeño en móvil ---- */
  .ayc-native.ayc-native [data-id="acw-grid"] > .e-con-inner::before {
    width: 220px;
    height: 220px;
    margin-bottom: 24px;
  }
  .ayc-native.ayc-native [data-id="acw-col-left"],
  .ayc-native.ayc-native [data-id="acw-col-right"],
  .ayc-native.ayc-native [data-id="ac-w5"] {
    max-width: 100% !important;
  }

  /* ---- TESTIMONIOS — 3 cards apiladas a 1 columna (todo el texto visible) ---- */
  .ayc-native .ayc-tst-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 420px !important;
  }

  /* ---- CTA FINAL — tarjeta casi a ancho completo ---- */
  .ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con,
  .ayc-native.ayc-native[data-id="ac-cta-sec"] > .e-con-inner > .e-con {
    max-width: 94% !important;
  }
}