/* ============================================================
   AYC — ADVISORS (página 78, /ayc-advisors/) — capa NATIVA.
   SOLO lo ÚNICO de Advisors: fotos (hero, slides, círculo del
   "por qué"), nº de columnas del grid Incluye (3), lado del
   círculo (IZQUIERDA via float:left).
   Encadenado DESPUÉS de native/servicios-shared.css
   (handle ayc-native-pg-ayc-advisors, dep ayc-native-servicios-shared).
   Todo lo ESTÁNDAR (carrusel, proceso, por qué, hero, footer) vive
   en servicios-shared.css. Aquí NO se reimplementan componentes.
   ============================================================ */

/* ============================================================
   HERO — foto de fondo de Advisors
   ============================================================ */
.ayc-native.ayc-native [data-id="adv-hero-sec"] {
  /* Foto de marca del diseño: equipo en mesa + pantalla "AYC GROUP ADVANTAGE"
     / "PERSONALIZED US MARKET ENTRY PLAN" + mapa USA + checklist. */
  background-image: url('/wp-content/uploads/ayc-photos/adv-hero-meeting.jpg');
  background-position: center 30%;   /* mantiene la pantalla/equipo en cuadro */
}

/* ---- HERO: ritmo vertical compacto (gap blocker) ----
   El _elementor_data fija --min-height:90vh (=> 810px@900 / 2700px en
   viewports altos). El diseño pide una banda compacta ~760px con el
   contenido equilibrado y el disclaimer cerca del borde inferior.
   La SECCIÓN es la propia .ayc-native (clase doblada SIN espacio);
   --min-height anula el var de Elementor sin tocar min-height base. */
.ayc-native.ayc-native[data-id="adv-hero-sec"] {
  --min-height: 680px;   /* 2026-06-24 PDF AJUSTES AD1: banda un poco más corta (760→680) */
  height: auto !important;
  justify-content: center;        /* AD1: "subir un poco el texto para que se vea el botón" → centrar (antes flex-end al pie, tapado por la card intro) */
}
/* El contenido y su padding viven en el .e-con-inner; equilibramos el aire
   arriba/abajo para que el disclaimer caiga cerca del borde inferior. */
.ayc-native.ayc-native[data-id="adv-hero-sec"] > .e-con-inner {
  justify-content: center; /* AD1: acompaña el centrado del bloque */
  padding-top: 90px;
  padding-bottom: 56px;
  max-width: 1200px;
}
/* ronda 2 — DISCLAIMER por ENCIMA del solape de la tarjeta intro.
   La tarjeta ahora SOLAPA -70px (card top y≈770) y es opaca (z-index 2). El
   contenido del hero NO vive en > .e-con-inner del .e-con-full, sino dentro de un
   contenedor BOXED hijo único (advh8f2aa8) → el disclaimer (advhc46abe) caía a
   y791–830, TAPADO por la tarjeta. Subimos el padding-bottom del inner de ESE boxed:
   como el boxed está pineado al pie del hero (sección justify-content:flex-end), el
   padding-bottom eleva el último hijo (el disclaimer) ~65px → termina ~y765, justo
   por encima del borde superior de la tarjeta, legible. */
.ayc-native.ayc-native[data-id="adv-hero-sec"] [data-id="advh8f2aa8"] > .e-con-inner {
  padding-bottom: 87px;   /* ronda 3: 75→87 (+12px). Al subir la tarjeta intro a card
                             top=759 (margin-top -81), el borde superior de la tarjeta
                             solapaba los últimos ~6px del disclaimer (texto bottom 765).
                             +12px de padding-bottom eleva el disclaimer a bottom ~753 →
                             libra el card top (759) con ~6px de aire, legible. */
}

/* ---- HERO: divider verde sobre el H1 (SÍ existe en el diseño, ronda 2) ----
   Línea corta verde de marca a la izquierda, justo encima de "AYC Advisors".
   El ancho/grosor/color base viven en servicios-shared; aquí solo lo
   re-mostramos (revertimos el ocultado de la ronda 1). */
.ayc-native.ayc-native[data-id="adv-hero-sec"] .elementor-widget-divider {
  display: block;
}

/* ---- HERO: subtítulo H2 a ~3 líneas (columna izq acotada), bold ----
   Acotamos la columna a ~600px (ancho de la columna de texto del diseño)
   para que el subtítulo envuelva natural a 3 líneas (sin <br>). */
.ayc-native.ayc-native[data-id="adv-hero-sec"] h2.elementor-heading-title {
  max-width: 880px;          /* columna de texto acotada; con --fs-hero-desc (32px tras bajada jun-2026)
                                envuelve natural sin <br> */
  font-weight: 700;
  font-size: var(--fs-hero-desc);   /* NIVEL 2 (32px) — descripción del hero (token, no literal) */
  line-height: 1.18;
}

