/* ============================================================
   AYC — SERVICIOS (capa NATIVA, centralizada, SIN !important).
   Scopeada bajo la clase DOBLADA .ayc-native.ayc-native (gana a
   Elementor .e-con.e-flex sin !important). Reemplaza a servicios.css
   cuando la página 27 está en ayc_native_page_ids().
   Tamaños = escala compacta de marca (hero 64 · sección 44 · card 32 ·
   subtítulo/botón 26 · cuerpo 22 · small 17). Colores = tokens del Kit.
   Tipografía = Futura (de ayc-native.css / style.css @font-face).
   Incluye los 3 fixes de paridad vs PDF: filtro azul hero, banda CTA
   azul plana #0075a9, y gap 0 entre tabs y tarjeta.
   ============================================================ */

/* Raíz: sin gaps/padding por defecto de Elementor (ya viene del bridge, reforzado aquí) */
.ayc-native.ayc-native { color: var(--ayc-ink); }

/* ============================================================
   1) HERO — foto con FILTRO AZUL (fix gap #1) + texto abajo-izq
   ============================================================ */
.ayc-native.ayc-native [data-id="svc-hero-sec"] {
  position: relative;
  min-height: 476px;
  background-position: center top;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 95px; /* el disclaimer legal queda POR ENCIMA del solape de la tarjeta intro (-55px) */
  overflow: hidden;
}
/* Filtro azul de marca: azul arriba → navy abajo (legibilidad), deja ver la foto */
.ayc-native.ayc-native [data-id="svc-hero-sec"]::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Filtro azul de marca (unificado 2026-06-23). La foto Recurso 6 ya trae algo de
     azul horneado → top algo más suave que el canónico (0.32 vs 0.46) para NO
     quedar doble-oscuro, pero claramente azul como el resto de heroes. */
  background: linear-gradient(180deg, rgba(0,73,116,0.32) 0%, rgba(30,39,81,0.60) 100%);
  z-index: 0;
  pointer-events: none;
}
/* El contenido del hero por encima del filtro */
.ayc-native.ayc-native [data-id="svc-hero-sec"] > .e-con-inner,
.ayc-native.ayc-native [data-id="svc-hero-inner"] { position: relative; z-index: 1; }

.ayc-native.ayc-native [data-id="svc-hero-inner"] {
  padding-top: 0;
  padding-bottom: 0;
  justify-content: flex-end;
  max-width: 70%; /* el H1 64 envuelve a 2 líneas como el PDF (antes 60% → 3 líneas) */
  align-self: flex-start;
  gap: 0;
  align-items: flex-start;
}
.ayc-native.ayc-native [data-id="svc-hero-inner"] > .e-con-inner { gap: 0; }

/* H1 — escala hero 64 */
.ayc-native.ayc-native [data-id="svc-hero-h1"],
.ayc-native.ayc-native [data-id="svc-hero-h1"] .elementor-widget-container { margin-bottom: 0; padding-bottom: 0; }
.ayc-native.ayc-native [data-id="svc-hero-h1"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-hero);
  font-weight: 700;              /* RONDA 7: 800→700. Futura Bold @font-face ES 700; pedir 800 daba
                                    faux-bold sintético distorsionado (mismo fix que contacto.css L72). */
  color: var(--ayc-white);
  line-height: 1.1;
  text-align: left;
  margin: 0;
  padding: 0;
}
/* Línea verde divisoria del hero — barra de acento ~90px (PDF), con aire bajo ella */
.ayc-native.ayc-native [data-id="svc-hero-line"] { margin-bottom: 28px; }
.ayc-native.ayc-native [data-id="svc-hero-line"] .elementor-divider-separator {
  border-top: 6px solid var(--ayc-green);
  width: 90px;
}
.ayc-native.ayc-native [data-id="svc-hero-line"] .elementor-divider { text-align: left; }

/* Subtítulo — escala subtítulo 26, pegado al título */
.ayc-native.ayc-native [data-id="svc-hero-sub"],
.ayc-native.ayc-native [data-id="svc-hero-sub"] .elementor-widget-container { margin: 0; padding-top: 0; }
.ayc-native.ayc-native [data-id="svc-hero-sub"] .elementor-heading-title {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  line-height: 1.2;
  text-align: left;
  margin: 0;
  padding: 0;
  /* GAP (re-audit jun-2026): el PDF muestra el subtítulo en 2 líneas
     ("que coordina cada paso con claridad," / "experiencia y acompañamiento real.").
     A 500px forzaba 3 renglones (línea única natural = 1026px → wrap a 2 líneas con
     ~700px de ancho). Subimos max-width 500→700 para que envuelva NATURAL a 2 líneas
     (regla #7: WIDTH gap, sin <br>, sin tocar fs 30). Inner de hero (1000px) lo permite. */
  max-width: 700px;
}

/* Botón hero — verde/blanco, escala botón 26 */
.ayc-native.ayc-native [data-id="svc-hero-btn"] { margin-top: 24px; }
.ayc-native.ayc-native [data-id="svc-hero-btn"] .elementor-button {
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  border-radius: 6px;
  padding: 12px 36px;
  letter-spacing: 0.2px;
  border: 0;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ayc-native.ayc-native [data-id="svc-hero-btn"] .elementor-button:hover {
  background: var(--ayc-green-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(157,196,26,0.5);
}

/* Disclaimer legal del hero — la franja ocupa el ANCHO COMPLETO del inner
   para poder centrar simétrico el <p> respecto al hero (no pegado a un borde).
   El tamaño/centrado/⚠/1-línea los gobierna la regla CENTRAL del bloque
   "DISCLAIMER del hero" de más abajo + servicios-shared.css (invariante #5:
   single source). Aquí NO fijamos width asimétrico ni white-space:normal
   (eso forzaba la 2ª línea); solo estiramos la franja a todo el inner. */
.ayc-native.ayc-native [data-id="svc-hero-legal"] {
  max-width: none;
  width: 100%;
  align-self: stretch;
  margin-top: 16px;
}

/* ============================================================
   2) BANDA INTRO — tarjeta gris flotante, solapa el hero
   ============================================================ */
.ayc-native.ayc-native [data-id="svc-intro-sec"],
.ayc-native.ayc-native [data-id="svc-intro-sec"] > .e-con-inner {
  /* [R3 #2] La SECCIÓN traía fondo BLANCO desde _elementor_data → tapaba el hero
     en la zona de solape (banda blanca full-width) y la card gris no "ocupaba" el
     hero. Forzamos transparente (!important gana al bg del contenedor Elementor)
     → sólo se ve la card gris (svc-intro-inner, #eceeef, radio 20, márgenes 300)
     SOLAPANDO el hero, con el hero visible alrededor/detrás. */
  background: transparent !important;
  background-color: transparent !important;
}
.ayc-native.ayc-native [data-id="svc-intro-sec"] {
  padding: 0;
  margin-top: -55px;
  position: relative;
  z-index: 2;
}
.ayc-native.ayc-native [data-id="svc-intro-inner"] {
  background: #eceeef;
  border-radius: 20px;
  box-shadow: 0 -6px 32px rgba(0,0,0,0.12);
  padding: 36px 40px;
  max-width: none;
  /* GAP (re-audit jun-2026): el TÍTULO de la banda intro debe caer en 2 líneas
     ("En [logo], tenemos 3 áreas especializadas, un mismo compromiso:" / "excelencia
     y gestión profesional."). La 1ª frase mide 1110px en 1 línea; con ml/mr 107 el
     contenido era 1131px y envolvía (sub-pixel + logo inline). Bajamos ml/mr 80→50
     (render efectivo 107→50 con el wrap) → contenido ~1245px, la 1ª frase entra en
     1 línea natural (regla #7: WIDTH gap, sin <br> nuevo). */
  margin-left: 50px;
  margin-right: 50px;
  width: auto;
}
/* El cap real del ancho de contenido vive en el .e-con-inner del contenedor BOXED
   (gotcha 7d): Elementor le pone max-width: min(100%,1200px) → el texto se limitaba
   a 1131px y la 1ª frase del título (1110px) envolvía. Liberamos el cap para que el
   contenido llene el e-con (ahora ml/mr 50 → ~1260px) y la 1ª frase entre en 1 línea. */
.ayc-native.ayc-native [data-id="svc-intro-inner"] > .e-con-inner {
  max-width: 100%;
  width: 100%;
}
/* Texto intro — cuerpo 21, navy; el resalte verde lo trae el propio markup */
.ayc-native.ayc-native [data-id="svc-intro-inner"] .elementor-heading-title,
.ayc-native.ayc-native [data-id="svc-intro-inner"] p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ayc-navy);
  margin: 0;
}
/* TÍTULO de la banda intro = enunciado principal de la sección. TOKEN BASE --fs-h2-lg (36),
   tier lead grande (> sub 21). NOTA (jun-2026): se evaluó subirlo a --fs-section(38) por
   consistencia, pero a 38px la 1ª frase (1298px nowrap) NO entra en 1 línea en el card
   (~1240px) → envolvería a 3 líneas con "compromiso:" huérfana, o exigiría márgenes del
   card ~16px (casi full-bleed, peor que el diseño de 2 líneas con márgenes). 36 conserva el
   layout de 2 líneas del PDF con márgenes correctos y SIGUE siendo token de la base. */
