/* =====================================================================
   AYC BASE THEME — FUENTE ÚNICA DE VERDAD (design tokens)
   =====================================================================
   Este archivo define los tokens del sistema de diseño AYC para DESKTOP
   y los componentes compartidos. REGLA DEL PROYECTO a partir de ahora:
   - Ninguna regla nueva debe hardcodear colores ni tamaños: usar var().
   - Los CSS por página solo deben contener ajustes ESPECÍFICOS de esa
     página, siempre referenciando estos tokens.
   - Objetivo a mediano plazo (fases F2-F4): vaciar overrides.css y
     responsive.css trasladando estilos a Elementor y a estos tokens.
   Cargado con prioridad 4 (antes que todo el CSS del tema hijo).
   ===================================================================== */

/* ===== FUENTES DE MARCA — ÚNICA familia permitida: Futura MD BT (Bold + Medium).
   @font-face en la BASE para que sea autosuficiente (también está en style.css).
   La URL resuelve relativa a este archivo (theme root) → fonts/ del tema. ===== */
@font-face {
  font-family: 'Futura Bold';
  src: url('fonts/futuramdbt_bold.woff2') format('woff2'),
       url('fonts/futuramdbt_bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura Medium';
  src: url('fonts/futura-md-bt-medium.woff2') format('woff2'),
       url('fonts/futura-md-bt-medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ---- PALETA DE MARCA — 6 colores, HEX EXACTOS del Manual Corporativo
     (pág. 18 "03.1 El Color"). Sistema de design tokens canónico. ---- */
  --color-navy:    #1e2751;  /* PANTONE 533C — titulares/texto fuerte, fondos oscuros */
  --color-green:   #9dc41a;  /* PANTONE 583C — acento/CTA, cifras stat, tab activo */
  --color-blue:    #0075a9;  /* PANTONE 7690C — acento 2º, bandas CTA, proceso */
  --color-muted:   #5F726F;  /* Teal-gris del Manual (PANTONE 5497 #839794) OSCURECIDO
                                a ~4.6:1 sobre blanco para legibilidad WCAG AA, conservando
                                la familia cromática. TEXTO DE CUERPO, etiquetas, footer. */
  --color-muted-brand: #839794; /* el #839794 puro del Manual, por si se necesita en fondos/decoración */
  --color-slate-muted: #62698C; /* azul-gris desaturado para LABELS suaves sobre cifras navy
                                   (crop QS stats → rgb(109,114,142) tras downscale; tinta real
                                   en rango #5A6486–#6E7596). Distinto del navy pleno y del teal #839794. */
  --color-white:   #ffffff;  /* superficies, texto sobre oscuro */
  --color-ink:     #1a1a1a;  /* tinta B/N */

  /* Aliases retro-compat (apuntan a la paleta canónica del Manual) */
  --ayc-navy:        var(--color-navy);
  --ayc-navy-soft:   var(--color-navy);
  --ayc-navy-deep:   #15296A;  /* arco filosofía QS (tono de fondo, no texto) */
  --ayc-blue:        var(--color-blue);
  --ayc-green:       var(--color-green);
  --ayc-green-dark:  #7EA615;
  --ayc-gray-text:   var(--color-muted);
  --ayc-gray-dark:   #374151;
  --ayc-gray-border: #D1D5DB;
  --ayc-bg-light:    #F4F5F7;
  --ayc-bg-soft:     #F7F9FC;
  --ayc-bg-input:    #E9EBEF;
  --ayc-bg-band:     #efefef;  /* gris de BANDA del diseño (Contacto: fondo de la sección
                                  del formulario + relleno de los campos = mismo gris #efefef,
                                  RGB 239,239,239, muestreado en el PDF). Centralizado por si
                                  otra página comparte esta banda gris neutra. */
  --ayc-white:       #FFFFFF;
  --ayc-overlay-hero: rgba(0,15,40,0.65);

  /* ---- ESCALA TIPOGRÁFICA DESKTOP (≥1025px) — 6 tamaños, derivada de
     los PDFs + Manual. La gobierna typography-system.css. ----
       hero 64 · h1/sección 44 · h2/card 32 · h3/sub-botón 26 ·
       body 22 · small/legal 17. Pesos: bold, semibold, regular. */
  --fs-hero:   56px;  /* HERO de TODA página, unificado a 56 (cliente jun-2026, antes 64). NIVEL 1 (el más grande). */
  --fs-section:38px;  /* TÍTULO DE SECCIÓN = NIVEL 3. SUBIDO 34→38 (jun-2026): el DISEÑO de "Qué nos
                         hace diferentes" rinde el encabezado ~38-40 (cap-height medido). Afecta TODAS
                         las secciones (token centralizado) — consistente con el diseño. (carrusel "Qué
                         hacemos/Nuestros Servicios", Por qué elegir, Proceso, Testimonios, CTA final).
                         Escala display intermedia entre hero(64) y h1(44), idéntica en todas las
                         secciones/páginas. Único lugar para cambiar todos los títulos de sección a la
                         vez (de-orfaniza el literal 48px que el verify marcó). */
  --fs-h1:     44px;  /* títulos de sección + cifras de stats (bold) */
  --fs-h2:     26px;  /* títulos de card → NIVEL 4 (32→26, jun-2026) */
  --fs-h3:     26px;  /* subtítulos, texto-botón, tabs, citas (semibold) */
  --fs-body:   21px;  /* cuerpo, listas, nav, footer → NIVEL 5 (21, jun-2026; antes 20). (pedido cliente:
                         estandarizar el "tier de texto" en 20 junto con small y quote). */
  --fs-small:  21px;  /* etiquetas/placeholders → NIVEL 5 (21, jun-2026). (el legal
                         tiene su propio token --fs-legal 14). */
  --fs-button: 26px;  /* TODOS los botones verde-lima a 26px (NIVEL 4, cliente jun-2026, antes 22). Hero/CTA/reseñas/CTA final.
                         Subido a 22px (mín. pedido cliente jun-2026, antes 21). Único lugar para
                         cambiar TODOS los botones a la vez (de-orfaniza el literal 21/22px). */
  /* ----- Tokens añadidos (jun-2026, centralización tras auditoría tipográfica) ----- */
  --fs-page-hero: 56px; /* = --fs-hero (56, ya unificado). H1 de Home + 3 servicio. NIVEL 1. */
  --fs-hero-desc: 34px; /* HERO DESCRIPCIÓN (subtítulo bajo el H1) = NIVEL 2. RONDA 4 (jun-2026):
                           el cliente lo ve SOBREDIMENSIONADO en las 4 páginas → re-medido por LINE-PITCH
                           (método correcto; el bbox de un glyph incluye ascendente+descendente+leading y
                           sobreestima el font-size, que es el error de RONDA 3 → 40px). En los 3 PDFs el
                           subtítulo "Soluciones claras…"/"Contabilidad…"/"Acompañamiento humano…" tiene
                           PITCH entre líneas IDÉNTICO = 50.07pt → ×0.75 = 37.5px CSS pitch @1440; con
                           line-height 1.2 → font = 37.5/1.2 = 31.25px. Se fija a 30px (≈PDF, ligeramente
                           bajo el 31 para honrar la queja "demasiado grande"; lh 1.2 → 36px de pitch).
                           El H1 mide pitch-equiv ~56px → ratio subtítulo/H1 = 0.54 (coherente con el
                           diseño). Envuelve natural en el ancho de 880px (= PDF), SIN <br>.
                           PESO: los 3 PDFs lo muestran BOLD (Futura Bold, trazos pesados, verificado en
                           render del hero) → se MANTIENE la negrilla (700). Único token para los 3
                           subtítulos de hero de servicio (Home no tiene subtítulo de hero). */
  /* CTA FINAL (tarjeta "Da el primer paso…"/"Avanza con claridad…", heading $="-cta-sec"):
     el cliente jun-2026 lo quiere PROMINENTE como un hero (antes 34px = --fs-section, desproporcionado-pequeño).
     RONDA 2: el cliente lo ve DESPROPORCIONADO y pide que use los MISMOS tamaños que el HERO.
     Medido en el PDF (Advisors): título del CTA "Avanza con claridad." cap → 30px CSS, font ≈42px;
     subtítulo del CTA "Agenda una consulta…" cap → 26px CSS, font ≈36px. El título del CTA = TIER HERO
     (≈0.88× el H1 del PDF). Para cumplir "los mismos tamaños que el hero" lo igualamos al H1 del hero:
     título = 48px (TIER HERO, claramente > el 44/34 previo que el cliente veía chico, pero compatible
     con el ancho del lienzo: a 56px la línea 2 más larga "Tu empresa y tu equipo merecen una guía
     confiable." mide 1486px y NO cabe en una tarjeta contenida sin 3ª línea/overflow horizontal — el
     PDF mismo la muestra a ~42px, NO hero-56; 48px honra "prominente como un hero" sin romper el ancho:
     línea 2 = 1274px, cabe en 2 líneas sin <br> forzado); subtítulo = --fs-hero-desc (24, = subtítulo
     del hero). Centralizado para las 3 páginas, sin literales por página. */
  --fs-cta-title: 38px;                /* CTA CANÓNICO COMPARTIDO (Home/Contacto/QS/Ayuda/Advisors): 38px mantiene esos
                                          CTA a 2 líneas con su copy (más largo que el de Servicios). El CTA de la página
                                          SERVICIOS (svc-cta-sec) usa un DISPLAY mayor =--fs-cta-title-display (64) porque su
                                          título es CORTO y el diseño lo pide dominante; ese override vive scopeado en
                                          native/servicios.css con un TOKEN de escala (no literal). No se sube ESTE token global
                                          a 64 porque regresaría Advisors (3 líneas) y Ayuda (overflow horizontal 28px) medidos.
                                          [hist] 50: CTA unificado prominente; [hist] 44/38.
                                          [hist] RONDA 3: el cliente lo quería
                                          "con los MISMOS tamaños que el hero". Medido por bbox (×0.75) en los
                                          PDFs: CTA "Avanza con claridad…" Advisors = 67.2pt → 50.4px CSS; CTA
                                          "Da el primer paso…" Ayuda = 79.2pt → 59.4px CSS. Se unifica a 50px
                                          (= Advisors-PDF exacto, tier hero ~= H1 56, prominente como pidió el
                                          cliente; antes 48 = chico). 50 — y NO 52/56 — porque es el valor que
                                          mantiene el line-count del PDF (2 líneas) en AMBAS páginas sin <br> ni
                                          overflow: la 2ª frase de Advisors "Tu empresa y tu equipo merecen una
                                          guía confiable." mide ~1327px @50 (≤ el contenedor 1380 del card → 2
                                          líneas, = PDF) pero 1380-1486px @52-56 (desborda a 3ª línea); Ayuda
                                          (frase más corta) envuelve a 2 líneas a ≤56, así que 50 también. Único
                                          token para las 3 páginas, medido vs los PDFs. */
  --fs-cta-title-display: 64px;        /* CTA DISPLAY (jun-2026, re-audit del CTA de SERVICIOS): título CORTO del CTA de la
                                          página Servicios ("¿No sabes qué tipo de servicio necesitas?") debe DOMINAR la banda.
                                          Auditoría @1440: cap-height 47.6px CSS → font ≈65px → se mapea al PASO DISPLAY
                                          EXISTENTE de la escala = 64px (mismo valor que --fs-tl-year, el display dominante de
                                          la timeline; el ESCALÓN MÁS ALTO de la escala display, > hero56 > sección38). NO es 56
                                          (ese es --fs-hero, vetado para el CTA) ni peso 800 (sigue 700). Ratio título:subtítulo
                                          = 64/34 ≈ 1.88× (≈ el 1.8× del diseño). SOLO lo usa svc-cta-sec (título corto, 2
                                          líneas a 64); los OTROS CTA (copy más largo) siguen en --fs-cta-title=38 para no
                                          regresar a 3 líneas/overflow. Token de escala (no literal por página). */
  --fs-cta-sub:   34px; /* subtítulo del CTA ("Agenda una consulta…") = NIVEL 2 propio. RONDA 3: medido en los
                           PDFs = Advisors 44pt→33px, Ayuda 46.4pt→34.8px → 34px. Peso REGULAR (gris-teal, el PDF
                           lo muestra en Futura Medium, no bold). Desligado de --fs-hero-desc (que subió a 40):
                           el subtítulo del CTA es algo menor que el del hero, igual que en el diseño. */
  --fs-step:   26px;  /* paso del "proceso" + destacado de esencia → NIVEL 4 (24→26, jun-2026) */
  --fs-quote:  21px;  /* cita/rol de testimonio → NIVEL 5 (21, jun-2026) */
  --fs-proc-num: 34px;/* numeral del disco del "proceso" (de-orfaniza el literal 34px) */
  --fs-legal:  14px;  /* disclaimer/legal del hero (unifica Home 13 + servicio 14 → 14). El rol legal
                         estaba fuera de la escala; nadie usaba --fs-small(17) para esto. */

  /* ----- CHROME (header/footer) tokens — auditoría vs PDF Home jun-2026 -----
     El PDF muestra el header gris-medio (#839395), ligero y compacto, y un
     footer con UNA sola escala de texto consistente (no la mezcla 24/16/14).
     Centralizado aquí para que header-footer.css use var() y no literales. */
  --ayc-chrome-gray:   #839395; /* gris del nav/teléfono del header + texto footer (PDF Home, RGB 131,147,149) */
  --fs-nav:     22px;  /* enlaces del nav del header. SUBIDO 20→22 (2026-06-24, PDF AJUSTES H1a: "menú
                          se ve muy justo, darle un poco más de tamaño"). Techo: a 24px los 4 items +
                          teléfono + Contacto NO caben en una línea → 22 es el máximo que entra. */
  --fs-nav-phone: 22px;/* número de teléfono del header (acompaña el nav a 22, 2026-06-24) */
  --fs-hdr-btn: 22px;  /* etiqueta del botón "Contacto" del header. Auditoría: cap-height 16.8px @1440 →
                          ~22px (cliente: "botones muy chicos"; era 15). Pill ~112w con más padding. */
  --fs-footer:  20px;  /* TEXTO ÚNICO del footer: todas las columnas (enlaces/servicios/dirección/
                          teléfono/Síguenos) al MISMO tamaño. BAJADO 24→20 (jun-2026): el cliente lo
                          ve grande vs el PDF. El diseño muestra AMBAS columnas de links iguales. */
  --fs-footer-legal: 12px; /* disclaimer del footer ("No somos abogados..."): BAJADO 14→12 (2026-06-23):
                              el auditor (escala PDF→live 1.34×) mide la tinta del disclaimer del diseño en
                              17px@PDF = 12.7px live; 14px era ~+1-2px grande y engrosaba la banda legal del
                              footer ("saltos muy altos"). A 12px la frase nowrap entra holgada en 1 línea en
                              el track de 1616px @1920 (cabía ya a 14). Token usado SOLO por el disclaimer del
                              footer + su glifo ⚠ (líneas 361/531/818/1210 header-footer.css). Distinto de
                              --fs-legal (14, hero de servicios). */

  /* ----- TOKENS AUXILIARES (jun-2026, RONDA 1 de-orfanización de literales)
     Centraliza valores fuera de la escala-núcleo que vivían como font-size
     LITERAL en los CSS por página (responsive, chrome legacy, iconos, casos
     únicos por-data-id). Mismo valor renderizado, ahora vía var(). NINGÚN
     font-size literal debe quedar fuera de este archivo. ----- */
  --fs-icon:     48px; /* glifo de icono (.elementor-icon i / icon-box icon) */
  --fs-icon-sm:  30px; /* chevrons ‹ › del carrusel de testimonios + flechas */
  --fs-h2-46:    46px; /* H2 único "Soluciones integrales" (dny0xfaj), per-data-id */
  --fs-promesa:  40px; /* título card "Nuestra Promesa" (lb5iw7ns), per-data-id */
  --fs-h2-lg:    36px; /* subtítulo "Así trabajamos contigo:" (oppvfba2) */
  --fs-cta-mob:  32px; /* CTA H2 en breakpoint tablet (servicios responsive) */
  --fs-h2-xl:    28px; /* lead/strong grandes: promesa <strong>, CTA lead 33wqgkfg, card-title tablet */
  --fs-h4:       23px; /* heading nivel 4 (h4.elementor-heading-title) */
  --fs-hdr-btn-sm: 22px; /* botón/sub hero en breakpoint (= valor 22, distinto rol que --fs-hdr-btn) */
  --fs-badge:    24px; /* número del badge verde de la tarjeta de servicio (desktop) */
  --fs-footer-sm: 20px; /* texto footer en bloques legacy + h6 + badge servicios + responsive */
  --fs-19:       19px; /* botón "Ir al Blog" (read-more, único) */
  --fs-nav-legacy: 17px; /* nav/footer header en bloques legacy SUPERSEDED (no renderiza; de-orfanizado) */
  --fs-nav-sub:  20px; /* sub-items dropdown "Servicios" + label promesa + input genérico */
  --fs-15:       15px; /* descripción cards "Soluciones claras" + botón tabs móvil */
  --fs-12:       12px; /* disclaimer footer legacy + chevron ▾ Servicios */
  --fs-11:       11px; /* badge check del checklist (servicios) */
  --fs-hero-title: 48px; /* TÍTULO DEL HERO de páginas (Contacto): el titular hero en 1 línea.
                            NO es --fs-hero(56): a 56 envuelve a 2 líneas; medido en sec_*_hero.png
                            ≈48px efectivo. Único lugar para el valor (antes vivía como literal en
                            contacto.css por-data-id). */
  --fs-faq-grp:  38px; /* título de GRUPO (H2) de la lista de FAQ. Entre card(32) y h1(44),
                          medido 1:1 contra el PDF de FAQ (de-orfaniza el literal 38px). */
  --fs-13:       13px; /* fine-print 13px: legal del hero de FAQ (faq-hero-legal). Distinto de
                          --fs-legal(14)/--fs-12(12); el diseño de FAQ lo pide a 13. */
  --fs-tl-year:  64px; /* AÑO del slide de la línea de tiempo (Quiénes Somos, qs-tl). Display
                          dominante del slide, > --fs-hero(56) en jerarquía visual (medido vs
                          qs-crops/timeline.png). Único display de la timeline; vive como token
                          para no dejar literal en native/quienes-somos.css. */
  --fs-philo-arc:    34px; /* texto blanco central del ARCO de la sección Filosofía (QS, qs-philo).
                              "Es un compromiso real, que se siente…". = tier --fs-section (34): en el
                              PDF (Sobre Nosotros) mide cap ~45px @lienzo-2667 → ~34px CSS @1440,
                              idéntico al título "Nuestra filosofía". Único display del arco. */
  /* --fs-philo-bubble RETIRADO (jun-2026): el círculo de Filosofía usaba 16px (sub-escala, "letra
     propia" < cuerpo). Ahora usa el TOKEN ESTÁNDAR --fs-body (21) con círculo más grande. NO crear
     tamaños fuera de la escala estándar (hero56/desc34/sección38/card·botón26/cuerpo21). */

  /* Aliases retro-compat de tamaños */
  --ayc-fs-legal:      var(--fs-legal);
  --ayc-fs-fine:       var(--fs-small);
  --ayc-fs-body-sm:    var(--fs-body);
  --ayc-fs-body:       var(--fs-body);
  --ayc-fs-subtitle:   var(--fs-h3);
  --ayc-fs-h3:         var(--fs-h2);
  --ayc-fs-card-title: var(--fs-h2);
  --ayc-fs-h3-lg:      var(--fs-h2);
  --ayc-fs-h2:         var(--fs-h1);
  --ayc-fs-stat:       var(--fs-h1);
  --ayc-fs-h2-home:    var(--fs-h1);
  --ayc-fs-h1:         var(--fs-hero);
  --ayc-fs-h1-xl:      var(--fs-hero);

  /* ---- INTERLINEADO / FUENTES ---- */
  --ayc-lh-body:    1.6;
  --ayc-lh-heading: 1.2;
  --ayc-font-head:  'Futura Bold', sans-serif;    /* SOLO Futura MD BT Bold (futuramdbt_bold.otf) + genérico */
  --ayc-font-body:  'Futura Medium', sans-serif;  /* SOLO Futura MD BT Medium (futura-md-bt-medium.ttf) + genérico */

  /* ---- COMPONENTES COMPARTIDOS ---- */
  --ayc-radius-card: 14px;
  --ayc-radius-card-lg: 20px;
  /* Campos de formulario: borde + radio UNIFORMES en todos los campos
     (input/textarea/select). El default de Elementor pinta input/textarea con
     borde #e0e0e0 y radio 4px; el <select> escapaba a la regla base (#efefef/6px)
     → se veía distinto. Centralizado aquí para que TODOS los campos coincidan. */
  --ayc-field-border: #e0e0e0;
  --ayc-field-radius: 4px;
  --ayc-shadow-card: 0 4px 22px rgba(0,0,0,.10);
  --ayc-section-pad-y: 80px;
  --ayc-gap-cards: 26px;
}

/* =====================================================================
   ESCALA TIPOGRÁFICA RESPONSIVE — CENTRALIZADA (2026-06-21)
   =====================================================================
   FUNDACIÓN responsive compartida (afecta TODAS las páginas). SOLO se
   redefinen los tokens --fs-* del :root dentro de @media; el DESKTOP
   (≥1025px) queda BYTE-IDÉNTICO (estos bloques NO aplican ahí).
   REGLA: ninguna página pone font-size propio — la tipografía móvil
   vive aquí, en tokens. Cuerpo nunca baja de 16px. legal/footer-legal
   se conservan en 12-14 (no se tocan).
   ===================================================================== */

/* ---- TABLET (≤1024px): reducción moderada de la escala display/cuerpo ---- */
@media (max-width: 1024px) {
  :root {
    --fs-hero:              46px;
    --fs-page-hero:         46px;
    --fs-hero-title:        40px;
    --fs-section:           32px;
    --fs-faq-grp:           32px;
    --fs-h1:                36px;
    --fs-h2:                24px;
    --fs-h3:                24px;
    --fs-cta-title:         32px;
    --fs-cta-title-display: 46px;
    --fs-cta-sub:           26px;
    --fs-hero-desc:         27px;
    --fs-step:              22px;
    --fs-quote:             19px;
    --fs-body:              18px;
    --fs-small:             18px;
    --fs-button:            22px;
    --fs-tl-year:           46px;
    --fs-philo-arc:         27px;
  }
}

/* ---- MÓVIL (≤767px): escala mínima LEGIBLE (cuerpo nunca < 16px) ---- */
@media (max-width: 767px) {
  :root {
    --fs-hero:              32px;
    --fs-page-hero:         32px;
    --fs-hero-title:        28px;
    --fs-section:           26px;
    --fs-faq-grp:           26px;
    --fs-h1:                28px;
    --fs-h2:                22px;
    --fs-h3:                22px;
    --fs-cta-title:         26px;
    --fs-cta-title-display: 32px;
    --fs-cta-sub:           21px;
    --fs-hero-desc:         21px;
    --fs-step:              20px;
    --fs-quote:             17px;
    --fs-body:              16px;
    --fs-small:             16px;
    --fs-button:            18px;
    --fs-tl-year:           34px;
    --fs-philo-arc:         21px;
  }
}

/* ---- MÓVIL (≤767px): GUTTER LATERAL MÍNIMO de secciones (pedido cliente
   "en general hay secciones pegadas a los bordes, deja mínimo un margen").
   Sube el padding lateral de CADA sección top-level .ayc-native a un mínimo de
   16px. Como se aplica al .e-con (la sección), el FONDO full-bleed (color/imagen
   de banda) sigue a ancho completo; solo el CONTENIDO se insetea. max() respeta
   los que ya tienen más (heroes, intros tuneadas). Las reglas por-sección con
   !important (Servicios/Home/QS) siguen mandando. Sólo afecta secciones
   top-level (clase ayc-native) → NO duplica padding en contenedores anidados. */
@media (max-width: 767px) {
  .ayc-native.ayc-native.e-con {
    padding-inline-start: max(16px, var(--padding-inline-start, 0px));
    padding-inline-end:   max(16px, var(--padding-inline-end, 0px));
  }
}

/* =====================================================================
   COMPONENTES COMPARTIDOS BASE (clases de referencia para nuevas piezas;
   los componentes existentes migrarán aquí en las fases F2-F3)
   ===================================================================== */
.ayc-c-card {
  background: var(--ayc-bg-card, var(--ayc-white));
  border-radius: var(--ayc-radius-card);
  box-shadow: var(--ayc-shadow-card);
}
.ayc-c-title { font-family: var(--ayc-font-head); color: var(--ayc-navy); line-height: var(--ayc-lh-heading); }
.ayc-c-body  { font-family: var(--ayc-font-body); color: var(--ayc-gray-text); font-size: var(--ayc-fs-body); line-height: var(--ayc-lh-body); }
.ayc-c-btn-green { background: var(--ayc-green); color: var(--ayc-white); }
.ayc-c-btn-green:hover { background: var(--ayc-green-dark); color: var(--ayc-white); }

/* ---- Anti scroll-horizontal GLOBAL (2026-06-23) ----
   `overflow-x: clip` en la raíz elimina cualquier desbordamiento horizontal (p.ej.
   el círculo decorativo de "Nuestra Promesa" a ~1280-1366px) SIN crear contenedor
   de scroll → NO rompe position:sticky (header), fixed (FAB WhatsApp) ni los
   carruseles (que gestionan su propio overflow). El sitio nunca scrollea en X. */
html, body { overflow-x: clip; max-width: 100%; }

/* ---- Listas "Incluye" / "Esto te permite" de las páginas de servicio ----
   (2026-06-23) Los grids .ayc-checklist-grid venían con columnas inconsistentes
   (3 vs 4 inline) → filas dispares (hasta 3-4). Se estandarizan a 4 columnas en
   desktop / 2 en tablet / 1 en móvil (row-flow) → la mayoría (5-8 ítems) queda en
   2 filas, parejo y consistente en las 3 páginas (Advisors/Ayuda/Accountants). */
.ayc-native .ayc-checklist-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-content: start;
}
@media (max-width: 1024px) {
  .ayc-native .ayc-checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .ayc-native .ayc-checklist-grid { grid-template-columns: 1fr !important; }
}

/* ---- RESEÑAS: carrusel Swiper GLOBAL (Home + páginas de servicio) ----
   (2026-06-23) ayc-reviews.js arma .ayc-rev-swiper en .ayc-tst-row. Incluye el
   LAYOUT CORE de Swiper (wrapper flex, slides no-shrink) porque el swiper.css de
   Elementor NO se carga en las páginas de servicio → sin esto los slides se
   APILABAN en vertical (sección de miles de px). Self-contained = funciona en
   todas. El padding-top deja salir el avatar que sobresale por arriba. */
.ayc-native .ayc-rev-swiper { width: 100%; overflow: hidden; position: relative; padding-top: 24px; }
.ayc-native .ayc-rev-swiper .swiper-wrapper {
  display: flex; box-sizing: content-box; position: relative; z-index: 1; align-items: stretch;
}
.ayc-native .ayc-rev-swiper .swiper-slide {
  flex-shrink: 0; position: relative; height: auto; display: flex; box-sizing: border-box;
}
.ayc-native .ayc-rev-swiper .swiper-slide .ayc-tst-card {
  flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important;
  min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
}