/* ============================================================
   CARRUSEL — fotos de cada slide (background-image de .ayc-card-image).
   Las imágenes vienen inline en el HTML de cada card (advs41f88c…),
   pero re-asertamos aquí por si el inline se pierde / para cache-bust.
   Orden DOM: card1 Movilidad, card2 Consultoría, card3 Relocalización,
   card4 Acompañamiento.
   ============================================================ */
/* [2026-08-27] cards 1 y 2 = FOTOS REALES. REDUNDANTE: el background-image real va
   INLINE en settings.editor de los widgets advs41f88c / advsf366a2 del
   _elementor_data y animations.js (§82) lo re-aplica con !important leyéndolo del
   inline → el inline gana siempre. Se actualiza por higiene/coherencia. */
.ayc-native.ayc-native [data-id="advsc097a4"] .ayc-card-image {
  background-image: url('/wp-content/uploads/ayc-photos/adv-svc-visas-real.jpg');
}
.ayc-native.ayc-native [data-id="advs158a86"] .ayc-card-image {
  background-image: url('/wp-content/uploads/ayc-photos/adv-svc-consultoria-real.jpg');
}
.ayc-native.ayc-native [data-id="advs48b957"] .ayc-card-image {
  background-image: url('/wp-content/uploads/2026/04/adv-svc-relocalizacion-1.png');
}
.ayc-native.ayc-native [data-id="adv-card-4-new"] .ayc-card-image {
  background-image: url('/wp-content/uploads/2026/04/adv-svc-acompanamiento-1.png');
}

/* ---- [2026-08-27] ENCUADRE de las fotos reales de las cards 1 y 2 ----
   La caja .ayc-card-image mide 1200×~460-500 (cover) y lleva la banda navy
   .ayc-card-overlay de 840×292 abajo-IZQUIERDA (70% del ancho): el sujeto tiene que
   caer en el 30% derecho (x ≥ 840) o en la franja superior libre.
   Selector = [data-id del WIDGET text-editor] .ayc-card-image → (0,4,0), gana al
   'background-position: center' de servicios-shared.css §406 (0,3,0).
   SOLO APLICA EN DESKTOP: en ≤1024 animations.js fuerza center center !important. */
.ayc-native.ayc-native [data-id="advs41f88c"] .ayc-card-image {
  background-position: 50% 45%;   /* card 1 Visas: sube la asesora rubia al 30% derecho, cara despejada */
}
/* [2026-08-27 AD-A1] card 2 Consultoría: 25% -> 85%. MEDIDO, no a ojo.
   Geometría real (medida en live @1536/125%, idéntica de 1100 a 1920):
   caja .ayc-card-image 1200×498.75 · banda navy 840×292 anclada abajo → su borde
   superior cae en y=206.75 de la caja. Foto 1672×941 → cover escala por ANCHO
   (scale 0.7177, alto renderizado 675.4) ⇒ el eje X no tiene sobrante y el 50%
   horizontal es inerte; solo manda el %Y sobre 245.7px de sobrante en px-fuente.
   Mapeo borde-superior-de-la-banda en coordenadas de la foto = 245.7·p + 288.1:
     p=25% → 349.9  (corta a las dos asesoras a la altura del PELO: por eso se
                     veían atenuadas — ambas caras quedaban DENTRO de la banda)
     p=70% → 460.4  (corta en la barbilla/cuello: sigue rozando)
     p=85% → 497.3  (corta en la línea de HOMBROS: caras + cuello 100% fuera,
                     ~34px de aire entre barbilla y banda)
     p=100% → 534.1 (pero el borde superior del encuadre sube a 245.7 y la cabeza
                     de la asesora en primer plano empieza en 242 → LA CORTA)
   Las dos asesoras sentadas ocupan x-fuente 440–1010, todo dentro del 70% que
   tapa la banda: no hay escape horizontal, la única salida es subir el %Y. */
.ayc-native.ayc-native [data-id="advsf366a2"] .ayc-card-image {
  background-position: 50% 85%;
}
/* Entre 1025 y 1199px la card se estrecha (width = viewport) y, a alto fijo 498.75,
   el sobrante vertical se encoge → el mismo 85% deja la barbilla a solo ~13px de
   la banda. A 95% se recupera el aire (~25px @1100) sin cortar la cabeza de la
   asesora en primer plano (queda a ~68px-fuente del borde). ≤1024 lo gobierna
   animations.js (center center !important) y no entra aquí. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .ayc-native.ayc-native [data-id="advsf366a2"] .ayc-card-image {
    background-position: 50% 95%;
  }
}

/* Grid "Incluye" de Advisors = 3 columnas (override del default 2) */
.ayc-native.ayc-native [data-id="adv-svc-sec"] .ayc-checklist-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- H2 "Qué hacemos en AYC Advisors" — line-height roto + outlier 48px ----
   El widget (advs855d2a) trae font-size:48px inline (post-78.css) y SIN
   line-height propio, por lo que el bridge `.elementor-heading-title{
   line-height:inherit}` lo deja heredar el 25.6px del body → la caja queda a
   la mitad del glifo y recorta descendentes ('Qué','hacemos'). Es el ÚNICO H2
   de sección con lh roto (proceso/why/cta = 44px/lh1.2). Lo normalizamos a la
   norma de página (44px) con line-height explícito 1.2. Doble clase + data-id
   del widget + .elementor-heading-title vence al inline (0,2,0) y al bridge
   line-height:inherit (0,3,0). */