.ayc-native.ayc-native [data-id="svc-intro-title"] .elementor-heading-title,
.ayc-native.ayc-native [data-id="svc-intro-title"] p {
  font-size: var(--fs-h2-lg);
  font-family: var(--ayc-font-head) !important;  /* RONDA 7: título de sección = Futura Bold (no Medium
                                                    heredado del inner). !important vence al pin legacy de style.css. */
  font-weight: 700 !important;                    /* RONDA 7: 800→700. El título no fijaba peso → heredaba el
                                                    800 !important legacy (faux-bold). Canon 700. */
  line-height: 1.3;
  margin-bottom: 16px;
}

/* ============================================================
   3) TABS — fila horizontal, activa verde / inactivas navy
   ============================================================ */
.ayc-native.ayc-native [data-id="svc-tabs-row"] { padding: 32px 0 0 0; }
.ayc-native.ayc-native [data-id="svc-tabs-row"] .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 18px; /* PDF: pills ~352px con separación visible (antes 6px) */
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1089px; /* PDF: fila de tabs ~1089px (antes 1200) */
  margin: 0 auto;
  padding: 0;
}
.ayc-native.ayc-native [data-id="svc-tab1"],
.ayc-native.ayc-native [data-id="svc-tab2"],
.ayc-native.ayc-native [data-id="svc-tab3"] { flex: 1; width: auto; max-width: none; }
.ayc-native.ayc-native [data-id="svc-tab1"] .elementor-widget-container,
.ayc-native.ayc-native [data-id="svc-tab2"] .elementor-widget-container,
.ayc-native.ayc-native [data-id="svc-tab3"] .elementor-widget-container { height: 100%; }

.ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button,
.ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button,
.ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button {
  position: relative;
  overflow: visible;
  width: 100%;
  min-height: 52px;
  height: auto;
  padding: 15px 20px;
  font-family: var(--ayc-font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Tab activo (verde) y su triángulo conector */
.ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button.ayc-btn-active,
.ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button.ayc-btn-active,
.ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button.ayc-btn-active {
  background: var(--ayc-green);
  color: var(--ayc-white);
  box-shadow: 0 4px 18px rgba(157,196,26,0.45);
}
.ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button.ayc-btn-active::after,
.ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button.ayc-btn-active::after,
.ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button.ayc-btn-active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--ayc-green);
  z-index: 10;
}
/* Tabs inactivos (navy) + hover */
.ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button:not(.ayc-btn-active),
.ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button:not(.ayc-btn-active),
.ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button:not(.ayc-btn-active) {
  background: var(--ayc-navy);
  color: var(--ayc-white);
}
.ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button:not(.ayc-btn-active):hover,
.ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button:not(.ayc-btn-active):hover,
.ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button:not(.ayc-btn-active):hover {
  background: var(--ayc-navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(30,39,81,0.3);
}

/* ============================================================
   4) SECCIÓN TARJETAS — fix gap #3: tabs pegados a la tarjeta
   ============================================================ */
/* padding-bottom 10→52: el botón flotante (.ayc-card-cta, position:absolute bottom:-30px)
   de la card MÁS ALTA (card C / Accountants, ~63px más que card A) se metía dentro del
   CTA siguiente ("el botón se pega al contenedor del CTA"). 52px da aire suficiente para
   que el botón flotante de CUALQUIER tab quede por encima del CTA. (2026-06-23) */
.ayc-native.ayc-native [data-id="svc-cards-sec"] { background: var(--ayc-white); padding: 0 0 52px 0; }

/* Wrappers de tarjeta: JS activa uno por tab. Gap 0 con los tabs (fix) */
.ayc-native.ayc-native [data-id="svc-card-a-wrap"],
.ayc-native.ayc-native [data-id="svc-card-b-wrap"],
.ayc-native.ayc-native [data-id="svc-card-c-wrap"] {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.ayc-native.ayc-native [data-id="svc-card-a-wrap"].ayc-tab-active,
.ayc-native.ayc-native [data-id="svc-card-b-wrap"].ayc-tab-active,
.ayc-native.ayc-native [data-id="svc-card-c-wrap"].ayc-tab-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Tarjeta de servicio */
.ayc-native.ayc-native .ayc-service-card {
  width: 100%;
  max-width: 1026px; /* PDF: tarjeta más angosta que la fila de tabs, más aire lateral (antes 1200) */
  margin: 0 auto 36px auto;
  border-radius: 55px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.22);
  overflow: visible;
  background: transparent;
  transition: box-shadow .3s ease, transform .3s ease;
}
.ayc-native.ayc-native .ayc-service-card:hover {
  box-shadow: 0 16px 60px rgba(0,0,0,0.22);
  transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.ayc-native.ayc-native .ayc-card-image {
  position: relative;
  width: 100%;
  height: 560px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 55px 55px 0 0;
  overflow: hidden;
}
/* Overlay navy translúcido flotante */
.ayc-native.ayc-native .ayc-card-overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* GAP (re-audit jun-2026): panel mas ANCHO (84% vs 74%) + padding lateral
     menor (28 vs 36) -> el inner pasa de 687 a ~833px y la descripcion envuelve
     a ~4 lineas como el diseno (regla #7: mas ancho, nunca <br> ni achicar). */
  width: 84%;
  padding: 48px 28px 32px 28px;
  /* panel navy casi opaco (~85%) como el PDF; a 0.56 la flecha azul/foto se
     transparentaba y lavaba el titulo/descripcion blancos. */
  background: rgba(30,39,81,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px 20px 0 0;
  text-align: center;
}
.ayc-native.ayc-native .ayc-card-title {
  font-family: var(--ayc-font-head);
  /* título de tarjeta = texto más grande del panel navy, tier sección (38), mayor
     que body (21) e "Incluye:" (26). Antes --fs-h2 (26) aplanaba la jerarquía. */
  font-size: var(--fs-section);
  /* peso 700 = Futura Bold real (no el boost sintético 800): el head weight
     estándar de la marca (invariantes #2/#4). Delta visual ~nulo (Futura Bold ya
     es pesada); unifica con el resto de títulos head. */
  font-weight: 700;
  color: var(--ayc-white);
  margin: 0 0 16px 0;
  line-height: 1.15;
  text-align: center;
}
.ayc-native.ayc-native .ayc-card-desc {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  /* GAP (re-audit jun-2026): mas ancho (720, cerca del ancho interno del
     overlay) + interlineado mas ajustado (~1.25) -> el texto envuelve a ~4
     lineas como el diseno, no 5. Sin <br> forzado: el line-count cae natural. */
  line-height: 1.25;
  margin: 0 auto;
  max-width: 820px;
  text-align: center;
}
/* Badge numérico verde */
.ayc-native.ayc-native .ayc-card-badge {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-badge);
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(157,196,26,0.5);
  border: 3px solid var(--ayc-white);
}
/* nota: el diámetro real (50px desktop) se fija en el bloque FINAL de overrides
   (regla .elementor-element.elementor-element .ayc-card-badge) que gana por orden. */

/* Cuerpo de la tarjeta (sección "Incluye:") — caja blanca redondeada con sombra
   suave (GAP re-audit jun-2026): el recorte muestra la caja "Incluye" como un
   panel propio con esquinas ~14px y una sombra tenue por debajo. Centralizado
   aquí (gobierna las 3 slides del carrusel de la sección svc-cards-sec). */
.ayc-native.ayc-native .ayc-card-body {
  padding: 32px 60px 36px 60px;
  background: var(--ayc-white);
  position: relative;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.ayc-native.ayc-native .ayc-includes-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ayc-navy);
  margin: 0 0 24px 0;
  text-align: center;
}
/* Checklist */
.ayc-native.ayc-native .ayc-checklist-grid { display: grid; gap: 14px 28px; margin-bottom: 24px; }
.ayc-native.ayc-native .ayc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ayc-native.ayc-native .ayc-cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Ayuda Center: 9 ítems en 5+4 columnas como el PDF p2 (row1=5, row2=4).
   Reducimos el gap de columna (28→16) para dar MÁS ANCHO a cada columna
   (regla #7: ensanchar, no encoger fuente) y minimizar el nº de líneas;
   los ítems siguen en --fs-body. Los ítems largos (frases de 60-70 car.)
   ocupan naturalmente más líneas: se respeta el line-count natural, no se
   fuerzan saltos ni se baja del piso de cuerpo. */
.ayc-native.ayc-native [data-id="svc-card-b"] .ayc-checklist-grid {
  grid-template-columns: repeat(5, 1fr);
  column-gap: 16px;
}
.ayc-native.ayc-native .ayc-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  /* GAP color (re-audit jun-2026): texto de los ítems del checklist = gris-teal
     de marca #839794 (--ayc-muted, PANTONE 5497C, el del wordmark/disclaimer;
     PDF muestrea rgb 130,147,149) — NO navy. El navy de la ronda anterior
     igualaba el ítem al título "Incluye:"; el diseño los diferencia. El ✓ verde
     y el título "Incluye:" navy se conservan. Token, no literal. */
  color: var(--ayc-muted);
  line-height: 1.5;
  transition: color .2s ease;
}
.ayc-native.ayc-native .ayc-check-item:hover { color: var(--ayc-navy); }
.ayc-native.ayc-native .ayc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  width: 22px;
  background: var(--ayc-white);
  color: var(--ayc-green);
  font-size: var(--fs-11);
  font-weight: 700;
  border-radius: 50%;
  border: 2px solid var(--ayc-green);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Botón CTA de la tarjeta — mitad dentro/mitad fuera */
.ayc-native.ayc-native .ayc-card-cta { text-align: center; position: absolute; bottom: -24px; left: 0; right: 0; z-index: 5; }
.ayc-native.ayc-native .ayc-card-btn {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  padding: 8px 24px;
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-size: var(--fs-body);
  font-weight: 700;
  border-radius: 28px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 2px 8px rgba(157,196,26,0.25);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ayc-native.ayc-native .ayc-card-btn:hover {
  background: var(--ayc-green-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(157,196,26,0.40);
  color: var(--ayc-white);
  text-decoration: none;
}

/* ============================================================
   5) BANDA CTA — fix gap #2: AZUL PLANO de marca (#0075a9)
   ============================================================ */
.ayc-native.ayc-native [data-id="svc-cta-sec"] {
  background: var(--ayc-blue);
  padding: 48px 0 64px;
  min-height: 280px;
}
.ayc-native.ayc-native [data-id="svc-cta-inner"] { padding: 0 60px 20px; }
.ayc-native.ayc-native [data-id="svc-cta-h2"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-cta-title); /* CTA CANÓNICO (38) — RONDA 7: el cliente declaró el 64 (display)
                                     SOBREDIMENSIONADO ("no tiene por qué ser así"). Se baja al token
                                     compartido de TODOS los CTA del sitio → consistente, no dominante. */
  font-weight: 700;              /* canon 700, no 800 */
  color: var(--ayc-white);
  line-height: 1.1;
  text-align: center;
  margin: 0 0 20px 0;
}
.ayc-native.ayc-native [data-id="svc-cta-sub"] .elementor-heading-title {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-cta-sub); /* CANON subtítulo CTA (34), no --fs-h2 */
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  text-align: center;
  line-height: 1.4;
  margin: 0 0 36px 0;
}
/* GAP (re-audit jun-2026): botón del CTA = RECTÁNGULO redondeado de esquina pequeña,
   NO el STADIUM pill anterior (radius 28px sobre caja de 54px → extremos totalmente
   redondeados, ~378×54, que el diseño NO quiere). Se aplica el ESTILO CANÓNICO del sitio
   = mismo que el shared de los otros 4 CTA (servicios-shared.css [data-id$="-cta-sec"]):
   border-radius CANON 6px, verde #9dc41a, etiqueta --fs-button (26) Futura Bold vía var,
   padding 15px 40px, una sola línea. Servicios (pág. 27) NO carga servicios-shared.css
   (solo lo cargan 78/69/29/87), así que el canon se expresa aquí con TOKENS de ayc-base
   (sin literales de escala por página). post-27.css fija el pill de Elementor con
   `.elementor-27 …-svc-cta-btn .elementor-button` (0,3,1: radius 50px, font Montserrat 16px,
   padding 16px 44px) → TRIPLE .ayc-native + data-id + .elementor-button (0,4,1) le gana sin
   !important y mata la 3ª familia (Montserrat). */
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-btn"] .elementor-button {
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);   /* Futura Bold (mata Montserrat de post-27) */
  font-size: var(--fs-button);         /* 26 canónico, NO 16 del pill de Elementor */
  font-weight: 700;
  line-height: 1.3;
  border-radius: 6px;                  /* CANON: rect esquina pequeña, NO pill 28/50 */
  padding: 15px 40px;                  /* CANON CTA grande del Home */
  letter-spacing: 0.2px;
  border: 0;
  white-space: nowrap;                 /* "Agenda una consulta" en UNA línea (regla #7) */
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-btn"] .elementor-button:hover {
  background: var(--ayc-green-dark);
  color: var(--ayc-white);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(157,196,26,0.55);
}