.ayc-native.ayc-native [data-id="advs855d2a"] .elementor-heading-title {
  font-size: var(--fs-section);   /* ESCALA H2-de-sección CONSOLIDADA (48px, igual que Cómo trabajamos / Nuestra
                        esencia / Por qué elegir). Ronda 5: subido 46→48 con el set. Mantiene el
                        line-height explícito que repara el lh:inherit heredado del bridge. */
  line-height: 1.2;
}

/* ---- H2 "Qué hacemos…" — balance vertical (gap ronda 3) ----
   space-above (padding-top inline 80px del inner) : space-below (H2→card 20px)
   = 4:1, el título queda pegado a la card. Reequilibramos a ~60/44:
   bajamos el padding-top del inner a 60px y damos 44px bajo el H2 (margin-bottom
   del widget). Scope al data-id de Advisors (no toca el H2 de las otras páginas). */
.ayc-native.ayc-native[data-id="adv-svc-sec"] > .e-con-inner {
  padding-top: 60px;
}
.ayc-native.ayc-native [data-id="advs855d2a"] {
  margin-bottom: 24px;   /* + los 20px ya presentes (wrap top) → ~44px H2→card */
}

/* ============================================================
   POR QUÉ — círculo a la IZQUIERDA (float:left), texto a la derecha
   abraza la curva (shape-outside). Foto = adv-why-circle-real.jpg
   (square 842×842, foto real AYC desde 2026-08-27; antes adv-why-circle-photo.png).
   El contenedor advw-grid ya es display:block (servicios-shared).
   ============================================================ */
.ayc-native.ayc-native [data-id="advw-grid"] > .e-con-inner {
  min-height: 612px;   /* círculo Ø539 + margin-top 28 + holgura → lo contiene sin que rebase el inner */
}
.ayc-native.ayc-native [data-id="advw-grid"] > .e-con-inner::before {
  content: "";
  float: left;                                  /* Advisors → IZQUIERDA */
  width: 539px; height: 539px;                   /* PDF: Ø≈539px live-eq (centro crop 809,828 r549 → Ø~1098
                                                    crop × 0.4908). Subido de 475→539 (ronda 4): el ecuador
                                                    cae en x≈651 (112.5 + 539) → con shape-margin+margin-right
                                                    el texto arranca ceñido ~589/668/690/673/608 (objetivo PDF),
                                                    cerrando el corrimiento a la izquierda del round previo y
                                                    reponiendo el título a 2 líneas (más invasión arriba-dcha).
                                                    Sin margin-right negativo → el texto nunca invade la foto. */
  margin: 28px 48px 12px 16px;                   /* RONDA 2: margin-RIGHT 8→48 = el verdadero lever del AIRE en el
                                                    ECUADOR. shape-margin sólo recorta esquinas pero NUNCA empuja el
                                                    texto más allá de la margin-box del float; en la banda más ancha
                                                    (ecuador) el texto se clava en el borde RECTANGULAR del float
                                                    (antes x=676 = 112.5+16+539+8 → sólo 11px de la curva). Subir
                                                    margin-right a 48 mueve ese borde a ~716 → el MÍNIMO real
                                                    texto↔curva (curva en 667) sube a ~48px (cliente: "muy pegados").
                                                    NO cambia el disco visible (Ø539) ni el centro; sigue float:left +
                                                    shape-outside + text-align:left. margin-top 28 / margin-left 16
                                                    intactos (centro en y≈406, disco izq 128 / der 667 = PDF). */
  border-radius: 50%;
  shape-outside: circle(269.5px at 50% 50%);     /* RADIO EXPLÍCITO en px = mitad del disco visible (539/2).
                                                    El radio en % resolvía contra sqrt(w²+h²)/√2 de la margin-box
                                                    asimétrica (563×579) → ~571px, un círculo que envolvía todo el
                                                    rectángulo y el reclaim curvo se anulaba (las líneas se pegaban
                                                    al borde RECTANGULAR del float, no a la curva). Con px el arco
                                                    coincide con el disco y el texto SÍ abraza la curva. */
  shape-margin: 48px;                            /* RONDA 2: aire REDONDO en las esquinas (arriba/abajo del disco) =
                                                    48px. El aire del ECUADOR lo da margin-right (arriba): shape-margin
                                                    nunca empuja texto fuera de la margin-box. Juntos → margen redonda
                                                    GENEROSA y consistente (mín ~48px) sin tocar el mecanismo. */
  border: 1.5px solid var(--ayc-navy);           /* anillo navy fino */
  /* [2026-08-27] FOTO REAL: IMG_6850 recortada cuadrada 842²+320+0 → asesora AYC
     sonriendo mientras el cliente firma. El offset +320 (en vez de +232) descarta la
     cabeza desenfocada que el corte anterior dejaba cortada contra el borde izquierdo
     del disco y centra a la asesora. Origen cuadrado ⇒ sin descentrado en la máscara.
     .bak de la IA: uploads/2026/04/adv-why-circle-photo.png.pre-fotos-reales-20260827.bak */
  background: url('/wp-content/uploads/ayc-photos/adv-why-circle-real.jpg') center/cover no-repeat;
}

/* ============================================================
   CTA FINAL — ESTÁNDAR (tarjeta gris sobre página blanca, título navy,
   subtítulo gris-teal, botón pill verde). Toda la presentación vive en
   servicios-shared.css §7 (selector [data-id$="-cta-sec"], compartido por
   las 3 páginas). El texto del H2/subtítulo y el label del botón
   ("Hablar con un asesor") son contenido del _elementor_data
   (advx236079 / advx10680e / advx45fcf2), no CSS.

   El tamaño del título/subtítulo del CTA es 100% CENTRALIZADO (RONDA 2,
   jun-2026): --fs-cta-title (48px) / --fs-cta-sub (24px) en ayc-base.css,
   aplicados por la regla shared [data-id$="-cta-sec"]. Se ELIMINÓ el override
   de página que pinaba el título a --fs-h1 (44px): el cliente lo quiere
   PROMINENTE como un hero, y la fuente única de verdad es el token. El <br>
   tras "claridad." YA existe en el _elementor_data (quiebre del diseño, no
   forzado). A 48px la línea 2 "Tu empresa y tu equipo merecen una guía
   confiable." mide 1274px → necesita ~1374px de tarjeta para caber en 2 líneas
   SIN <br> extra ni reducir fuente (regla: más ANCHO, nunca forzar quiebre). */

/* INSET lateral de la TARJETA (solo Advisors). El contenido debe caber la
   línea 2 del H2 a 48px (1274px) en 2 líneas. max-width 1380 + padding lateral
   50/lado → contenido 1280px ≥ 1274 ✓. Inset en 1440 = (1440−1380)/2 ≈ 30px/lado
   (el PDF muestra la tarjeta casi a sangre, ~30-40px/lado), sin overflow
   horizontal (1380 < 1425 ancho de sección). Misma cadena que la regla shared
   (0,3,0) sobre > .e-con → gana por orden de carga (ayc-advisors.css DESPUÉS). */
.ayc-native.ayc-native[data-id="adv-cta-sec"] > .e-con {
  max-width: 1380px;
}

/* ============================================================
   ESENCIA — SPLIT de columnas + HUECOS SIMÉTRICOS del divisor (Advisors).
   (Accountants usa max-width:1000px → no se toca aquí.)
   Objetivo PDF (live 1440): bloque de contenido x151 → x1245 (ancho 1094),
   divisor verde centrado ENTRE columnas en live-x ~629 con AIRE SIMÉTRICO:
     lead-izq → divisor ≈47px   y   divisor → body-der ≈46px.
   Antes la fila se centraba en la banda (x133→1292) y el body arrancaba
   pegado al divisor por la derecha (gap 90px) mientras el lead casi lo
   tocaba (gap 18px) → asimetría ~4x. Solución:
     · La banda (flex) deja de centrar la fila; la fila se ANCLA a x151
       (margin-left 111 = 151 − 40px de padding de la banda) y se acota a
       1094px de ancho (→ termina en x1245 como el PDF).
     · col-izq: 478px, gutter DERECHO 47px → el lead termina ~x582, deja
       ~47px hasta el divisor (x629).
     · col-der: toma el resto, gutter IZQUIERDO 43px → el body arranca ~x675
       (≈46px tras el divisor, mismo aire que el lead) y termina ~x1245.
   Los ~570px de contenido de la col-der se mantienen → el párrafo de 20px
   refluye a las mismas líneas naturales (sin <br>, sin cambiar fuente).
   ============================================================ */
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div {
  justify-content: center !important;      /* CENTRAR la fila en la banda (pedido cliente: esencia centrada, no anclada a la izquierda) */
}
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div {
  max-width: 1094px !important;            /* bloque de contenido (2 columnas) */
  margin-left: auto !important;            /* centrado horizontal en la banda */
  margin-right: auto !important;
}
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div > div:nth-child(1) {
  flex: 0 0 478px !important;
  padding: 0 47px 0 0 !important;   /* heading/lead arrancan x151; lead termina ~x582 → 47px al divisor */
}
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div > div:nth-child(3) {
  flex: 1 1 auto !important;
  padding: 0 0 0 43px !important;   /* body arranca ~x675 (46px tras el divisor) y termina ~x1245; ~570px de contenido */
}
/* Altura de banda ~375px (PDF): el banner trae min-height:350px inline
   (border-box → el padding se absorbe). Subimos el min-height directamente;
   align-items:center mantiene el centrado vertical equilibrado (top=bottom). */
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div {
  min-height: 375px !important;
}