/* Quita padding del widget text-editor dentro de las tarjetas (el markup trae su propio padding) */
.ayc-native.ayc-native [data-id="svc-card-a"] .elementor-widget-container,
.ayc-native.ayc-native [data-id="svc-card-b"] .elementor-widget-container,
.ayc-native.ayc-native [data-id="svc-card-c"] .elementor-widget-container { padding: 0; }
.ayc-native.ayc-native [data-id="svc-card-a"] .elementor-text-editor,
.ayc-native.ayc-native [data-id="svc-card-b"] .elementor-text-editor,
.ayc-native.ayc-native [data-id="svc-card-c"] .elementor-text-editor { padding: 0; }

/* ============================================================
   RESPONSIVE — tablet/móvil (desktop ≥1025 intacto arriba)
   ============================================================ */
@media (max-width: 1024px) {
  .ayc-native.ayc-native [data-id="svc-hero-sec"] { min-height: 392px; }
  .ayc-native.ayc-native [data-id="svc-hero-h1"] .elementor-heading-title { font-size: var(--fs-h1); }
  .ayc-native.ayc-native [data-id="svc-hero-sub"] .elementor-heading-title { font-size: var(--fs-hdr-btn-sm); }
  .ayc-native.ayc-native [data-id="svc-intro-inner"] { max-width: 88%; width: 88%; margin-left: auto; margin-right: auto; }
  .ayc-native.ayc-native [data-id="svc-tabs-row"] .e-con-inner { max-width: 88%; }
  .ayc-native.ayc-native .ayc-service-card { max-width: 88%; }
  .ayc-native.ayc-native .ayc-card-image { height: 547px; }
  .ayc-native.ayc-native .ayc-card-overlay { width: 78%; padding: 40px 28px 28px; }
  .ayc-native.ayc-native .ayc-card-title { font-size: var(--fs-h2-xl); }
  .ayc-native.ayc-native .ayc-card-desc { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native .ayc-card-body { padding: 44px 32px 48px; }
  .ayc-native.ayc-native .ayc-cols-3,
  .ayc-native.ayc-native .ayc-cols-4,
  .ayc-native.ayc-native [data-id="svc-card-b"] .ayc-checklist-grid { grid-template-columns: repeat(2, 1fr); }
  .ayc-native.ayc-native [data-id="svc-cta-h2"] .elementor-heading-title { font-size: var(--fs-cta-mob); }
  .ayc-native.ayc-native [data-id="svc-cta-sub"] .elementor-heading-title { font-size: var(--fs-footer-sm); }
}

@media (max-width: 768px) {
  .ayc-native.ayc-native [data-id="svc-hero-sec"] { min-height: 336px; background-position: 70% center; }
  .ayc-native.ayc-native [data-id="svc-hero-inner"] { padding: 0 24px 0; max-width: 100%; }
  .ayc-native.ayc-native [data-id="svc-hero-h1"] .elementor-heading-title { font-size: var(--fs-section); }
  .ayc-native.ayc-native [data-id="svc-hero-sub"] .elementor-heading-title { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="svc-hero-btn"] .elementor-button { font-size: var(--fs-hdr-btn-sm); padding: 9px 28px; }
  .ayc-native.ayc-native [data-id="svc-hero-legal"] { width: calc(100vw - 48px); }
  .ayc-native.ayc-native [data-id="svc-intro-sec"] { margin-top: -40px; }
  .ayc-native.ayc-native [data-id="svc-intro-inner"] { max-width: 92%; width: 92%; padding: 28px 24px; }
  .ayc-native.ayc-native [data-id="svc-tabs-row"] .e-con-inner { flex-wrap: wrap; max-width: 92%; }
  .ayc-native.ayc-native [data-id="svc-tab1"],
  .ayc-native.ayc-native [data-id="svc-tab2"],
  .ayc-native.ayc-native [data-id="svc-tab3"] { flex: 1 1 120px; }
  .ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button,
  .ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button,
  .ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button { font-size: var(--fs-15); height: 44px; min-height: 44px; padding: 10px 12px; }
  .ayc-native.ayc-native .ayc-service-card { max-width: 92%; }
  .ayc-native.ayc-native .ayc-card-image { height: 460px; }
  .ayc-native.ayc-native .ayc-card-overlay { width: 86%; padding: 36px 20px 24px; }
  .ayc-native.ayc-native .ayc-card-title { font-size: var(--fs-badge); }
  .ayc-native.ayc-native .ayc-card-desc { font-size: var(--fs-footer-sm); line-height: 1.6; }
  .ayc-native.ayc-native .ayc-card-body { padding: 40px 20px 44px; }
  .ayc-native.ayc-native .ayc-cols-3,
  .ayc-native.ayc-native .ayc-cols-4,
  .ayc-native.ayc-native [data-id="svc-card-b"] .ayc-checklist-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .ayc-native.ayc-native .ayc-check-item { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="svc-cta-sec"] { padding: 48px 0; }
  .ayc-native.ayc-native [data-id="svc-cta-inner"] { padding: 10px 24px; }
  .ayc-native.ayc-native [data-id="svc-cta-h2"] .elementor-heading-title { font-size: var(--fs-hero-desc); }
  .ayc-native.ayc-native [data-id="svc-cta-sub"] .elementor-heading-title { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="svc-cta-btn"] .elementor-button { font-size: var(--fs-footer-sm); padding: 13px 36px; }
}

@media (max-width: 480px) {
  .ayc-native.ayc-native [data-id="svc-hero-sec"] { min-height: 294px; }
  .ayc-native.ayc-native [data-id="svc-hero-inner"] { padding: 0 16px 0; }
  .ayc-native.ayc-native [data-id="svc-hero-h1"] .elementor-heading-title { font-size: var(--fs-h2-xl); }
  .ayc-native.ayc-native [data-id="svc-hero-sub"] .elementor-heading-title { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="svc-intro-sec"] { margin-top: -30px; }
  .ayc-native.ayc-native [data-id="svc-intro-inner"] { max-width: 96%; width: 96%; padding: 24px 16px; border-radius: 12px; }
  .ayc-native.ayc-native [data-id="svc-tabs-row"] .e-con-inner { flex-direction: column; gap: 4px; max-width: 96%; }
  .ayc-native.ayc-native [data-id="svc-tab1"],
  .ayc-native.ayc-native [data-id="svc-tab2"],
  .ayc-native.ayc-native [data-id="svc-tab3"] { flex: none; width: 100%; }
  .ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button,
  .ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button,
  .ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button { border-radius: 6px; width: 100%; }
  .ayc-native.ayc-native [data-id="svc-tab1"] .elementor-button.ayc-btn-active::after,
  .ayc-native.ayc-native [data-id="svc-tab2"] .elementor-button.ayc-btn-active::after,
  .ayc-native.ayc-native [data-id="svc-tab3"] .elementor-button.ayc-btn-active::after { display: none; }
  .ayc-native.ayc-native .ayc-service-card { max-width: 96%; border-radius: 12px; }
  .ayc-native.ayc-native .ayc-card-image { height: 374px; border-radius: 12px 12px 0 0; }
  .ayc-native.ayc-native .ayc-card-overlay { width: 90%; padding: 32px 16px 20px; border-radius: 12px 12px 0 0; }
  .ayc-native.ayc-native .ayc-card-title { font-size: var(--fs-hdr-btn-sm); }
  .ayc-native.ayc-native .ayc-card-desc { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native .ayc-card-body { padding: 36px 16px 40px; }
  .ayc-native.ayc-native .ayc-card-badge { width: 50px; height: 50px; font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native .ayc-cols-3,
  .ayc-native.ayc-native .ayc-cols-4,
  .ayc-native.ayc-native [data-id="svc-card-b"] .ayc-checklist-grid { grid-template-columns: 1fr; }
  .ayc-native.ayc-native [data-id="svc-cta-h2"] .elementor-heading-title { font-size: var(--fs-h2-xl); }
  .ayc-native.ayc-native [data-id="svc-cta-sub"] .elementor-heading-title { font-size: var(--fs-footer-sm); }
}

/* ------------------------------------------------------------
   GAP FIX (re-audit jun-2026): tarjeta intro MÁS ANCHA para que el
   TÍTULO caiga en 2 líneas como el PDF (1ª frase "En [logo], tenemos
   3 áreas especializadas, un mismo compromiso:" en 1 sola línea +
   "excelencia y gestión profesional." en la 2ª). La 1ª frase mide
   ~1110px en 1 línea + el logo inline; con width 1211 (contenido 1131)
   envolvía a 3 líneas. Subimos a 1320px (contenido ~1240px) → entra en
   1 línea natural (regla #7: WIDTH gap, sin <br>). Sigue centrada y
   simétrica, con aire lateral (~52px c/u @1440). Este bloque (media
   ≥981 + orden) es el que GANA al base L145 (misma 0,2,1).
   ------------------------------------------------------------ */
@media (min-width: 981px) {
  .ayc-native.ayc-native [data-id="svc-intro-inner"] {
    width: min(1320px, 100%);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   PARIDAD HERO @1440 (append-only, sin !important nuevo) —
   cierra gaps de spacing/altura medidos por el auditor.
   ============================================================ */

/* Gap #4 — borde izquierdo del stack del hero a ~x115 (PDF nativo 1440).
   La sección tenía padding-left 80px -> contenido en x90. Subimos a 105px
   (inner añade su propio padding-left:10px) -> contenido en ~x115. Solo ≥1025px
   para no tocar el responsive ya validado. */
@media (min-width: 1025px) {
  .ayc-native.ayc-native [data-id="svc-hero-sec"] { padding-left: 105px; }

  /* Gaps #2/#5 (parcial, layout) — el disclaimer heredaba el cap del inner
     (max-width:60% -> ~739px) y envolvía a 3 líneas, inflando la altura del hero.
     Lo mantenemos en el FLUJO (debajo del botón, mismo borde izq x115) pero le
     damos un margin-right NEGATIVO para que rebase el borde derecho del inner y
     use el ancho amplio del PDF (~desde x115 cruzando >60% del ancho). El ancho
     usable queda topado por calc(100vw) menos el borde izq (~115) y un margen
     derecho (~80). NOTA: con el copy SINGULAR actual (~1635px en 1 línea) NO cabe
     en 1 sola línea; la línea única del PDF depende del copy PLURAL (cambio de
     contenido en _elementor_data) — ver hand-back. Esto reduce de 3 a 2 líneas. */
  /* DISCLAIMER en el FLUJO, a TODO el ancho del inner, CENTRADO (crop del
     diseño: 1 línea centrada bajo el botón, no pegada a la izquierda). El
     centrado simétrico del <p> sobre el eje del hero lo da la regla central
     del texto (.svc-hero-legal-txt: width:max-content + left:50% + translateX).
     Quitamos el position:absolute/left:10px (anclaba a la izq, asimétrico). */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-legal"] {
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: 14px;
    z-index: 2;
  }
  .ayc-native.ayc-native .elementor-element[data-id="svc-hero-legal"] > .elementor-widget-container {
    width: 100%; max-width: none;
  }
  /* Aire abajo en la sección para que el disclaimer quepa dentro de la banda. */
  .ayc-native.ayc-native [data-id="svc-hero-sec"] { padding-bottom: 80px; }
}

/* ============================================================
   SVC-Hero — cierre de gaps medidos (append-only, sin !important).
   Especificidad doblada .elementor-element.elementor-element (0,4,2)
   para ganarle a reglas previas (este archivo + post-27.css 0,3,1)
   por orden + especificidad, sin !important nuevo.
   ============================================================ */

/* GAP type: el titular del hero es un H1 de SECCION, no el titular
   gigante del CTA final -> usar el token centralizado --fs-h1 (44px),
   que produce envoltura a 2 lineas como la referencia. NO hardcode px. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-h1"] .elementor-heading-title {
  font-size: var(--fs-h1);
  line-height: 1.15;
}

/* GAP layout: barra verde acento ~86px (no 200px) en la referencia 1440. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-line"] .elementor-divider-separator {
  width: 86px;
}

/* GAP spacing: ~30px de aire entre la barra acento y el titular. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-line"] {
  margin-bottom: 30px;
}

/* ============================================================
   SVC-CTA — cierre de gaps medidos (append-only, sin !important).
   La banda CTA tenia su fondo PISADO por post-27.css:
   `.elementor-27 .elementor-element.elementor-element-svc-cta-sec
    :not(...) { background: transparent }` = especificidad (0,4,0).
   La regla previa `.ayc-native.ayc-native [data-id="svc-cta-sec"]`
   = (0,2,1) PERDIA -> la banda renderizaba SIN fondo (transparente).
   Subimos especificidad doblando `.elementor-element.elementor-element`
   -> (0,5,1) que GANA a (0,4,0) por especificidad, SIN !important.
   ============================================================ */

/* GAP color (major): gradiente vertical azul token -> navy token,
   reproduce el oscurecimiento navy de la mitad inferior de la banda
   (ref sec_servicios_cta.png x=40 fondo ~#1b2e58 navy). Colores SOLO
   de tokens: --ayc-blue (#0075a9) arriba -> --ayc-navy (#1e2751) abajo.
   NOTA especificidad: el fondo del contenedor `.e-con` de Elementor se
   pinta via shorthand `background` propio del framework que GANA aun
   doblando `.elementor-element` (probado empiricamente: una regla
   no-important de especificidad (0,5,1) inyectada al final del <head>
   computa `none`; solo `!important` pinta). Por eso aqui SI se usa
   `!important` -> es la via de escalado sancionada por la referencia
   (gotcha 5c: "post-N.css gana -> + !important"). Se fijan AMBOS
   longhands (image + color) como recomienda la referencia. */
.ayc-native.ayc-native.ayc-native .elementor-element.elementor-element.elementor-element[data-id="svc-cta-sec"] {
  background-color: var(--ayc-navy) !important;
  background-image: linear-gradient(180deg, var(--ayc-blue) 0%, var(--ayc-navy) 100%) !important;
}

/* GAP spacing (minor): apretar el aire azul bajo el boton al equivalente
   de la referencia (~56px boton-bottom -> band-bottom; antes 94px).
   Se quita el padding-bottom 20px del inner y se reduce el de la seccion
   64px -> 46px. Solo desktop >=1025px (responsive ya validado intacto). */
@media (min-width: 1025px) {
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-cta-sec"] {
    padding-bottom: 46px;
  }
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-cta-inner"] {
    padding-bottom: 0;
  }
}

/* ============================================================
   SVC-Hero — CIERRE DE GAPS MEDIDOS @1440 (append-only, sin
   !important nuevo). Bloque FINAL del archivo: gana por ORDEN
   de origen + especificidad doblada (0,4,2) a las reglas previas
   de este mismo archivo y a post-27.css (0,3,1). Todo via tokens.
   ============================================================ */

/* GAP type (blocker): el H1 del hero es titular de HERO -> escala
   --fs-hero (64px), NO --fs-h1 (44px). La regla previa (linea ~628)
   lo fijaba en --fs-h1; aqui usamos el token centralizado correcto.
   Sin hardcode px. line-height 1.15 mantiene la altura controlada.
   Verificado: a 64px envuelve a 2 lineas si el ancho usable >=980px
   (linea1 "Personas, familias y empresas" = 980px). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-h1"] .elementor-heading-title {
  font-size: var(--fs-hero);
  line-height: 1.15;
}

/* GAP layout (blocker): columna de contenido del hero a ~70% util.
   El inner tenia max-width:70% del content-box de la seccion (1240px)
   = 868px -> usable 848px -> el H1@64 envolveria a 3 lineas. Lo
   ensanchamos a 1020px (usable 1000px, >=980 para 2 lineas y <1289
   para que "encuentran" no suba a la 1a linea). La foto (hombre
   senalando) queda libre a la derecha desde ~x1135. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-inner"] {
  max-width: 1020px;
}

/* GAP layout: el disclaimer del hero va en UNA línea CENTRADA respecto al
   HERO completo (crop del diseño: la frase centrada bajo el botón, no pegada
   a la columna de contenido). El widget vive DENTRO de svc-hero-inner (x≈115,
   ancho 1000), así que para centrar sobre el EJE DEL HERO (no del inner)
   rompemos el widget a ancho de VIEWPORT y lo recentramos: left:50% + tx-50%
   + width:100vw → su centro = centro del viewport = centro del hero. El <p>
   (nowrap, max-content) ya se centra dentro (text-align:center) → 1 línea,
   simétrica, sin <br> ni achicar la fuente (--fs-legal 14). Solo >=1025px. */
@media (min-width: 1025px) {
  /* El widget queda en FLUJO, ancho del inner (no rompe layout). */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-legal"] {
    width: 100%;
    max-width: none;
  }
  /* El <p> (1 línea nowrap ~1310px) se centra sobre el EJE DEL VIEWPORT (=
     eje del hero, que va x0→ancho-completo). Su bloque contenedor es el widget,
     cuyo borde de contenido está a x=115 (section padding-left 105 + inner 10).
     left:calc(50vw - 115px) lleva el borde izq del <p> al centro del viewport;
     translateX(-50%) lo centra → centro del <p> = 50vw = centro del hero.
     Resultado: 1 línea centrada simétrica respecto al hero. */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-legal"] p.svc-hero-legal-txt {
    position: relative;
    left: calc(50vw - 115px);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 48px);
    margin: 0;
  }
}