/* ============================================================
   ESENCIA — FAMILIA TIPOGRÁFICA (gap ronda 1, "sprawl" de familias).
   Los 2 párrafos del bloque (<strong> lead "Te damos claridad…" 22px y
   <p> body "Ya sea que tu empresa…" 20px) traen font-family:'Open Sans'
   INLINE (spec 1,0,0,0) → rinden en Open Sans, una 3ª familia ajena a la
   página (objetivo ≤2 familias: Futura + Myriad). Forzamos la familia de
   CUERPO de marca (var --ayc-font-body = 'Futura Medium','Open Sans',…) con
   !important para vencer el inline (el !important gana al inline non-important).
   El <strong> hereda del <p>, pero lo targeteamos también por robustez.
   NO toco tamaños/colores (los gobiernan las reglas shared de la banda). */
.ayc-native.ayc-native [data-id="adv-esencia-content"] p,
.ayc-native.ayc-native [data-id="adv-esencia-content"] p strong,
.ayc-native.ayc-native [data-id="adv-esencia-content"] p span,
.ayc-native.ayc-native [data-id="adv-esencia-content"] strong {
  font-family: var(--ayc-font-body) !important;
}

/* ============================================================
   [2026-06-24 PDF AJUSTES — Advisors]
   AD2 "Nuestra esencia": el fondo se veía oscuro (foto cruda sin filtro) y el
   texto pequeño/"raro". (a) overlay azul de marca (mismo filtro de heroes, así
   queda banda navy media, no casi-negra) + (b) subir lead/body a tamaños legibles.
   ============================================================ */
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div {
  position: relative;
}
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* [2026-08-27 AD2a] Cliente: "se ve un poco oscuro el fondo". Medido: luminancia
     media del live 64.8 vs 82.2 del PDF de diseño (~21% más oscuro). Se bajan los
     alfas 0.55/0.68 -> 0.38/0.48 para subir la luminancia hacia el objetivo sin
     perder el contraste del texto blanco. Objetivo medible, no "a ojo". */
  background: linear-gradient(135deg, rgba(0,73,116,0.26) 0%, rgba(30,39,81,0.36) 100%);
  border-radius: inherit;
}
.ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div { position: relative; z-index: 1; }
/* AD2 texto: lead (strong) y body legibles (antes ~15px inline → "raro"/apretado) */
.ayc-native.ayc-native [data-id="adv-esencia-content"] p { font-size: var(--fs-body) !important; line-height: 1.6 !important; }
.ayc-native.ayc-native [data-id="adv-esencia-content"] p strong { font-size: var(--fs-h3) !important; line-height: 1.3 !important;
  /* [2026-06-25 punto 2 v2] el lead "Te damos claridad…" va en peso MEDIUM (Futura Medium @500), NO bold:
     a 700 (faux o Bold) el cliente lo ve con "mucho peso". @500 = limpio (es el peso declarado del
     @font-face Futura Medium, sin síntesis) y se distingue por TAMAÑO (26px), como el diseño. */
  font-family: var(--ayc-font-body) !important; font-weight: 500 !important; }

/* AD4 — títulos de las cards de servicio MÁS GRANDES (cliente: "se ven pequeños").
   24→28px. Sólo Advisors (este archivo se carga sólo en la página 78). */
.ayc-native.ayc-native .ayc-card-title { font-size: 28px !important; }

/* AD3 — lista "Incluye:" se veía desorganizada por gaps disparejos del grid 3-col.
   Aprieta y empareja el row-gap (16→10) para cerrar los "grandes espacios". */
.ayc-native.ayc-native .ayc-checklist-grid { gap: 10px 24px !important; align-content: start !important; }