/* GAP type (minor): el subtitulo renderizaba la cara "Futura Bold" (cuerpo
   debe usar Futura Medium). La cara la PISA style.css legacy con
   `.elementor-widget-heading .elementor-heading-title{font-family:"Futura
   Bold",Montserrat !important}` (gotcha 7c/5c: !important legacy en
   style.css NO dequeue-ado). Solo `!important` lo vence -> sancionado por
   el brief para pins legacy. Tamano 26px y demas siguen via los tokens. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-sub"] .elementor-heading-title {
  font-family: var(--ayc-font-body);
  font-weight: 500;
}

/* ============================================================
   SVC-Hero — CIERRE FINAL gaps medidos @1440 (append-only).
   Bloque FINAL: gana por ORDEN + especificidad doblada.
   ============================================================ */

/* GAP major (layout) — RONDA jun-2026 (pedido cliente: "el intro está mal ubicado"):
   el diseño (PDF SERVICIOS) muestra la tarjeta intro FLOTANDO ~45px sobre el hero
   (esquinas redondeadas dentro de la banda oscura). El -14px previo (para no tapar el
   disclaimer legal del hero) quedó OBSOLETO: el hero creció (ahora hero.bottom=663,
   legal.bottom=573 → 90px de aire bajo el legal). Re-medido @1440: a -45px la tarjeta
   queda en top=618 (45px DEBAJO de legal.bottom=573 → legal visible, sin tapar) y
   recupera el efecto de tarjeta flotante del diseño. Solo >=1025px (móvil @781/@480
   conserva su -40/-30 propio, ya validado). */
@media (min-width: 1025px) {
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-intro-sec"] {
    margin-top: -45px;
  }
}

/* GAP minor (spacing): barra acento verde 86px->90px y grosor 4px->6px
   para 1:1 con la referencia (PDF: x=114-204, w=90px, alto ~6px). Color y
   posicion ya correctos (verde token #9dc41a, left x=115). */
.ayc-native.ayc-native .elementor-element.elementor-element.elementor-element[data-id="svc-hero-line"] .elementor-divider-separator {
  width: 90px;
  border-top-width: 6px;
}

/* ============================================================
   SVC-CARDS — RITMO bloque tarjetas (append-only, sin !important).
   Cierra gaps de spacing medidos @1440:
   - foto 662->560 (-102) + body 44/56->32/36 (-32) + checklist mb -12
     ya recortaron el bloque; total 2749 -> 2523. Estos recortes dejaron
     el boton de la tarjeta SOLAPANDO la banda CTA (gap -33px). Aqui se
     restituye el aire boton->CTA a ~46px como el PDF usando un unico
     lever NO-colapsable: padding-bottom de svc-cards-sec. El margin del
     card se anula para que no colapse de forma impredecible con el
     padding del wrap; el padding de la seccion crea el espacio real.
     Solo >=1025px (responsive movil intacto). ============================================================ */
@media (min-width: 1025px) {
  .ayc-native.ayc-native .ayc-service-card { margin-bottom: 0; }
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-cards-sec"] {
    /* 22→48 (2026-06-23): el botón flotante (.ayc-card-cta, bottom:-30px) se metía
       8px DENTRO del CTA en la card MÁS ALTA (card C / Accountants, que llena su
       wrap sin holgura). 48px > 30px de overhang → el botón de CUALQUIER tab queda
       por encima del CTA. (Las tarjetas más cortas quedan algo más aireadas: sólo
       se ve una a la vez por tabs, sin solape.) */
    padding-bottom: 48px;
  }
}

/* ============================================================
   SVC-TabsCard — CIERRE DE GAPS MEDIDOS @1440 (append-only, sin
   !important nuevo salvo el fondo de seccion pisado por post-27.css
   0,3,0). Bloque FINAL: gana por ORDEN + especificidad doblada
   .elementor-element.elementor-element a reglas previas de este
   archivo. Colores SOLO tokens (navy #1e2751, verde #9dc41a,
   muted #839794, blanco #fff). Tamanos via var(--fs-*).
   ============================================================ */