/* ============================================================
   INTRO (tarjeta gris bajo el hero) — afinados de PÁGINA (ronda 1).
   La presentación BASE (Myriad, gris-teal, p3 navy/bold, gradiente verde
   inferior, solape sobre el hero) vive en servicios-shared.css §1.5
   (selector [data-id$="-intro-sec"], compartido por las 3 páginas). Aquí
   SOLO los 4 ajustes medidos contra el PDF de Advisors. Scope al data-id
   ESPECÍFICO de Advisors (adv-intro-sec / advieef5f2) → vence al shared
   $="-intro-sec" (misma cuenta de clases pero ID-exacto + orden de carga:
   ayc-advisors.css se encola DESPUÉS de servicios-shared.css) y NO toca
   Accountants/Ayuda (cuyo PDF puede pedir otras medidas).

   NOTA gap p3 (advib7af59 = "Aquí encuentras un equipo…"): el auditor lo
   vio en Futura/16px/#1a1a1a, pero la regla shared :last-child YA lo rinde
   Myriad Pro 700 navy 22px (verificado live) → gap CERRADO por la base; no
   requiere override aquí. */

/* gap #3 — radio de la tarjeta 20px → 10px (PDF: esquina ~10px @1425).
   + sombra orientada hacia ABAJO (ronda 3): shared §1.5 la proyecta hacia ARRIBA
   (0 -6px 32px), pero el PDF muestra una sombra suave DESCENDENTE bajo la tarjeta
   flotante. La reorientamos a 0 6px 24px rgba(0,0,0,.10) SOLO en Advisors (override
   del shared por data-id exacto + orden de carga). El filo VERDE inferior ya lo
   pinta el ::after (gradiente #9dc41a, shared §1.5) → ese acento ya existe. */
.ayc-native.ayc-native[data-id="adv-intro-sec"] > .e-con-boxed {
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10);
}

/* gap (ronda 2/3) — OVERLAP CARD: la tarjeta debe SOLAPAR el hero, no abutirlo.
   PDF @1425: card top=1562 sobre banda navy que llega a 1706 → overlap ≈70px.
   RONDA 3 (gap minor): el auditor midió card top=770 (vs 759 objetivo @1425);
   subimos el solape -70 → -81px (≈ -5rem) para que card top caiga a ~759
   (~67px DENTRO del navy, como el PDF). Combinado con el recorte de alto del
   contenido (gaps 22px uniformes + inner sin padding, abajo) el card bottom baja
   a ~973 y reaparece la franja BLANCA de ~45px hasta 'Nuestra esencia' (top 1017).
   z-index>hero ya está (sección position:relative;z-index:2). El fondo de la
   SECCIÓN es transparente → el navy del hero se ve a los lados de la tarjeta
   boxed; el gris #eceeef vive SOLO en la tarjeta. shared §1.5 fija margin-top:-8px;
   aquí lo sobreescribimos (mismo data-id exacto + orden de carga: va DESPUÉS). */
.ayc-native.ayc-native[data-id="adv-intro-sec"] {
  margin-top: -81px;
  margin-bottom: 43px;  /* FRANJA BLANCA (ronda 3): 'Nuestra esencia' es flow-positioned
                           justo tras esta sección → al acortar la tarjeta, esencia subía a
                           ~975 (pegada al card bottom, hueco 0). El card height YA es correcto
                           (216px ≈ PDF 214) — este margin NO infla la tarjeta, solo RESERVA la
                           franja blanca de ~43–45px (PDF) entre card bottom (~975) y esencia
                           (→ ~1018). (El recorte de alto + margin-top -81 ya fijan card top 759
                           / bottom 975; la franja la abre este margin, que es la única vía real
                           porque esencia sigue el flujo y no está anclada.) */
}

/* gap #4 — divisor verde inferior 838px → ~980px (PDF: gradiente ~980px @1425,
   ~68% de la tarjeta de 1197px). Insets 15%/15% (=70% → 838px) → 9.06%/9.06%
   (=81.88% → ~980px), centrado, mismo fade-a-transparente en ambos extremos. */
.ayc-native.ayc-native[data-id="adv-intro-sec"] > .e-con-boxed::after {
  left: 9.06%;
  right: 9.06%;
}

/* gap #2 — cuerpo p1/p2 22px → 20px (PDF: ~19px @1425; priorizamos legibilidad
   con el floor generoso del cliente → 20px). p3 hereda este 20px y conserva su
   navy/700 (regla shared :last-child solo fija color/peso, no tamaño), de modo
   que los 3 párrafos comparten UN tamaño de cuerpo coherente (hoy ya no hay
   16 vs 22; quedan los 3 en 20px). Scope al data-id de la tarjeta de Advisors. */
.ayc-native.ayc-native [data-id="advieef5f2"] .elementor-widget-text-editor p {
  font-size: var(--fs-quote);
}