/* GAP color (re-audit jun-2026, CORREGIDO): los items del checklist "Incluye"
   en GRIS-TEAL de marca #839794 (--ayc-muted, PANTONE 5497C; PDF muestrea
   rgb 130,147,149), NO navy. (La ronda anterior los puso navy igualándolos al
   título "Incluye:"; el diseño los diferencia en el tono muted del wordmark.)
   El ✓ verde y el título "Incluye:" navy se conservan. Esta regla (0,4,1) por
   doble .elementor-element + orden gana sobre la base; ahora apunta al token
   muted para que TODOS los ítems (las 3 slides) usen el mismo gris-teal. */
.ayc-native.ayc-native .elementor-element.elementor-element .ayc-check-item {
  color: var(--ayc-muted);
}

/* GAP color (minor): fondo de la seccion svc-cards-sec BLANCO PURO
   (#fff). post-27.css pinta #F4F5F7 con
   `.elementor-27 .elementor-element.elementor-element-svc-cards-sec
    :not(.elementor-motion-...){background-color:#F4F5F7}` = (0,3,0).
   La regla previa `.ayc-native.ayc-native [data-id]` = (0,2,1) PERDIA.
   El fondo del .e-con lo pinta el framework via shorthand propio que
   gana aun doblando especificidad (mismo caso probado en svc-cta-sec,
   gotcha 5c) -> aqui SI !important sobre AMBOS longhands. */
.ayc-native.ayc-native.ayc-native .elementor-element.elementor-element.elementor-element[data-id="svc-cards-sec"] {
  background-color: var(--ayc-white) !important;
  background-image: none !important;
}

/* GAP layout (minor): tabs como pastillas FLOTANTES con las 4 esquinas
   redondeadas ~10px (recorte: inset top ~9px / bottom ~8px), no
   `6px 6px 0 0` (esquinas inferiores cuadradas). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-tab1"] .elementor-button,
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-tab2"] .elementor-button,
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-tab3"] .elementor-button {
  border-radius: 10px;
}

/* GAP spacing (major): hueco vertical ~60px entre el borde inferior de
   los tabs (y el puntero ▼) y el borde superior de la tarjeta-imagen
   (recorte: tabs bottom ~277 -> imagen top ~343 ≈ 66px). Antes gap=0
   (tabs pegados, puntero solapado sobre la imagen). Se da el aire en el
   padding-bottom de la fila de tabs para que el puntero ▼ (bottom:-12px)
   quede en el aire sobre el fondo, no sobre la imagen. Solo >=1025px
   (responsive movil ya validado intacto). */
@media (min-width: 1025px) {
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-tabs-row"] {
    padding-bottom: 60px;
  }
}

/* GAP (re-audit jun-2026): badge numerico = ESTANDAR AYC de paginas de servicio.
   - Numero a --fs-badge (24px), bien legible y prominente como en el PDF.
   - Disco verde Ø50 (CORREGIDO de 60): el badge "2"/"3" del diseño mide ~50px
     de diámetro (re-audit jun-2026). 24px de número sigue proporcionado al disco.
   - SIN ARO: el PDF muestra el badge como un DISCO VERDE LISO con el número blanco,
     SIN anillo de color (decorative parity). Se quita el border teal 6px que el
     diseño NO tiene; box-sizing border-box porque ya no hay aro que compensar.
     El solape geometrico (top:-30px, straddle imagen/panel navy) y la sombra
     verde se conservan intactos. */
.ayc-native.ayc-native .elementor-element.elementor-element .ayc-card-badge {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  font-size: var(--fs-badge);
  border: 0;
}

/* GAP layout (minor): boton verde "Ver AYC Advisors" como rectangulo
   redondeado radio ~8px (recorte), no pastilla/stadium (28px sobre 42px
   de alto). Copy NO se toca. */
.ayc-native.ayc-native .elementor-element.elementor-element .ayc-card-btn {
  border-radius: 8px;
}

/* ============================================================
   GAPS SVC-TabsCard (auditor 1:1 sobre frame de 1200px):
   (#2 major) Fila de tabs MAS angosta y pills SEPARADOS:
     inner 1200 -> ~1089px (ratio .9075), gap 6 -> 18px =>
     cada pill ~352px con separacion visible (recorte: pills
     x 176..1265, ~352px c/u, gap ~18px). La regla previa
     L164/172 fija max-width:1200/gap:6 en (0,3,0) y gana a un
     wrapper simple; se dobla .elementor-element para (0,5,0).
   ============================================================ */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-tabs-row"] > .e-con-inner {
  max-width: 1089px;
  gap: 18px;
}

/* (#1 major) Tarjeta MAS angosta e insertada: max-width
   1200 -> 1026px (ratio .855), centrada con mas aire lateral
   (recorte: card x 207..1233 vs tabs, aspect ~1026x550=1.87).
   Mantiene height 560 (.ayc-card-image) y tokens de texto.
   La regla previa L269-272 usa .ayc-service-card (0,2,1); se
   dobla .elementor-element para garantizar el win (0,4,1). */
.ayc-native.ayc-native .elementor-element.elementor-element .ayc-service-card {
  max-width: 1026px;
}

/* ============================================================
   GAPS p.1 (auditor jun-2026) — cierre 1:1 vs SERVICIOS copia.pdf.
   Bloque FINAL del archivo: gana por ORDEN + especificidad doblada
   .elementor-element.elementor-element. TODO vía tokens var(--fs-*)
   (ningún font-size literal). Solo desktop ≥1025px donde aplica.
   ============================================================ */

/* GAP (major): SUBTÍTULO del hero ("que coordina cada paso…") = NIVEL 2
   del hero, claramente mayor que el cuerpo. Antes --fs-h3 (26) =
   indistinto del cuerpo/botón. Ahora --fs-hero-desc (30). El style.css
   legacy pisa la familia a Futura Bold con !important (gotcha 7c) → el
   subtítulo debe verse en Futura Medium; ya se re-asigna más arriba.
   Sin hardcode px. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-sub"] .elementor-heading-title {
  font-size: var(--fs-hero-desc);
}

/* GAP (major): DISCLAIMER del hero = mismo tier legal que el footer:
   Myriad Pro + --fs-legal (14px). Antes Futura Medium 11/17px (fuera de
   token). El nuevo markup usa la clase .svc-hero-legal-txt (sin inline
   px). El ⚠ ya viene en el texto. Stack Myriad idéntico al footer. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-legal"] p.svc-hero-legal-txt,
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-legal"] .elementor-widget-container p.svc-hero-legal-txt {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-legal);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-align: center;   /* gap QA jun-2026: centrado bajo el botón, como el footer/diseño */
  /* La frase (~14px) cabe en 1 línea (~1310px) más ancha que la columna de
     contenido. La convertimos en una caja del ancho de su contenido y la
     centramos sobre el EJE DEL VIEWPORT (= eje del hero, x0→ancho-completo),
     NO sobre el eje del widget (que vive desplazado a la izq en la columna).
     El bloque contenedor del <p> es el widget, cuyo borde de contenido está a
     x=115 (section padding-left 105 + inner 10): left:calc(50vw - 115px) lleva
     el borde izq del <p> al centro del viewport, translateX(-50%) lo centra →
     centro del <p> = 50vw = centro del hero. 1 línea, simétrica, sin <br> ni
     achicar la fuente (regla #7). El emoji core de WP ya no se genera (carácter
     literal eliminado del _elementor_data). */
  white-space: nowrap;
  width: max-content;
  max-width: calc(100vw - 48px);   /* tope de seguridad: nunca desbordar el viewport */
  position: relative;
  left: calc(50vw - 115px);
  transform: translateX(-50%);
}
/* ⚠ antepuesto (el texto del _elementor_data NO lo trae; mismo glifo que el
   footer). El emoji core amarillo de WP ya no se genera porque el carácter
   literal se quitó del _elementor_data; lo ocultamos igual por defensa. */