/* gap major (ronda 3) — RITMO VERTICAL + FRANJA BLANCA: la tarjeta rendía 247px
   (33px DEMASIADO ALTA vs PDF 214px), con su borde inferior CLAVADO al inicio de
   'Nuestra esencia' (sin la franja blanca de ~45px del diseño). El exceso vivía en
   espaciado inflado: gap P1→P2 = 33px (p+p) y el inner llevaba además 10/10px de
   padding por defecto. Recorte (≈30px): gaps a 22px UNIFORMES (p+p 33→22, igual
   que la flex-gap del inner que ya era 22) + inner padding 10/10 → 0. Resultado:
   contenido 159→~129px y card height 247→~214px (PDF). Combinado con margin-top
   -81px (arriba), card bottom cae 1017→~973 → REAPARECE la franja blanca de ~45px
   antes de 'Nuestra esencia' (top 1017, que NO se mueve). NO se toca la fuente
   (20px ya es correcto) ni se introduce ningún margin/<br>. Scope al data-id de
   la tarjeta de Advisors (no toca Accountants/Ayuda). */
.ayc-native.ayc-native [data-id="advieef5f2"] > .e-con-inner {
  gap: 22px;        /* ronda 3: 33→22 (uniforme con el p+p) */
  padding: 0;       /* ronda 3: mata el 10/10 por defecto del inner boxed → -20px de alto */
}
.ayc-native.ayc-native [data-id="advieef5f2"] .elementor-widget-text-editor p + p {
  margin-top: 22px;   /* ronda 3: 33→22 → gap P1→P2 uniforme con el gap P2→P3 */
}

/* ============================================================
   "POR QUÉ ELEGIR AYC ADVISORS" — CHECK VERDE GRUESO (gap auditor)
   El shared servicios-shared.css pinta el ::before del icon-box-title con
   check-green.png (Recurso 19 = palomita FINA). El PDF de Advisors muestra
   junto a cada razón el check GRUESO del diseño (Recurso 20: trazo ancho,
   palomita grande que rebasa el círculo). Override SOLO en Advisors
   ([data-id="advw-grid"], misma especificidad 0,4,1 que el shared pero carga
   después → gana en cascada). Accountants/Ayuda Center conservan el fino del
   shared. El carrusel "Incluye:" sigue con adv-check fino (no se toca).
   Asset: Recurso 20.png → /wp-content/uploads/ayc-icons/check-green-bold.png. */