.ayc-native.ayc-native .elementor-element[data-id="svc-hero-legal"] p.svc-hero-legal-txt::before {
  content: "\26A0\FE0E ";
  color: #fff !important;
  margin-right: 4px;
}
.ayc-native.ayc-native .elementor-element[data-id="svc-hero-legal"] p.svc-hero-legal-txt img.emoji {
  display: none !important;
}

/* GAP (major): BOTÓN HERO "Explorar servicios" + ICONO chevron-en-CÍRCULO
   del diseño (antes el "↓" era un carácter de texto, ya removido del
   _elementor_data). El icono es decorativo → se pinta como ::after con
   un SVG inline (círculo de trazo + chevron lima), centrado vertical,
   manteniendo el botón 100% nativo/editable (texto+URL en el panel).
   Tamaño ~34px como la referencia. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-btn"] .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-btn"] .elementor-button .elementor-button-text {
  display: inline-flex;
  align-items: center;
}
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-btn"] .elementor-button .elementor-button-text::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-left: 14px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2044'%3E%3Ccircle%20cx='22'%20cy='22'%20r='20'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'/%3E%3Cpath%20d='M14%2019l8%208%208-8'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* GAP (major): BOTÓN VERDE de la tarjeta ("Ver Ayuda Center" etc.) =
   --fs-button (26px) como el resto de botones del sitio, con padding
   generoso para que iguale el tamaño de los demás (antes 21px, h=42px,
   apretado). Radio 8px (rect redondeado del diseño, ya fijado arriba).
   Sin hardcode px. */
.ayc-native.ayc-native .elementor-element.elementor-element .ayc-card-btn {
  font-size: var(--fs-button);
  padding: 12px 34px;
  line-height: 1.2;
  /* GAP (re-audit jun-2026): la etiqueta envolvia a 2 lineas (box ~290px). El
     boton es width:fit-content -> con white-space:nowrap crece a lo ancho y la
     etiqueta cae en UNA sola linea (regla #7: mas ancho, nunca <br> ni achicar). */
  white-space: nowrap;
}
/* el CTA de la tarjeta queda mitad-dentro/mitad-fuera; con el botón más
   alto bajamos su anclaje para que el solape siga siendo ~half-out. */
.ayc-native.ayc-native .elementor-element.elementor-element .ayc-card-cta {
  bottom: -30px;
}

/* RONDA 7 (pedido cliente): TÍTULO del CTA de Servicios bajado de DISPLAY (64) al CANON compartido
   --fs-cta-title (38). El cliente lo veía SOBREDIMENSIONADO; el diseño lo mostraba dominante pero la
   decisión del cliente (consistencia con los demás CTA, no dominar) PREVALECE sobre la referencia.
   Ancho topado a 720px para envolver natural (regla #7: ancho, nunca <br>). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-cta-h2"] .elementor-heading-title {
  font-size: var(--fs-cta-title);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* GAP (re-audit jun-2026): el subtitulo del CTA debe ser un LEAD prominente del
   CTA (PDF: lead grande, claramente > body, bajo el H2 de 44) = --fs-cta-sub (34),
   su propio NIVEL 2. Se mantiene la cara Futura Medium (peso 500) para que se vea
   claramente mas LIGERO que el titulo bold de 44 y no compita con el. El style.css
   legacy pisa toda .elementor-heading-title a "Futura Bold" !important (gotcha 7c):
   solo `!important` en la familia vence ese pin; el tamano va por token. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-cta-sub"] .elementor-heading-title {
  font-size: var(--fs-cta-sub);
  font-family: var(--ayc-font-body);
  font-weight: 500;
}

/* ============================================================
   GAP #3 (framing): el hero rendía background-position:center center
   (post-27.css 0,3,1 gana a la regla base 0,2,1) → la familia salía
   muy centrada/zoom y el titular se montaba sobre las caras. El crop
   del diseño muestra a las personas MÁS ARRIBA (más headroom) y el
   titular en la franja oscura inferior-izq, despejado de las caras.
   Subimos el encuadre: position 50% 38% (mismo asset, solo posición).
   Doblamos `.elementor-element.elementor-element` (0,4,1) para ganarle
   a post-27.css (0,3,1) SIN !important. Cubrimos el mismo selector que
   Elementor usa (sección directa + capa motion-effects, por si existe).
   ============================================================ */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-sec"]:not(.elementor-motion-effects-element-type-background),
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-sec"] > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-position: 50% 38%;
}

/* ============================================================
   RESPONSIVE — fixes finales tablet/móvil (append-only, SOLO dentro
   de @media; desktop ≥1025 intacto). Cierra el defecto del HERO cuyo
   padding lateral de SECCIÓN (80px heredado del e-con base) NO se
   reducía en móvil → el inner se estrujaba a ~215px y el H1 caía a
   6 líneas en una columna estrecha (x≈96). Aquí bajamos el padding de
   la sección en cada breakpoint para que el inner use el ancho útil.
   Especificidad doblada .elementor-element.elementor-element para
   ganarle al padding base del e-con. Todo vía tokens donde aplica.
   ============================================================ */
@media (max-width: 1024px) {
  /* HERO: padding lateral de sección a 40px (antes 80) + top más
     compacto, para que el bloque de texto (inner) aproveche el ancho
     y el H1 no se estruje. El inner mantiene su max-width 1020 → no
     cambia nada en pantallas anchas (este media solo aplica ≤1024). */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-sec"] {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 96px;
  }
  /* La columna de contenido del hero ocupa el ancho disponible (no la
     cap de 1020 que en tablet la dejaba estrecha tras el padding). */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-inner"] {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  /* MÓVIL: padding lateral de sección mínimo (la columna de texto se
     pega al borde con el aire del inner). H1 en columna ancha → menos
     líneas, legible. */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-sec"] {
    padding-left: 0;
    padding-right: 0;
    padding-top: 88px;
  }
  /* Aire interior del hero a cargo del inner (24px), centrado por flujo. */
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-inner"] {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 480px) {
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="svc-hero-inner"] {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ============================================================
   A2/A4 (jun-2026) — GUTTERS móviles: en ≤768 ningún bloque pegado a los
   bordes (≥16px). Tabs (svc-tab1/2/3 a x=0 ancho completo), cards de servicio
   y la tarjeta intro (a 8px) recibían gutter insuficiente. .elementor-element
   doblada para ganar a los bloques @media previos (≤480 dejaba 96%/x=0).
   ============================================================ */
@media (max-width: 768px) {
  .ayc-native.ayc-native .elementor-element[data-id="svc-tabs-row"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .ayc-native.ayc-native .ayc-service-card,
  .ayc-native.ayc-native .elementor-element[data-id="svc-card-a"],
  .ayc-native.ayc-native .elementor-element[data-id="svc-card-b"],
  .ayc-native.ayc-native .elementor-element[data-id="svc-card-c"] {
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ayc-native.ayc-native .elementor-element[data-id="svc-intro-inner"] {
    max-width: calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
  }
}