.ayc-native.ayc-native [data-id="advw-grid"] .elementor-icon-box-title::before {
  background-image: url('/wp-content/uploads/ayc-icons/check-green-bold.png');
}

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

  /* ---- HERO: alto fluido + disclaimer que ENVUELVE (mata el nowrap shared) ---- */
  .ayc-native.ayc-native[data-id="adv-hero-sec"] {
    --min-height: 0px;
    min-height: 0 !important;
  }
  .ayc-native.ayc-native[data-id="adv-hero-sec"] > .e-con-inner {
    padding-top: 56px;
    padding-bottom: 40px;
  }
  .ayc-native.ayc-native[data-id="adv-hero-sec"] [data-id="advh8f2aa8"] > .e-con-inner {
    padding-bottom: 32px;
  }
  /* subtítulo H2 fluido (su max-width 880 sigue cabiendo en tablet, pero lo
     acotamos al inner para no forzar overflow en 768-1024) */
  .ayc-native.ayc-native[data-id="adv-hero-sec"] h2.elementor-heading-title {
    max-width: 100%;
  }
  /* disclaimer del hero: 2-3 líneas en lugar de 1 línea de 1355px. Revertimos
     el truco de centrado absoluto del shared (left:50%/translateX/max-content). */
  .ayc-native.ayc-native [data-id$="hc46abe"] p,
  .ayc-native.ayc-native[data-id="adv-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;
  }

  /* ---- "Qué hacemos" — checklist "Incluye": 3 → 2 columnas ---- */
  .ayc-native.ayc-native [data-id="adv-svc-sec"] .ayc-checklist-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- PROCESO — grid de 6 pasos: 3 → 2 columnas ---- */
  .ayc-native.ayc-native [data-id="adv-proc-grid"] > .e-con-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 70px 30px;
  }

  /* ---- ESENCIA — split 2-col → 1 col apilada, divisor a línea horizontal ---- */
  .ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div {
    flex-direction: column !important;
    max-width: 92% !important;
  }
  .ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div > div:nth-child(1),
  .ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div > div:nth-child(3) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  /* divisor vertical (nth-child 2) → regla horizontal fina entre los 2 bloques.
     El elemento arrastra un min-height (~134px) de su estructura desktop →
     lo anulamos para que sea una línea de 2px, no un bloque verde. */
  .ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div > div:nth-child(2) {
    width: 60% !important;
    height: 2px !important;
    min-height: 0 !important;
    max-height: 2px !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 26px auto !important;
  }
  .ayc-native.ayc-native [data-id="adv-esencia-content"] > div {
    min-height: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* ---- POR QUÉ ELEGIR — círculo float:left + shape-outside → APILADO vertical.
     El círculo (::before del inner) deja de flotar y se centra ARRIBA; las 5
     razones (icon-box widgets) fluyen DEBAJO a ancho completo. Conserva TODO el
     texto (nada se oculta). El title-span de 602px ya envuelve sin el float. ---- */
  .ayc-native.ayc-native [data-id="advw-grid"] > .e-con-inner {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .ayc-native.ayc-native [data-id="advw-grid"] > .e-con-inner::before {
    float: none !important;
    position: relative !important;
    width: 360px !important;
    height: 360px !important;
    max-width: 80vw !important;
    max-height: 80vw !important;
    margin: 0 auto 36px !important;
    shape-outside: none !important;
    shape-margin: 0 !important;
  }
  .ayc-native.ayc-native [data-id="advw-grid"] > .e-con-inner > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* el title del icon-box ya envuelve; aseguramos que no quede en nowrap/ancho fijo */
  .ayc-native.ayc-native [data-id="advw-grid"] .elementor-icon-box-title {
    white-space: normal;
  }

  /* ---- TESTIMONIOS — fila de 3 cards (flex nowrap) → 2 por fila (wrap) ---- */
  .ayc-native [data-id="581ginu8"].ayc-tst-row,
  .ayc-native .ayc-tst-row {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .ayc-native .ayc-tst-card {
    flex: 1 1 280px !important;
    min-width: 260px !important;
  }

  /* ---- CTA FINAL — tarjeta de ancho fijo 1380 → fluida; subtítulo envuelve ---- */
  .ayc-native.ayc-native[data-id="adv-cta-sec"] > .e-con {
    max-width: 92% !important;
  }
  .ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-widget-text-editor p {
    white-space: normal !important;
  }
}

/* ============================================================================
   ════════════════════  RESPONSIVE — MÓVIL (≤767px)  ════════════════════
   Apilado total a 1 columna; gaps/padding mínimos; nada se oculta; sin overflow.
   ============================================================================ */
@media (max-width: 767px) {

  /* ---- HERO ---- */
  .ayc-native.ayc-native[data-id="adv-hero-sec"] > .e-con-inner {
    padding-top: 40px;
    padding-bottom: 32px;
  }
  /* botón del hero: el shared lo fija nowrap + padding 15/40 → a 360px (~340px)
     se sale 5px. Permitimos que envuelva y reducimos el padding lateral para que
     entre holgado. (No toca el tamaño de fuente, que vive en --fs-button.) */
  .ayc-native.ayc-native[data-id="adv-hero-sec"] .elementor-button {
    white-space: normal;
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
  }

  /* ---- "Qué hacemos" — checklist "Incluye": → 1 columna ---- */
  .ayc-native.ayc-native [data-id="adv-svc-sec"] .ayc-checklist-grid {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }

  /* ---- PROCESO — grid de 6 pasos: → 1 columna ---- */
  .ayc-native.ayc-native [data-id="adv-proc-grid"] > .e-con-inner {
    grid-template-columns: 1fr;
    gap: 60px 0;
  }

  /* ---- ESENCIA — 1 col (ya apilada en tablet); márgenes/insets más estrechos ---- */
  .ayc-native.ayc-native [data-id="adv-esencia-content"] > div > div {
    max-width: 100% !important;
  }

  /* ---- POR QUÉ ELEGIR — círculo apilado más pequeño en móvil ---- */
  .ayc-native.ayc-native [data-id="advw-grid"] > .e-con-inner::before {
    width: 240px !important;
    height: 240px !important;
    margin-bottom: 28px !important;
  }

  /* ---- TESTIMONIOS — 3 cards apiladas a 1 columna; chevrons de nav ocultos
     (controles decorativos: con las 3 cards visibles apiladas, todo el contenido
     —cita, avatar, nombre, rol— queda a la vista; no se pierde información) ---- */
  .ayc-native .ayc-tst-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ayc-native [data-id="581ginu8"] .ayc-tst-chev,
  .ayc-native .ayc-tst-chev {
    display: none !important;
  }

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

/* ============================================================================
   [2026-08-24] SECCIÓN PREGUNTAS FRECUENTES (adv-faq-sec)
   19 preguntas del docx "AYC ADV Preguntas Frecuentes" en 5 grupos.
   El componente (lista, ítem, badge, pregunta, respuesta, enlaces) vive en
   native/faq-shared.css. Aquí solo el título de sección, que debe quedar por
   ENCIMA en jerarquía de los títulos de grupo (--fs-faq-grp = 38).
   ========================================================================== */
.ayc-native.ayc-native [data-id="adv-faq-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;                 /* Futura Bold ES 700; 800 = faux-bold */
  font-size: var(--fs-h1);          /* 44 — por encima de los grupos (38) */
  line-height: 1.15;
  color: var(--ayc-navy);
  text-align: center;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}
@media (max-width: 1024px) {
  .ayc-native.ayc-native [data-id="adv-faq-title"] .elementor-heading-title { font-size: var(--fs-section); }
}