/* ============================================================
   HOME (native) — afinado vs HOME - AYC GROUP.pdf @1440. Append-only, scopeado.
   OJO SELECTORES: el clone puso la clase `ayc-native` en CADA sección top-level,
   así que la sección ES .ayc-native (no está dentro de una). Por eso:
     - sección top-level  → `.ayc-native.ayc-native[data-id="X"]`  (SIN espacio = mismo elemento)
     - elemento anidado   → `.ayc-native [data-id="X"]`            (CON espacio = descendiente)
   La clase doblada da especificidad (0,3,0) y gana al CSS del template (post-13.css).
   ============================================================ */

/* ---------- RITMO VERTICAL de bandas (el legacy daba padding; nativo quedó en 0) ---------- */
.ayc-native.ayc-native[data-id="nchb1fkt"],   /* Soluciones integrales (blanca) */
.ayc-native.ayc-native[data-id="sj6v5zqm"],   /* Confianza (blanca) */
.ayc-native.ayc-native[data-id="ef72b413"],   /* Nuestra Promesa (blanca) */
.ayc-native.ayc-native[data-id="vw9xt2jg"] {  /* Artículos (blanca) */
  padding-top: 72px !important; padding-bottom: 72px !important;
}
.ayc-native.ayc-native[data-id="ixz9ksb1"],   /* Soluciones claras (navy) */
.ayc-native.ayc-native[data-id="sx7r0nl2"] {  /* Testimonios (navy) */
  padding-top: 84px !important; padding-bottom: 84px !important;
  background-color: var(--ayc-navy) !important;   /* navy de marca */
}
.ayc-native.ayc-native[data-id="8x0l93wp"] {  /* CTA final */
  padding-top: 64px !important; padding-bottom: 64px !important;
  background: linear-gradient(100deg, #0089c2 0%, #1e2751 72%) !important;
}

/* ---------- HERO (conserva la imagen actual): contenido CENTRADO + overlay oscuro + título 2 líneas ---------- */
.ayc-native.ayc-native[data-id="vrz9flip"] {
  min-height: 660px !important; justify-content: center !important; position: relative !important;
}
.ayc-native.ayc-native[data-id="vrz9flip"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Filtro azul de marca CANÓNICO (unificado 2026-06-23) — antes navy neutro,
     ahora azul→navy como el resto de heroes. */
  background: linear-gradient(180deg, rgba(0,73,116,0.50) 0%, rgba(30,39,81,0.70) 100%);
}
.ayc-native.ayc-native[data-id="vrz9flip"] > * { position: relative; z-index: 1; }
/* bloque de contenido del hero centrado */
.ayc-native [data-id="l9417o9n"] { align-items: center !important; text-align: center; gap: 1.6rem; }
.ayc-native [data-id="l9417o9n"] .elementor-heading-title {
  max-width: 820px !important; margin-inline: auto !important; line-height: 1.15;
}
.ayc-native [data-id="l9417o9n"] .elementor-widget-text-editor { max-width: 920px; margin-inline: auto; opacity: .92; }

/* ---------- "Nuestra Promesa": tarjeta gris redondeada (contenedor ANIDADO 9ocgr3gm) ---------- */
.ayc-native [data-id="9ocgr3gm"] {
  background: #eceeec !important; border-radius: 24px !important;
  padding: 48px 56px !important;
}

/* ---------- Formulario "Soluciones integrales": campos subrayado limpio (PDF), no cajas ----------
   El form (Zoho) trae estilos inline/box → forzamos con !important el look de marca. */
.ayc-native.ayc-native input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.ayc-native.ayc-native textarea,
.ayc-native.ayc-native select {
  border: 0 !important; border-bottom: 1.5px solid #c7ccca !important; border-radius: 0 !important;
  background: transparent !important; padding: 10px 2px !important; font-family: var(--ayc-font-body) !important;
  font-size: var(--fs-nav-sub) !important; color: var(--ayc-ink) !important; width: 100% !important; box-shadow: none !important; outline: none !important;
}
.ayc-native.ayc-native textarea { border: 1.5px solid #c7ccca !important; border-radius: 6px !important; padding: 10px !important; }
.ayc-native.ayc-native input:focus,
.ayc-native.ayc-native textarea:focus,
.ayc-native.ayc-native select:focus { border-bottom-color: var(--ayc-green) !important; }
/* Botón Enviar del form → navy de marca (venía azul genérico) */
.ayc-native.ayc-native input[type="submit"],
.ayc-native.ayc-native button[type="submit"] {
  background: var(--ayc-navy) !important; color: var(--ayc-white) !important;
  border: 0 !important; border-radius: 6px !important; padding: 10px 28px !important;
  font-family: var(--ayc-font-head) !important; font-weight: 700 !important; font-size: .95rem !important;
  width: auto !important; cursor: pointer; transition: background .2s;
}
.ayc-native.ayc-native input[type="submit"]:hover,
.ayc-native.ayc-native button[type="submit"]:hover { background: var(--ayc-navy-deep) !important; }

/* ============================================================
   RONDA PROFUNDA — COLORES DE MARCA EXACTOS (Manual pág 18)
   Varios elementos traían #4CAF50 (verde material VIEJO, MAL) hardcodeado en
   los settings del widget → se fuerzan al verde de marca #9dc41a (var --ayc-green).
   ============================================================ */
/* Botones primarios verdes: hero "Agendar cita", CTA "Agenda tu cita",
   testimonios "Ver las reseñas" (venía con fondo negro) */
.ayc-native [data-id="1kg6tj85"] .elementor-button,
.ayc-native [data-id="kuhn6vhj"] .elementor-button,
.ayc-native [data-id="4fnlvbb2"] .elementor-button {
  background-color: var(--ayc-green) !important;
  color: var(--ayc-white) !important;
  border: 0 !important;
}
.ayc-native [data-id="1kg6tj85"] .elementor-button:hover,
.ayc-native [data-id="kuhn6vhj"] .elementor-button:hover,
.ayc-native [data-id="4fnlvbb2"] .elementor-button:hover {
  background-color: var(--ayc-green-dark) !important;
}
/* Botón testimonios (widget Google Reviews "Ver las reseñas") venía NEGRO+verde viejo → verde marca + blanco */
.ayc-native.ayc-native [data-id="4fnlvbb2"] a.elementor-button,
.ayc-native.ayc-native [data-id="4fnlvbb2"] .elementor-button-link {
  background-color: var(--ayc-green) !important; color: var(--ayc-white) !important; border-color: var(--ayc-green) !important;
}

/* Tabs "Soluciones integrales": pestaña ACTIVA verde de marca (venía #4CAF50) */
.ayc-native [data-id="6eeek77d"] .elementor-tab-title.elementor-active {
  background-color: var(--ayc-green) !important;
  color: var(--ayc-white) !important;
  border-color: var(--ayc-green) !important;
}
/* pestañas inactivas: outline navy de marca */
.ayc-native [data-id="6eeek77d"] .elementor-tab-title:not(.elementor-active) {
  color: var(--ayc-navy) !important;
  border-color: var(--ayc-navy) !important;
}

/* CTA final: degradado con el AZUL EXACTO del manual (#0075a9) → navy */
.ayc-native.ayc-native[data-id="8x0l93wp"] {
  background: linear-gradient(100deg, #0075a9 0%, #1e2751 78%) !important;
}

/* "Contáctanos" (columna izq de Soluciones): botón VERDE de marca (PDF), no link transparente */
.ayc-native.ayc-native .contactanos-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ayc-green) !important; color: var(--ayc-white) !important;
  padding: 11px 26px !important; border-radius: 8px !important;
  font-family: var(--ayc-font-head) !important; font-weight: 700 !important;
  text-decoration: none !important; transition: background .2s; margin-top: 8px;
}
.ayc-native.ayc-native .contactanos-btn:hover { background: var(--ayc-green-dark) !important; color: #fff !important; }

/* Tab 2 (Ayuda Center) NAVY relleno como el PDF (las otras inactivas quedan outline) */
.ayc-native [data-id="6eeek77d"] .elementor-tab-title[data-tab="2"]:not(.elementor-active) {
  background-color: var(--ayc-navy) !important; color: var(--ayc-white) !important; border-color: var(--ayc-navy) !important;
}

/* "Nuestra Promesa": logo dentro de una CIRCUNFERENCIA clara a la derecha (PDF) */
.ayc-native [data-id="2s3d2i03"] {
  background: #f7f8f6;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 300px; max-width: 300px;
  margin-left: auto; margin-right: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}
.ayc-native [data-id="2s3d2i03"] img { width: 100%; height: auto; }

/* ============================================================
   RONDA AUDITOR (cierre detallado vs PDF) — 2026-06-10
   ============================================================ */

/* STATS [#1,#2,#17]: números VERDES + Futura (eran navy/Montserrat); iconos más chicos */
.ayc-native.ayc-native [data-id="qh0b8rle"] h3,
.ayc-native.ayc-native [data-id="qh0b8rle"] .elementor-image-box-title {
  color: var(--ayc-green) !important; font-family: var(--ayc-font-head) !important; font-weight: 700 !important;
}
.ayc-native.ayc-native [data-id="qh0b8rle"] img { width: 34px !important; height: auto !important; }

/* FORMULARIO [#3]: todo en Futura (venía Arial del plugin) */
.ayc-native.ayc-native [data-id="1ppisbmk"] *,
.ayc-native.ayc-native [data-id="1ppisbmk"] input,
.ayc-native.ayc-native [data-id="1ppisbmk"] select,
.ayc-native.ayc-native [data-id="1ppisbmk"] textarea,
.ayc-native.ayc-native [data-id="1ppisbmk"] label { font-family: var(--ayc-font-body) !important; }

/* CTA [#8]: aire vertical (inner padding 0 → apretado) + separación heading/sub/botón */
.ayc-native.ayc-native[data-id="8x0l93wp"] { padding-top: 84px !important; padding-bottom: 84px !important; }
.ayc-native [data-id="lxmk9tcy"] { padding-top: 8px !important; padding-bottom: 8px !important; gap: 18px; }
.ayc-native [data-id="lxmk9tcy"] .elementor-heading-title { margin-bottom: 14px !important; }
.ayc-native [data-id="lxmk9tcy"] .elementor-widget-button { margin-top: 22px !important; }

/* NUESTRA PROMESA [#10]: métricas VERDES + Futura + grandes (eran 15px Open Sans gris) */
.ayc-native [data-id="ytds4dmc"] { font-family: var(--ayc-font-body) !important; }
.ayc-native [data-id="ytds4dmc"] strong {
  color: var(--ayc-green) !important; font-family: var(--ayc-font-head) !important;
  font-size: var(--fs-h2-xl) !important; font-weight: 700 !important;
}

/* TESTIMONIOS [#19]: banda navy de marca exacto + estrellas verdes */
.ayc-native.ayc-native[data-id="sx7r0nl2"] { background-color: var(--ayc-navy) !important; }
.ayc-native [data-id="sx7r0nl2"] .ayc-grev-stars { color: var(--ayc-green) !important; }

/* HEADINGS [#20]: navy de marca #1e2751 (no #003366) en secciones claras */
.ayc-native.ayc-native [data-id="1ppisbmk"] .elementor-heading-title,
.ayc-native.ayc-native [data-id="9ocgr3gm"] .elementor-heading-title,
.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-heading-title { color: var(--ayc-navy) !important; }

/* SOLUCIONES CLARAS cards [#15,#16,#20]: sin "oreja", texto IZQUIERDA, títulos navy, igual altura */
.ayc-native [data-id="bbslyhfe"], .ayc-native [data-id="s1m0bqcn"], .ayc-native [data-id="3pitxuf4"] {
  clip-path: none !important; text-align: left !important; align-self: stretch !important;
}
.ayc-native [data-id="bbslyhfe"]::before, .ayc-native [data-id="bbslyhfe"]::after,
.ayc-native [data-id="s1m0bqcn"]::before, .ayc-native [data-id="s1m0bqcn"]::after,
.ayc-native [data-id="3pitxuf4"]::before, .ayc-native [data-id="3pitxuf4"]::after { content: none !important; display: none !important; }
.ayc-native [data-id="bbslyhfe"] .elementor-heading-title,
.ayc-native [data-id="s1m0bqcn"] .elementor-heading-title,
.ayc-native [data-id="3pitxuf4"] .elementor-heading-title { color: var(--ayc-navy) !important; text-align: left !important; }
.ayc-native [data-id="bbslyhfe"] p, .ayc-native [data-id="s1m0bqcn"] p, .ayc-native [data-id="3pitxuf4"] p { text-align: left !important; }
/* fila de cards a igual altura */
.ayc-native [data-id="myg8of7f"] > .e-con-inner { align-items: stretch !important; }

/* [#14 REVERTIDO 2026-06-12] El cliente SÍ quiere el CTA "Ver todos los servicios"
   visible bajo el contenido del tab (enlaza a /servicios/). Se elimina el display:none.
   Estilo del CTA: ver ronda final al pie de este archivo. */
/* Ocultar meta de blog (no del PDF) */
.ayc-native [data-id="ucsnnxvc"] .elementor-post-date,
.ayc-native [data-id="ucsnnxvc"] .elementor-post__meta-data,
.ayc-native [data-id="vw9xt2jg"] .elementor-post-date,
.ayc-native [data-id="vw9xt2jg"] .elementor-post__meta-data { display: none !important; }

/* OVERRIDES de fondo con clase TRIPLICADA (0,4,0) — post-13.css pisa con 0,3,0 + !important */
.ayc-native.ayc-native.ayc-native[data-id="sx7r0nl2"],   /* testimonios → navy de marca */
.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] {  /* soluciones claras → navy de marca */
  background-color: #1e2751 !important; background-image: none !important;
}
.ayc-native.ayc-native.ayc-native[data-id="8x0l93wp"] {  /* CTA → degradado azul→navy del PDF */
  background-color: #0075a9 !important;
  background-image: linear-gradient(100deg, #0075a9 0%, #1e2751 78%) !important;
}

/* [#5] "Ir al Blog" DUPLICADO: el texto viene del JS + un ::after con content "Ir al Blog" → quitar el ::after */
.ayc-native .elementor-post__read-more::after { content: none !important; }

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-10 (cierre cliente: flechas, círculo,
   hero, promesa, headings de proceso, fuentes reseñas/submenu)
   Clase TRIPLICADA (0,4,0)+!important donde post-13.css pisa (0,3,0).
   ============================================================ */

/* [#5-cards] TÍTULOS DE PASO (Atendemos/Diseñamos/Acompañamos): heredaban
   26px/800/#003366/LH25.6px del título de banda → compactos 16px navy de marca.
   IDs de los headings de las 3 cards: ojot1sgd / qc6hehwt / njio8v9u. */
.ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="njio8v9u"] .elementor-heading-title {
  /* tamaño lo gobierna la regla GLOBAL h3.elementor-heading-title (28px) */
  font-weight: 700 !important;
  color: #ffffff !important;          /* tarjetas en banda navy → título blanco legible (el PDF usa blanco sobre navy) */
  line-height: 1.3 !important;
  font-family: var(--ayc-font-head) !important;
}

/* [#6] CÍRCULO VERDE NUMERADO: debe SOLAPAR el borde superior de la card
   (mitad fuera / mitad dentro). El círculo es el <div> dentro de los
   text-editor njz7rtfr / epre1cla / yrd3fj94 (primer hijo de cada card).
   Subimos el widget con margin-top negativo y damos padding-top a la card
   para que el círculo cruce el borde sin recortarse. */
.ayc-native [data-id="bbslyhfe"], .ayc-native [data-id="s1m0bqcn"], .ayc-native [data-id="3pitxuf4"] {
  padding-top: 26px !important; overflow: visible !important;
}
.ayc-native [data-id="njz7rtfr"], .ayc-native [data-id="epre1cla"], .ayc-native [data-id="yrd3fj94"] {
  margin-top: -52px !important;   /* sube el círculo (52px alto) media altura fuera de la card */
}
.ayc-native [data-id="njz7rtfr"] > .elementor-widget-container,
.ayc-native [data-id="epre1cla"] > .elementor-widget-container,
.ayc-native [data-id="yrd3fj94"] > .elementor-widget-container { overflow: visible !important; }

/* [#3] FLECHAS CONECTORAS: ÚNICO sistema vivo = iconos fa-arrow-right (los
   contenedores de flecha nw0oe484/… llevan un widget icon). Computan
   rgba(255,255,255,.4) (blanco 40%) → VERDE de marca #9dc41a, opacidad plena. */
.ayc-native [data-id="myg8of7f"] .elementor-widget-icon i.fa-arrow-right,
.ayc-native [data-id="myg8of7f"] .elementor-widget-icon i.fa-arrow-right::before,
.ayc-native [data-id="myg8of7f"] .elementor-widget-icon svg {
  color: #9dc41a !important;
  fill: #9dc41a !important;
}

/* [#9hero-layout] HERO: bloque título+botón ANCLADO ABAJO (PDF), no centrado. */
.ayc-native.ayc-native[data-id="vrz9flip"] {
  justify-content: flex-end !important;
  padding-bottom: 64px !important;
}
.ayc-native [data-id="l9417o9n"] { justify-content: flex-end !important; }
/* [#9hero-overlay] Overlay navy MÁS marcado para legibilidad (PDF oscurecido). */
.ayc-native.ayc-native[data-id="vrz9flip"]::before {
  background: linear-gradient(180deg, rgba(12,22,48,.35) 0%, rgba(12,22,48,.78) 100%) !important;
  opacity: 1 !important;
}

/* [#1] RESEÑAS GOOGLE (aycgrev01): SOLO Futura (nombres venían Montserrat 18px,
   iniciales 24px). Manual de marca: una sola familia tipográfica. */
.ayc-native [data-id="aycgrev01"] *,
.ayc-native [data-id="aycgrev01"] .ayc-grev-name,
.ayc-native [data-id="aycgrev01"] .ayc-grev-author,
.aycg-review *, .aycg-author {
  font-family: var(--ayc-font-body) !important;
}

/* ============================================================
   RONDA CIERRE GAPS MEDIDOS — 2026-06-10 (append-only, gana al ir último)
   Corrige rondas previas mal calibradas (títulos de paso blancos, flechas verdes).
   ============================================================ */

/* [BLOCKER #5-cards] TÍTULOS DE PASO eran color:#fff (INVISIBLES: card blanca + texto blanco).
   Las cards son BLANCAS, no navy → título en NAVY DE MARCA #1e2751, visible. */
.ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="njio8v9u"] .elementor-heading-title {
  color: #1e2751 !important;          /* navy de marca, legible sobre card blanca */
  /* tamaño lo gobierna la regla GLOBAL h3.elementor-heading-title (28px) */
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;      /* PDF: título centrado en la card */
  font-family: var(--ayc-font-head) !important;
}
/* [2026-06-24 PDF AJUSTES HM1] "Atendemos tu caso:" quedaba en 1 línea mientras cards 2/3
   tienen título de 2 líneas → su cuerpo arrancaba más arriba (desalineado). (a) reservamos
   altura de 2 líneas en los 3 títulos para alinear los cuerpos; (b) forzamos el wrap del
   título de card1 a 2 renglones por ANCHO (sin <br>). */
.ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="njio8v9u"] .elementor-heading-title {
  min-height: 2.6em !important;       /* 2 líneas × line-height 1.3 → cuerpos alineados */
}
.ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"] .elementor-heading-title {
  max-width: 7em !important;          /* fuerza "Atendemos tu / caso:" en 2 renglones */
  margin-left: auto !important; margin-right: auto !important;
}
/* Descripción de las 3 cards del proceso: centrada (PDF) */
.ayc-native.ayc-native [data-id="5jn6nn5b"],
.ayc-native.ayc-native [data-id="5jn6nn5b"] p,
.ayc-native.ayc-native [data-id="vumj2cdv"],
.ayc-native.ayc-native [data-id="vumj2cdv"] p,
.ayc-native.ayc-native [data-id="ptfe26dd"],
.ayc-native.ayc-native [data-id="ptfe26dd"] p { text-align: center !important; }

/* [#3 FLECHAS] UN solo conector. Los iconos verdes fa-arrow-right (34x420jc + z7va5kkc)
   son redundantes ("orejas" verdes junto a las cards) → OCULTAR. */
.ayc-native [data-id="34x420jc"],
.ayc-native [data-id="z7va5kkc"] { display: none !important; }
/* El conector que sobrevive = svg.ayc-timeline-arrow (inyectado por JS bajo myg8of7f):
   tenía stroke gradiente 14px → fino (~2.5px) y GRIS NEUTRO #c2c7d0 (PDF: conector sutil). */
.ayc-native svg.ayc-timeline-arrow path,
.ayc-native svg.ayc-timeline-arrow line,
.ayc-native svg.ayc-timeline-arrow polyline {
  stroke: #c2c7d0 !important;
  stroke-width: 2.5px !important;
  fill: none !important;
}
.ayc-native svg.ayc-timeline-arrow { opacity: 1 !important; }
/* anula la regla previa que forzaba VERDE sobre cualquier svg/icono de la fila */
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow * {
  color: #c2c7d0 !important;
  fill: none !important;
}

/* [#6 BADGE] Círculos numerados: el círculo es un <div> con estilos INLINE
   (width:52px;border-radius:50%;background:#9dc41a;margin:0 auto 16px) dentro del
   text-editor. Targeteamos ese div por su inline border-radius:50% y le añadimos
   aro blanco + sombra (elevación PDF). Inline gana a CSS sin !important → usamos !important. */
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"] {
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  border: 3px solid #ffffff !important;
  box-sizing: content-box !important;   /* el aro no encoge el círculo de 52px */
}

/* [#10 PROMESA] Reducir la circunferencia (260→210px) para margen claro respecto
   al padding del card gris y a la columna de texto izquierda (PDF: aire generoso). */
.ayc-native [data-id="2s3d2i03"] {
  width: 210px !important; max-width: 210px !important; height: 210px !important;
  margin-left: auto !important; margin-right: 16px !important;
}

/* [#20 HEADINGS extra] Refuerzo navy de marca en headings que el auditor vio en #003366
   (ya corregido en origen, pero blindamos por si post-13.css repinta). */
.ayc-native.ayc-native.ayc-native [data-id="patiapip"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="42to31zq"] .elementor-heading-title {
  color: #1e2751 !important;
}

/* [#FORM Zoho] Acercar al PDF minimalista: ocultar botón "Borrar" (reset) y "Lead Source".
   NO se ocultan campos required (Apellidos/Pais) para no romper el envío del CRM:
   esa supresión es decisión de owner (deviación marcada para confirmar). */
.ayc-native .zcwf_button[type="reset"],
.ayc-native input[type="reset"].zcwf_button {
  display: none !important;
}
.ayc-native .zcwf_row.wfrm_fld_dpNn,
.ayc-native .zcwf_row:has(#Lead_Source) {
  display: none !important;
}

/* [#FOTO EQUIPO] Banda home-equipo.jpg recortaba a media altura (50% 50%) y cortaba las
   caras → subir el encuadre para que la fila del equipo (caras) sea visible (PDF).
   La sección TIENE la clase ayc-native → clase TRIPLICADA (0,4,0) gana a post-13.css (0,3,0). */
.ayc-native.ayc-native.ayc-native[data-id="ayceqfoto"],
.ayc-native.ayc-native.ayc-native.elementor-element-ayceqfoto {
  background-position: 50% 22% !important;
}

/* [#H1 WRAP] El PDF rompe en la coma. El salto lo controla un <br> insertado en el
   título (_elementor_data) tras "especializadas,". Damos ancho holgado para que la
   línea 2 ("especializadas, un mismo compromiso") NO se parta otra vez; centrado por auto. */
.ayc-native.ayc-native [data-id="j9ge1grr"] .elementor-heading-title {
  max-width: 1340px !important;
  margin-inline: auto !important;
}

/* ============================================================
   RONDA AUDITOR FINAL — 2026-06-10 (cierre gaps medidos: form 3 campos,
   pills, contáctanos whatsapp, fuentes promesa, halo círculos, CTA flat)
   Append-only, gana al ir último. Clase TRIPLICADA donde post-13.css pisa.
   ============================================================ */

/* ---- Form Zoho del Home: campos visibles ----
   FIX 2026-06-23: Apellidos (#Last_Name) y País (#LEADCF4) son OBLIGATORIOS en
   Zoho (Last Name es mandatorio en Zoho CRM). Una ronda previa los ocultó para
   dejar "3 campos del PDF" → pero al enviar Zoho rechazaba con
   "Apellidos cannot be empty" (y País). Por eso AHORA SE MUESTRAN. Solo se
   oculta el Lead Source (automático/interno). "Información adicional" se muestra
   desde 2026-10-02 a pedido del cliente, para que la persona cuente el motivo.
   Los campos los inyecta el <script> de Zoho en runtime; se ocultan por la fila
   .zcwf_row que contiene cada uno. :has() soportado. */
.ayc-native .ayc-zoho-material-form .zcwf_row:has(#Lead_Source), /* Lead Source (automático) */
.ayc-native .ayc-zoho-material-form .zcwf_row.wfrm_fld_dpNn {
  display: none !important;
}
/* boton "Borrar" (reset) fuera; solo Enviar */
.ayc-native .ayc-zoho-material-form input[type="reset"],
.ayc-native .ayc-zoho-material-form .zcwf_button[type="reset"] { display: none !important; }

/* [#form borders] Los 3 inputs restantes (text/tel/email) -> MISMO estilo underline.
   (Pais/Informacion ya ocultos, pero por si Zoho recalcula mantenemos coherencia.) */
.ayc-native .ayc-zoho-material-form input[type="text"],
.ayc-native .ayc-zoho-material-form input[type="tel"],
.ayc-native .ayc-zoho-material-form input[type="email"] {
  border: 0 !important; border-bottom: 1.5px solid #c7ccca !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.ayc-native .ayc-zoho-material-form input[type="text"]:focus,
.ayc-native .ayc-zoho-material-form input[type="tel"]:focus,
.ayc-native .ayc-zoho-material-form input[type="email"]:focus {
  border-bottom-color: var(--ayc-green) !important; outline: none !important;
}

/* ---- [major TABS] Pills compactas: ancho de contenido, agrupadas a la izquierda,
   radio ~6px (rectangulo redondeado del PDF), NO estiradas a 1/3 cada una. ---- */
.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
  display: flex !important; justify-content: flex-start !important;
  flex-wrap: wrap !important; gap: 10px !important; width: 100% !important;
}
.ayc-native [data-id="6eeek77d"] .elementor-tab-title {
  flex: 0 0 auto !important; width: auto !important;
  border-radius: 6px !important;
  padding: 10px 22px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* ---- [major CONTACTANOS] Icono WhatsApp a la izquierda del label (PDF) ---- */
.ayc-native .contactanos-btn i.fa-whatsapp,
.ayc-native .contactanos-btn i.fab { font-size: 1.05em !important; line-height: 1 !important; }

/* ---- [major NUESTRA PROMESA] Stat-labels en Futura (renderizaban Open Sans 15px).
   El texto vive en span.elementor-icon-list-text (no en <strong>). ---- */
.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-text,
.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item span,
.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item a {
  font-family: var(--ayc-font-body) !important;
}

/* ---- [minor PROCESS CIRCLES] Quitar el HALO BLANCO (border 3px #fff) sobre banda navy.
   La ronda previa anadia border:3px solid #fff -> ahora aro sutil oscuro/transparente. ---- */
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"] {
  border: 1px solid rgba(30,39,81,.35) !important;   /* aro navy fino, sin halo blanco */
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  box-sizing: content-box !important;
}

/* ---- [major CTA] Fondo CYAN PLANO #0075a9 (PDF), sin degradado a navy.
   Anula las declaraciones de gradiente previas de este mismo archivo. ---- */
.ayc-native.ayc-native.ayc-native[data-id="8x0l93wp"] {
  background-color: #0075a9 !important;
  background-image: none !important;
  background: #0075a9 !important;
}
.ayc-native.ayc-native.ayc-native[data-id="8x0l93wp"] > .elementor-background-overlay {
  background-color: #0075a9 !important; background-image: none !important;
}

/* ---- [major CONTACTANOS icon glyph] El <i.fab.fa-whatsapp> esta dentro de HTML del
   tab; la disciplina de fuente .ayc-native forzaba 'Futura Medium' sobre el <i>, pisando
   el .fab{font-family:"Font Awesome 5 Brands"} de all.min.css -> el glyph no pintaba.
   Forzamos la familia de marca FA + el codepoint del glyph WhatsApp (\f232). ---- */
.ayc-native .contactanos-btn i.fa-whatsapp,
.ayc-native .contactanos-btn i.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  display: inline-block !important;
  font-size: 1.05em !important;
  line-height: 1 !important;
}
.ayc-native .contactanos-btn i.fa-whatsapp::before {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
  content: "\f232" !important;
}

/* ============================================================
   RONDA CIERRE CLIENTE — 2026-06-10 (gaps medidos finales)
   Flechas VERDES, círculos limpios, círculo Promesa con contraste,
   CTA degradado teal->navy, Enviar contorneado, foto equipo reencuadre.
   Append-only, gana al ir último. Clase TRIPLICADA donde post-13.css pisa.
   ============================================================ */

/* [GAP flechas] CONECTOR del proceso VERDE de marca y bien visible.
   El conector vivo = svg.ayc-timeline-arrow (path/line/polyline). Antes lo
   pusimos gris #c2c7d0; el cliente lo quiere VERDE #9dc41a y más grueso. */
.ayc-native svg.ayc-timeline-arrow path,
.ayc-native svg.ayc-timeline-arrow line,
.ayc-native svg.ayc-timeline-arrow polyline {
  stroke: #9dc41a !important;
  stroke-width: 3.5px !important;
  fill: none !important;
  opacity: 1 !important;
}
.ayc-native svg.ayc-timeline-arrow { opacity: 1 !important; }
/* anula la regla previa que ponía color/fill gris sobre el svg de la fila */
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow * {
  color: #9dc41a !important;
  stroke: #9dc41a !important;
  fill: none !important;
}
/* la cabeza de flecha (si es marker/polygon de relleno) en verde sólido */
.ayc-native svg.ayc-timeline-arrow marker path,
.ayc-native svg.ayc-timeline-arrow polygon,
.ayc-native svg.ayc-timeline-arrow .ayc-arrowhead {
  fill: #9dc41a !important;
  stroke: #9dc41a !important;
}

/* [GAP círculo numerado] Disco verde LIMPIO: sin aro navy ni sombra (PDF).
   Sobrescribe el border 1px rgba(30,39,81,.35) + box-shadow de rondas previas. */
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"],
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius: 50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius: 50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius: 50%"] {
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* [GAP Promesa] Círculo del logo en BLANCO PURO (#fff) para diferenciarlo del
   card gris rgb(236,238,236); aro/sombra muy sutil para leerlo como disco (PDF).
   El círculo es [data-id="2s3d2i03"]; mantiene su tamaño 210 y margen. */
.ayc-native [data-id="2s3d2i03"] {
  background: #ffffff !important;
  border: 1px solid rgba(30,39,81,.06) !important;
  box-shadow: 0 6px 18px rgba(30,39,81,.08) !important;
}

/* [GAP CTA] Banda CTA con DEGRADADO teal->azul->navy (PDF), no plano.
   Sobrescribe el fondo plano #0075a9 de la ronda previa. Clase TRIPLICADA. */
.ayc-native.ayc-native.ayc-native[data-id="8x0l93wp"] {
  background-color: #0089c2 !important;
  background-image: linear-gradient(100deg, #00a0c8 0%, #0075a9 45%, #1e2751 100%) !important;
  background: linear-gradient(100deg, #00a0c8 0%, #0075a9 45%, #1e2751 100%) !important;
}
.ayc-native.ayc-native.ayc-native[data-id="8x0l93wp"] > .elementor-background-overlay {
  background-color: transparent !important;
  background-image: linear-gradient(100deg, #00a0c8 0%, #0075a9 45%, #1e2751 100%) !important;
}

/* [GAP Enviar] Botón "Enviar" del form Zoho -> CONTORNEADO claro pequeño (PDF),
   no relleno navy. Fondo blanco, borde+texto navy, hover relleno navy. */
.ayc-native.ayc-native input[type="submit"].zcwf_button,
.ayc-native.ayc-native input.formsubmit.zcwf_button,
.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"] {
  background: #ffffff !important;
  color: var(--ayc-navy) !important;
  border: 1.5px solid var(--ayc-navy) !important;
  border-radius: 6px !important;
  padding: 8px 22px !important;
  font-size: .9rem !important;
  box-shadow: none !important;
  width: auto !important;
}
.ayc-native.ayc-native input[type="submit"].zcwf_button:hover,
.ayc-native.ayc-native input.formsubmit.zcwf_button:hover,
.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"]:hover {
  background: var(--ayc-navy) !important;
  color: #ffffff !important;
}

/* [GAP foto equipo] Nuevo asset home-hero-team.jpg (retrato real del equipo AYC,
   panorámica 8097x2085). Encuadre para que se vean las personas de pie/sentadas:
   centrar horizontal, subir un poco para ver caras+logo "AYC GROUP". TRIPLICADA. */
.ayc-native.ayc-native.ayc-native[data-id="ayceqfoto"],
.ayc-native.ayc-native.ayc-native.elementor-element-ayceqfoto {
  background-position: 50% 35% !important;
  background-size: cover !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS FINAL — 2026-06-10 (cierre blocker testimonios +
   flechas grises, hero, headings, botones, footer). Append-only, gana
   al ir último. Clase TRIPLICADA donde post-13.css pisa (0,3,0).
   ============================================================ */

/* ---- [BLOCKER TESTIMONIOS] Tarjetas NATIVAS estilo PDF (reemplazan el
   widget HTML de Google Reviews). Cards blancas redondeadas sobre banda navy,
   avatar FOTO con aro verde solapando el borde superior, cita navy, nombre
   navy bold + rol. Chevrons ‹ › claros a los lados. Sin logo Google, sin
   estrellas, sin sello de fecha. ---- */
.ayc-native [data-id="581ginu8"].ayc-tst-row,
.ayc-native .ayc-tst-row {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: center !important;
  gap: 20px !important; width: 100% !important; max-width: 1200px; margin-inline: auto;
}
/* fila de cards a igual altura */
.ayc-native .ayc-tst-row > .e-con-inner { width: 100%; display: flex; flex-direction: row; align-items: stretch; gap: 20px; }

.ayc-native .ayc-tst-card {
  position: relative !important;
  flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
  background: #ffffff !important; border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
  padding: 64px 26px 30px !important;   /* top espacio para el avatar solapado */
  margin-top: 36px !important;          /* deja sitio al avatar que sale por arriba */
  display: flex !important; flex-direction: column !important; align-items: center !important;
  text-align: center !important; overflow: visible !important;
}
.ayc-native .ayc-tst-card > .e-con-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }

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

/* CITA: navy, comillas ya incluidas en el texto */
.ayc-native .ayc-tst-card .ayc-tst-quote,
.ayc-native .ayc-tst-card .ayc-tst-quote p {
  color: #1e2751 !important; font-family: var(--ayc-font-body);
  font-size: var(--fs-quote) !important; line-height: 1.55 !important; text-align: center !important;
  margin: 0 0 18px !important;
}
/* NOMBRE: navy bold */
.ayc-native .ayc-tst-card .ayc-tst-name,
.ayc-native .ayc-tst-card .ayc-tst-name .elementor-heading-title {
  color: #1e2751 !important; font-family: var(--ayc-font-head) !important;
  font-weight: 700 !important; font-size: var(--fs-step) !important; line-height: 1.2 !important;
  margin: 0 0 2px !important; text-align: center !important;
}
/* ROL: navy regular, debajo del nombre */
.ayc-native .ayc-tst-card .ayc-tst-role,
.ayc-native .ayc-tst-card .ayc-tst-role p {
  color: #1e2751 !important; font-family: var(--ayc-font-body);
  font-size: var(--fs-nav) !important; line-height: 1.3 !important; margin: 0 !important; text-align: center !important;
}

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

/* ---- [FLECHAS PROCESO -> GRIS] Sobrescribe TODAS las rondas verdes previas.
   El conector vivo = svg.ayc-timeline-arrow (path/line/polyline), inyectado por
   animations.js que ahora pinta gris #c2c7d0 fino y centrado en los círculos.
   Forzamos gris aquí por si el CSS previo (verde !important) gana por orden. ---- */
.ayc-native svg.ayc-timeline-arrow path,
.ayc-native svg.ayc-timeline-arrow line,
.ayc-native svg.ayc-timeline-arrow polyline,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow path,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow * {
  stroke: #c2c7d0 !important;
  fill: none !important;
}
.ayc-native svg.ayc-timeline-arrow,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow { opacity: 1 !important; }
.ayc-native svg.ayc-timeline-arrow marker path,
.ayc-native svg.ayc-timeline-arrow polygon,
.ayc-native svg.ayc-timeline-arrow .ayc-arrowhead {
  fill: #c2c7d0 !important; stroke: #c2c7d0 !important;
}

/* ---- [#6 CÍRCULO NUMERADO] Disco verde con aro/anillo exterior teal sutil
   + sombra suave (PDF: ring azul-teal alrededor del disco verde). ---- */
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"],
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius: 50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius: 50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius: 50%"] {
  border: 3px solid #0075a9 !important;       /* aro teal de marca (PDF) */
  box-shadow: 0 3px 8px rgba(0,0,0,.22) !important;
  box-sizing: content-box !important;          /* el aro no encoge el disco de 52px */
}

/* ---- [HERO disclaimer] Texto del descargo BLANCO legible (.85) sobre overlay. ---- */
.ayc-native.ayc-native [data-id="qt1e2jbl"],
.ayc-native.ayc-native [data-id="qt1e2jbl"] p {
  color: rgba(255,255,255,.85) !important;
}
/* ---- [HERO overlay] Overlay navy más marcado para contraste (PDF). ---- */
.ayc-native.ayc-native[data-id="vrz9flip"]::before {
  background: linear-gradient(180deg, rgba(12,22,48,.45) 0%, rgba(12,22,48,.72) 100%) !important;
  opacity: 1 !important;
}

/* ---- [NAVY BAND heading] "Soluciones claras..." a 36px (cabe en 1 línea como
   el PDF). patiapip ("Confianza respaldada") SE EXCLUYE: es título de sección y
   lo gobierna la regla global h2 (46px). ---- */
.ayc-native.ayc-native.ayc-native [data-id="ixz9ksb1"] > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.ayc-native.ayc-native [data-id="ixz9ksb1"] .elementor-heading-title.ayc-band-h {
  font-size: var(--fs-section) !important; line-height: 1.18 !important;   /* TOKEN título de sección (34px) */
}

/* ---- [BOTÓN ENVIAR mayúsculas] El submit del form en MAYÚSCULAS (PDF "ENVIAR"). ---- */
.ayc-native.ayc-native input[type="submit"],
.ayc-native.ayc-native button[type="submit"],
.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"],
.ayc-native.ayc-native input.zcwf_button[type="submit"] {
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* ---- [RADIO DE BOTÓN unificado a 6px de marca] en toda la página. ---- */
.ayc-native .elementor-button,
.ayc-native .contactanos-btn,
.ayc-native [data-id="kuhn6vhj"] .elementor-button,   /* CTA "Agenda una consulta" (era 3px) */
.ayc-native [data-id="1kg6tj85"] .elementor-button,   /* hero "Agendar consulta" */
.ayc-native [data-id="vw9xt2jg"] .elementor-button,   /* Artículos "Ir al Blog" (era 4px) */
.ayc-native .elementor-post__read-more,
.ayc-native [data-id="6eeek77d"] .elementor-button,   /* "Contáctanos" tabs (era 8px) */
.ayc-native [data-id="4fnlvbb2"] .elementor-button {  /* "Ver más testimonios" */
  border-radius: 6px !important;
}
/* tabs pills mantienen su 6px (ya seteado arriba); coherencia total a 6px */
.ayc-native [data-id="6eeek77d"] .elementor-tab-title { border-radius: 6px !important; }

/* ---- [#SOLUC INTEGRALES vacío] Reducir el hueco vertical bajo la columna
   izquierda: la columna 1ppisbmk centra su contenido verticalmente respecto al
   bloque de tabs, eliminando el vacío de ~270px antes de la foto. ---- */
.ayc-native [data-id="nchb1fkt"] { padding-bottom: 36px !important; }


/* ---- [TESTIMONIOS avatar overlap — bloques v1/v2/v3 RETIRADOS 2026-06-12]
   Los 3 bloques previos (absolute top:-40, flujo-normal margin -40, relative
   top:-74 margin -60) se anulaban entre sí y colapsaban el wrapper del avatar
   a 0x0 (img caía 38px DENTRO de la card, gap avatar→quote=0). Bloque único y
   autoritativo al pie del archivo (RONDA AVATAR FINAL). ---- */

/* ---- [NAVY BAND heading fix ID] El heading real "Soluciones claras, trato
   honesto..." es g968a4nf (no patiapip). Subir a 29px (PDF 28-30px). ---- */
.ayc-native.ayc-native.ayc-native [data-id="g968a4nf"] .elementor-heading-title {
  font-size: var(--fs-section) !important; line-height: 1.18 !important;   /* TOKEN: título de sección consolidado (34px), igual que las demás secciones del Home */
  text-wrap: balance;   /* el título es largo y cae en 2 líneas → balancearlas (evita "humana" huérfano) */
}

/* ---- [TESTIMONIOS avatar overlap v2 — RETIRADO 2026-06-12] Ver RONDA AVATAR
   FINAL al pie del archivo (bloque único). ---- */

/* ---- [RADIO BOTÓN v2] Forzar 6px en los 2 rebeldes: Contáctanos (era 8px) e
   "Ir al Blog" / read-more (era 4px). Mayor especificidad + !important. ---- */
.ayc-native.ayc-native .contactanos-btn,
.ayc-native.ayc-native a.contactanos-btn {
  border-radius: 6px !important;
}
.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more,
.ayc-native.ayc-native .elementor-post__read-more,
.ayc-native.ayc-native [data-id="vw9xt2jg"] a.elementor-post__read-more {
  border-radius: 6px !important;
}

/* ---- [RADIO BOTÓN v3] "Ir al Blog" read-more: el ganador era post-13.css
   `.elementor-element-mtraui2s .elementor-post__read-more{border-radius:4px}` (0,3,0).
   Targeteamos el widget de posts mtraui2s con clase TRIPLICADA + !important. ---- */
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__read-more,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] a.elementor-post__read-more,
.ayc-native.ayc-native.ayc-native .elementor-element-mtraui2s .elementor-post__read-more {
  border-radius: 6px !important;
}

/* ---- [TESTIMONIOS avatar overlap v3 — RETIRADO 2026-06-12] Ver RONDA AVATAR
   FINAL al pie del archivo (bloque único). ---- */

/* ============================================================
   RONDA GAPS AUDITOR — 2026-06-10 (cierre 6 gaps medidos: círculo proceso
   sin aro azul, cards artículos sin párrafo + esquinas redondeadas, testimonios
   chevrons + alturas iguales, foto equipo brillante sin tinte). Append-only,
   gana al ir último. Clase TRIPLICADA donde post-13.css pisa (0,3,0).
   ============================================================ */

/* [GAP color — CÍRCULO NUMERADO 1/2/3] Disco verde sólido #9dc41a con número
   blanco y SOLO un halo claro/pálido sutil; SIN anillo azul (el PDF no muestra
   borde azul). Sobrescribe el `border:3px solid #0075a9` + box-shadow oscuro de
   la ronda previa (línea ~681). El círculo es un <div> con inline border-radius:50%
   dentro de los text-editor njz7rtfr/epre1cla/yrd3fj94. */
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"],
.ayc-native [data-id="njz7rtfr"] div[style*="border-radius: 50%"],
.ayc-native [data-id="epre1cla"] div[style*="border-radius: 50%"],
.ayc-native [data-id="yrd3fj94"] div[style*="border-radius: 50%"] {
  background: #9dc41a !important;                 /* disco verde de marca sólido */
  border: 0 !important;                           /* fuera el aro azul #0075a9 */
  box-shadow: 0 0 0 6px rgba(255,255,255,.10) !important;  /* SOLO halo claro pálido sutil */
  box-sizing: border-box !important;              /* el disco mantiene su 52px exacto */
}

/* [GAP content — CARDS ARTÍCULOS] Cada card = imagen + título + botón "Ir al Blog".
   SIN párrafo descriptivo (PDF compacto). El excerpt es .elementor-post__excerpt
   (4 en la sección vw9xt2jg). Ocultarlo deja la card más baja como el diseño. */
.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__excerpt,
.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__excerpt,
.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__excerpt p {
  display: none !important;
}

/* [GAP image — ESQUINAS IMAGEN ARTÍCULOS] Esquinas superiores redondeadas
   siguiendo el radio de la card. El thumb (.elementor-post__thumbnail) ya tiene
   overflow:hidden → con radius arriba recorta la imagen. Aplicamos a thumb, link
   e <img> por robustez. Clase TRIPLICADA: post-13.css fija radius:0 en (0,3,0). */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__thumbnail,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__thumbnail,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__thumbnail__link,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__thumbnail__link {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  overflow: hidden !important;
}
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__thumbnail img,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__thumbnail img {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}
/* [GAP image — proporción imagen/card (2026-06-12 f, opcional auditor)]
   La card creció legítimamente a 434px (títulos 24 / botón 18). La imagen
   quedaba en 218px (ratio 0.50) frente al diseño (~0.57). Subimos el ALTO de
   la imagen a 248px (ratio ≈0.571) con object-fit:cover → llena más la card,
   fiel al PDF, SIN encoger texto ni card. Es CRECER el contenedor imagen. */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__thumbnail,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__thumbnail,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__thumbnail__link,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__thumbnail__link {
  height: 248px !important;
}
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__thumbnail img,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__thumbnail img {
  height: 248px !important;
  object-fit: cover !important;
}

/* [GAP layout — TESTIMONIOS ALTURAS IGUALES] Las 3 cards a la MISMA altura,
   alineadas top y bottom. La fila ayc-tst-row es flex con align-items:center →
   la card central (cita más corta) quedaba 13px más abajo y 24px más baja.
   Forzamos stretch: las 3 cards toman la altura de la más alta. Los chevrons
   (flex:0 0 auto) se re-centran con align-self para no estirarse. */
.ayc-native [data-id="581ginu8"].ayc-tst-row,
.ayc-native .ayc-tst-row {
  align-items: stretch !important;
}
.ayc-native .ayc-tst-row > .ayc-tst-card,
.ayc-native [data-id="tstcard1"],
.ayc-native [data-id="tstcard2"],
.ayc-native [data-id="tstcard3"] {
  align-self: stretch !important;
}
/* [GAP spacing — RITMO INTERNO PAREJO] El grupo nombre+rol fluye natural justo
   debajo de la cita (gap nombre→rol ~2px IGUAL en las 3 cards, como el PDF). Las
   cards ya comparten altura por align-self:stretch; NO anclamos el rol abajo:
   el sobrante de la cita más corta se queda como AIRE INFERIOR dentro de la card,
   no como un vacío entre nombre y rol. justify-content:flex-start agrupa arriba. */
.ayc-native .ayc-tst-card { justify-content: flex-start !important; }
.ayc-native .ayc-tst-card .ayc-tst-role { margin-top: 0 !important; }
/* chevrons centrados verticalmente respecto a las cards (no estirados) */
.ayc-native .ayc-tst-chev,
.ayc-native [data-id="tstchevl"],
.ayc-native [data-id="tstchevr"] {
  align-self: center !important; flex: 0 0 auto !important;
}

/* [GAP image — FOTO EQUIPO] Nuevo asset home-equipo.jpg → home-equipo-band.jpg:
   mismo retrato real del equipo AYC pero BRILLANTE y SIN tinte navy (desaturado
   +luminosidad, recorte del cast azul de origen). Reencuadre al GRUPO DE PIE
   (fila superior de 7 personas) → background-position más arriba (50% 18%).
   La sección TIENE la clase ayc-native → TRIPLICADA gana a post-13.css. */
.ayc-native.ayc-native.ayc-native[data-id="ayceqfoto"],
.ayc-native.ayc-native.ayc-native.elementor-element-ayceqfoto {
  background-position: 50% 18% !important;
  background-size: cover !important;
  filter: brightness(1.05) saturate(.9) !important;  /* refuerza el aspecto brillante/sin tinte */
}

/* [#audit-final] Artículos: tarjetas COMPACTAS como el PDF (imagen + título + botón, SIN párrafo de cuerpo) */
.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__excerpt,
.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__text { display: none !important; }

/* ============================================================
   RONDA CIERRE GAPS MEDIDOS — 2026-06-10 (5 gaps: tabs align-items,
   form apilado 3 campos, flechas VERDES, botones blog baseline, disclaimer).
   Append-only, gana al ir último. Clase TRIPLICADA donde post-13.css pisa (0,3,0).
   ============================================================ */

/* ---- [BLOCKER spacing] Soluciones integrales: la fila de 2 columnas del panel
   de tabs (text+botón Contáctanos | formulario) tenía align-items:flex-start →
   ~168px de hueco blanco bajo el botón. La fila es el DIV directo (sin clase)
   del .elementor-tab-content activo del widget tabs 6eeek77d. Centramos
   verticalmente para que el bloque texto+botón quede frente al formulario. ---- */
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div {
  align-items: center !important;
}
/* la columna izquierda (texto + botón) centra su propio contenido por si crece */
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div > :first-child {
  align-self: center !important;
}

/* ---- [major layout] Formulario Zoho APILADO (label encima del input, ancho
   completo) — el wrapper .zcwf_lblLeft flotaba label (159px) e input (360px) a la
   izquierda → 123px de hueco entre 'Teléfono' y su línea. Forzamos columnas a
   bloque full-width: label arriba, input debajo. (Los campos extra ya van display:none.) ---- */
.ayc-native .ayc-zoho-material-form .zcwf_row {
  display: block !important; width: 100% !important; margin: 0 0 18px !important;
  clear: both !important; overflow: hidden;
}
.ayc-native .ayc-zoho-material-form .zcwf_col_lab,
.ayc-native .ayc-zoho-material-form .zcwf_col_fld {
  float: none !important; width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 0 !important; display: block !important; min-height: 0 !important;
}
.ayc-native .ayc-zoho-material-form .zcwf_col_lab {
  margin-bottom: 4px !important;
}
.ayc-native .ayc-zoho-material-form .zcwf_col_lab label {
  font-family: var(--ayc-font-body) !important; font-size: var(--fs-body) !important;
  color: var(--ayc-navy) !important; display: block !important;
}
.ayc-native .ayc-zoho-material-form .zcwf_col_fld input[type="text"],
.ayc-native .ayc-zoho-material-form .zcwf_col_fld input[type="tel"],
.ayc-native .ayc-zoho-material-form .zcwf_col_fld input[type="email"],
.ayc-native .ayc-zoho-material-form .zcwf_col_fld input {
  width: 100% !important; margin: 0 !important;
}
/* checkbox de términos: en línea con su etiqueta, no apilado/estirado */
.ayc-native .ayc-zoho-material-form .zcwf_row:has(input[type="checkbox"]) {
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important;
}
.ayc-native .ayc-zoho-material-form .zcwf_row:has(input[type="checkbox"]) .zcwf_col_lab,
.ayc-native .ayc-zoho-material-form .zcwf_row:has(input[type="checkbox"]) .zcwf_col_fld {
  width: auto !important; flex: 0 0 auto !important;
}
.ayc-native .ayc-zoho-material-form .zcwf_row:has(input[type="checkbox"]) input[type="checkbox"] {
  width: auto !important;
}

/* ---- [major color] FLECHAS conectoras del proceso (banda navy) en VERDE de marca
   #9dc41a — el cliente las quiere verdes. El conector es svg.ayc-timeline-arrow
   inyectado por animations.js (ya pintamos su gradiente en verde en el JS). Esta
   regla GANA a la ronda gris previa (#c2c7d0 !important) por ir última, e impone el
   verde tanto en el stroke del path como en la cabeza de flecha. ---- */
.ayc-native svg.ayc-timeline-arrow path,
.ayc-native svg.ayc-timeline-arrow line,
.ayc-native svg.ayc-timeline-arrow polyline,
.ayc-native svg.ayc-timeline-arrow .ayc-arrow-line,
.ayc-native [data-id="ixz9ksb1"] svg.ayc-timeline-arrow path,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow path,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow * {
  stroke: #9dc41a !important;
  fill: none !important;
  opacity: 1 !important;
}
.ayc-native svg.ayc-timeline-arrow,
.ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow { opacity: 1 !important; }
.ayc-native svg.ayc-timeline-arrow marker path,
.ayc-native svg.ayc-timeline-arrow polygon,
.ayc-native svg.ayc-timeline-arrow .ayc-arrowhead {
  fill: #9dc41a !important; stroke: #9dc41a !important;
}

/* ---- [minor layout] Artículos: los 4 botones 'Ir al Blog' a la MISMA línea base.
   Las cards son flex column de igual alto (327px) pero .elementor-post__text era
   block → el botón seguía al título (1 vs 2 líneas → 21px de desfase). Hacemos el
   bloque de texto flex column que CRECE y anclamos el read-more al fondo. ---- */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__text,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__text {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 auto !important; height: auto !important;
}
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__read-more {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-10 (cierre 6 gaps auditor:
   tabs flex-start, padding sección, hero h1 2 líneas [ya ok],
   baseline de stats, subtítulo gris-teal, headings Futura Bold).
   Append-only, gana al ir última. Clase TRIPLICADA donde post-13.css pisa.
   ============================================================ */

/* ---- [BLOCKER #1 spacing] Soluciones integrales: la fila de 2 columnas del
   panel de tabs (texto+botón Contáctanos | formulario) debe alinear ARRIBA
   (flex-start), NO centrar. Antes (ronda previa, ~línea 911) se forzó
   align-items:center → ~79px de hueco blanco SOBRE el texto izquierdo (la columna
   izq h=183 quedaba centrada contra el form h=391). Con flex-start el texto
   'Soluciones para empresas...' arranca a la altura del 1er campo 'Nombre completo'
   (PDF). Esta regla GANA a la previa por ir ÚLTIMA con la misma especificidad +
   variante .elementor-active explícita. ---- */
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div {
  align-items: flex-start !important;
}
/* la columna izquierda (texto + botón) ya NO se auto-centra: anula el align-self:center
   de la ronda previa (~línea 916) para que su contenido fluya desde arriba. */
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div > :first-child,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div > :first-child {
  align-self: flex-start !important;
}

/* ---- [#2 spacing] Soluciones integrales: reducir el padding-bottom de la sección
   de 72px a 40px → quita la banda de blanco extra antes de la foto de equipo.
   La regla previa (~línea 730) ya bajó a 36px; reforzamos a 40px (margen de diseño
   uniforme). La sección nchb1fkt es top-level (TIENE la clase) → TRIPLICADA gana a
   post-13.css (0,3,0)+!important). ---- */
.ayc-native.ayc-native.ayc-native[data-id="nchb1fkt"] {
  padding-bottom: 40px !important;
}

/* ---- [#4 layout] STATS baseline: los 5 iconos (image-box) tienen alturas
   distintas (34/18/51/34/45px) → empujan los 5 números a tops distintos (spread
   16.2px). Fijamos la caja del icono a una ALTURA CONSTANTE (51px = el más alto) y
   alineamos el icono ABAJO; así los 5 números arrancan a la MISMA línea base.
   Widgets: zgzick0h / ya4wbjti / c8ql1y3s / 0h5qmaso / ur1nztr5. ---- */
.ayc-native [data-id="zgzick0h"] .elementor-image-box-img,
.ayc-native [data-id="ya4wbjti"] .elementor-image-box-img,
.ayc-native [data-id="c8ql1y3s"] .elementor-image-box-img,
.ayc-native [data-id="0h5qmaso"] .elementor-image-box-img,
.ayc-native [data-id="ur1nztr5"] .elementor-image-box-img {
  height: 51px !important;
  min-height: 51px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
/* la FILA de los 5 stats (qh0b8rle) alineaba al CENTRO → la columna '99%' (más
   alta, su título envuelve a 2 líneas) extendía hacia arriba y bajaba su número
   11px. Alineamos las 5 columnas ARRIBA (flex-start) → image-box y número quedan a
   la misma línea base. */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"],
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] > .e-con-inner,
.ayc-native.ayc-native.ayc-native .elementor-element-qh0b8rle,
.ayc-native.ayc-native.ayc-native .elementor-element-qh0b8rle > .e-con-inner {
  align-items: flex-start !important;
}

/* el <img> conserva su tamaño natural dentro de la caja fija (no se estira) */
.ayc-native [data-id="zgzick0h"] .elementor-image-box-img img,
.ayc-native [data-id="ya4wbjti"] .elementor-image-box-img img,
.ayc-native [data-id="c8ql1y3s"] .elementor-image-box-img img,
.ayc-native [data-id="0h5qmaso"] .elementor-image-box-img img,
.ayc-native [data-id="ur1nztr5"] .elementor-image-box-img img {
  height: auto !important;
  align-self: flex-end !important;
}

/* ---- [#5 color] Subtítulo 'Conoce las líneas de servicio...' (text-editor
   6r9y102e) en GRIS-TEAL DE MARCA #839794 (venía #6B7280 Tailwind). Coherencia
   con el manual. El texto vive en un <p>. ---- */
.ayc-native.ayc-native.ayc-native [data-id="6r9y102e"],
.ayc-native.ayc-native.ayc-native [data-id="6r9y102e"] p,
.ayc-native.ayc-native.ayc-native [data-id="6r9y102e"] .elementor-widget-container {
  color: #839794 !important;
}

/* ---- [#6 type] Headings navy con weight 700 deben usar 'Futura Bold' (no
   'Futura Medium' estirada a 700 → bold sintético). 'Soluciones integrales'
   (dny0xfaj) y 'Nuestra Promesa'. Asignamos la variante Bold real. ---- */
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] h1.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] h3.elementor-heading-title {
  font-family: var(--ayc-font-head) !important;  /* Futura Bold REAL: gana al sweep [data-id="1ppisbmk"] * { font-family:body !important } del home.css legacy que lo dejaba en Futura Medium (bold sintético). Iguala el resto de títulos de sección. */
  font-weight: 700 !important;
}
/* 'Nuestra Promesa' (sección Promesa). El heading está dentro del card gris
   9ocgr3gm; targeteamos sus headings de peso 700 → Futura Bold. */
.ayc-native.ayc-native.ayc-native [data-id="9ocgr3gm"] .elementor-widget-heading .elementor-heading-title {
  font-family: var(--ayc-font-head);
}

/* ============================================================
   ESCALA ~1.5x (legibilidad — pedido cliente "2x") + 4 FIXES
   El PDF pasa a ser referencia de LAYOUT; los tamaños SUBEN.
   ============================================================ */
/* Contenedor más ancho */
.ayc-native.ayc-native .e-con > .e-con-inner,
.ayc-native.ayc-native > .e-con-inner { max-width: 1400px !important; }

/* [2026-06-23 cliente] "Soluciones integrales" ocupaba demasiado ancho (heredaba
   el cap global de 1400px → a 125% de zoom llenaba casi todo el ancho con sólo
   20px de margen). La hacemos más angosta CENTRADA → más margen lateral, SIN
   tocar tamaños de letra. OJO: 1ppisbmk NO tiene la clase .ayc-native (sólo es
   DESCENDIENTE) → selector descendiente + .e-con (0,5,0) gana al cap global 1098. */
.ayc-native.ayc-native [data-id="1ppisbmk"].e-con > .e-con-inner {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   ESCALA CENTRALIZADA por TIPO de widget / tag (NUNCA por data-id):
   un solo valor por clase → impacta TODA la página de una vez.
   ============================================================ */
/* HEADINGS por tag (widget heading) — todos los de cada nivel a la vez */
.ayc-native.ayc-native h1.elementor-heading-title { font-size: var(--fs-page-hero) !important; line-height: 1.12 !important; }
.ayc-native.ayc-native h2.elementor-heading-title { font-size: var(--fs-section) !important; line-height: 1.18 !important; }
.ayc-native.ayc-native h3.elementor-heading-title { font-size: var(--fs-h3) !important; line-height: 1.25 !important; }
.ayc-native.ayc-native h4.elementor-heading-title { font-size: var(--fs-h4) !important; line-height: 1.3 !important; }
.ayc-native.ayc-native h5.elementor-heading-title,
.ayc-native.ayc-native h6.elementor-heading-title { font-size: var(--fs-footer-sm) !important; line-height: 1.35 !important; }

/* IMAGE-BOX (stats y afines): número, etiqueta e ICONO — todos a la vez.
   Número a 48px: el PDF da una altura de glifo de dígito ≈37.8px @1440
   (≈font-size 46-48px); 54px quedaba ~8% más alto. 48px = paridad PDF.
   Esta clase sólo gobierna las 5 stats de la banda (qh0b8rle), así que el
   ajuste es de un único origen y no afecta otras categorías. */
.ayc-native.ayc-native .elementor-image-box-title { font-size: var(--fs-h1) !important; line-height: 1.05 !important; }  /* A5: 38→44 (=cifra QS, número grande verde) */
.ayc-native.ayc-native .elementor-image-box-description { font-size: var(--fs-body) !important; line-height: 1.45 !important; }
.ayc-native.ayc-native .elementor-image-box-img img { width: 60px !important; max-width: 60px !important; height: auto !important; }  /* A5: 56→60 (=icono QS) */

/* ICON-BOX / ICON widgets: iconos y textos grandes globalmente */
.ayc-native.ayc-native .elementor-icon-box-icon img,
.ayc-native.ayc-native .elementor-icon img { width: 56px !important; max-width: 56px !important; height: auto !important; }
.ayc-native.ayc-native .elementor-icon-box-icon i,
.ayc-native.ayc-native .elementor-icon i { font-size: var(--fs-icon) !important; }
.ayc-native.ayc-native .elementor-icon-box-icon svg,
.ayc-native.ayc-native .elementor-icon svg { width: 48px !important; height: 48px !important; }
.ayc-native.ayc-native .elementor-icon-box-title { font-size: var(--fs-h3) !important; line-height: 1.25 !important; }
.ayc-native.ayc-native .elementor-icon-box-description { font-size: var(--fs-body) !important; line-height: 1.45 !important; }

/* CUERPO: texto general grande (era 16). El disclaimer legal queda chico aparte */
.ayc-native.ayc-native p,
.ayc-native.ayc-native li,
.ayc-native.ayc-native .elementor-icon-list-text,
.ayc-native.ayc-native .elementor-tab-content,
.ayc-native.ayc-native .elementor-tab-content p { font-size: var(--fs-quote) !important; line-height: 1.6 !important; }
.ayc-native.ayc-native [data-id="l9417o9n"] .elementor-widget-text-editor p { font-size: var(--fs-legal) !important; }  /* disclaimer legal hero: chico */
/* HERO disclaimer de Home = mismo tratamiento que los heros de servicio (gap QA):
   Myriad Pro + símbolo ⚠ antepuesto. (El TEXTO/wording difiere del estándar —
   "ejercer derecho/asesoramiento/cobrar" vs "abogacía/asesoría/aceptar" — pero eso
   es contenido legal del _elementor_data; se reporta al cliente, no se cambia aquí.) */
.ayc-native.ayc-native [data-id="l9417o9n"] .elementor-widget-text-editor p {
  font-family: var(--ayc-font-body) !important;
}
.ayc-native.ayc-native [data-id="l9417o9n"] .elementor-widget-text-editor p::before {
  content: "\26A0\FE0E\00A0";   /* ⚠ VS15 monocromo + espacio */
  color: #fff !important;
  font-family: 'Arial', sans-serif;
}
.ayc-native.ayc-native [data-id="l9417o9n"] .elementor-widget-text-editor p img.emoji {
  display: none !important;   /* ocultar twemoji amarillo → 1 solo ⚠ blanco */
}
/* Quitar el botón "Ver todos los servicios" extra de "Soluciones integrales"
   (gap QA: el diseño cierra con la foto del equipo; el CTA de esa sección es el
   WhatsApp "Contáctanos", ya presente). */
.ayc-native.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] { display: block !important; }   /* REVERSIÓN jun-2026 (pedido cliente): el botón "Servicios" SÍ debe verse al pie de Soluciones integrales. Antes display:none (decisión "el PDF no lo muestra"); el cliente ahora lo pide explícitamente. Cuádruple = mantiene la máxima especificidad, ahora mostrando. */
/* CTA de Home "¡Da el siguiente paso!" → MISMO token que los CTA de servicio (--fs-cta-title 44):
   el cliente lo veía demasiado pequeño (34). Unifica el tier de los CTA en las 4 páginas. */
.ayc-native.ayc-native.ayc-native [data-id="dcms2iot"] .elementor-heading-title { font-size: var(--fs-cta-title) !important; font-weight: 700 !important; }

/* BOTONES — globales */
.ayc-native.ayc-native .elementor-button { font-size: var(--fs-button) !important; padding: 14px 34px !important; }
/* Padding de bandas más generoso (proporcional a la escala) */
.ayc-native.ayc-native[data-id="nchb1fkt"],
.ayc-native.ayc-native[data-id="sj6v5zqm"],
.ayc-native.ayc-native[data-id="ef72b413"],
.ayc-native.ayc-native[data-id="vw9xt2jg"] { padding-top: 100px !important; padding-bottom: 100px !important; }
.ayc-native.ayc-native[data-id="ixz9ksb1"],
.ayc-native.ayc-native[data-id="sx7r0nl2"] { padding-top: 110px !important; padding-bottom: 110px !important; }

/* [1] TABS "Soluciones integrales": FULL-WIDTH centrados (cada uno 1/3) */
.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
  display: flex !important; width: 100% !important; gap: 10px !important; justify-content: center !important;
}
.ayc-native [data-id="6eeek77d"] .elementor-tab-title {
  flex: 1 1 0 !important; max-width: none !important; text-align: center !important;
  justify-content: center !important; align-items: center !important; display: flex !important;
  font-size: var(--fs-h3) !important; padding: 18px 16px !important;   /* tabs = NIVEL 4 (26px), llenan el pill como el diseño (antes --fs-body 21) */
}

/* [2] FLECHAS del proceso: BLANCAS EN BLOQUE (shaft + cabeza triangular),
   centradas a la altura del CÍRCULO (su centro = top de la fila). El PDF
   muestra 2 flechas blancas gruesas en los huecos entre cards. */
.ayc-native [data-id="nw0oe484"], .ayc-native [data-id="rf75jvl7"] {
  align-self: flex-start !important;   /* arranca en el top de la fila = centro del círculo */
  position: relative !important; display: block !important;
  width: 56px !important; min-width: 56px !important; height: 56px !important;
  flex: 0 0 56px !important; overflow: visible !important;
}
.ayc-native [data-id="nw0oe484"] *, .ayc-native [data-id="rf75jvl7"] * { display: none !important; }
/* shaft horizontal blanco */
.ayc-native [data-id="nw0oe484"]::before, .ayc-native [data-id="rf75jvl7"]::before {
  content: "" !important; position: absolute !important; left: 4px !important; top: -2.5px !important;
  width: 34px !important; height: 5px !important; background: #ffffff !important;
  border-radius: 2px !important; display: block !important;
}
/* cabeza triangular blanca */
.ayc-native [data-id="nw0oe484"]::after, .ayc-native [data-id="rf75jvl7"]::after {
  content: "" !important; position: absolute !important; left: 36px !important; top: -9px !important;
  width: 0 !important; height: 0 !important;
  border-top: 9px solid transparent !important; border-bottom: 9px solid transparent !important;
  border-left: 16px solid #ffffff !important; display: block !important;
}
/* OCULTAR el conector svg JS gris (el PDF usa 2 flechas blancas discretas, no una línea) */
.ayc-native svg.ayc-timeline-arrow { display: none !important; }
/* Espacio entre el texto superior "Así trabajamos contigo" y la fila de cards */
.ayc-native [data-id="ixz9ksb1"] [data-id="myg8of7f"] { margin-top: 40px !important; }

/* [3] NUESTRA PROMESA: la circunferencia DENTRO de la tarjeta, con margen (no desbordada) */
.ayc-native [data-id="ll6itevi"] { padding: 10px 28px 10px 16px !important; align-items: center !important; }
.ayc-native [data-id="2s3d2i03"] { width: 240px !important; max-width: 240px !important; margin: 0 auto !important; }

/* CTA banda azul ROBUSTA: Elementor pinta el bg en .elementor-background-overlay, no en la sección → set en ambos */
.ayc-native.ayc-native.ayc-native[data-id="8x0l93wp"],
.ayc-native [data-id="8x0l93wp"] > .elementor-background-overlay,
.ayc-native [data-id="8x0l93wp"] > .e-con-inner {
  background-color: #0075a9 !important;
  background-image: linear-gradient(100deg, #0075a9 0%, #1e2751 80%) !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 — BANDA STATS "Confianza
   respaldada por resultados" (sección sj6v5zqm / fila qh0b8rle /
   columnas zgzick0h ya4wbjti c8ql1y3s 0h5qmaso ur1nztr5).
   Cierra 6 gaps: 6 separadores navy bracketeados, color etiqueta
   gris-teal, separadores de altura uniforme, cluster centrado
   ~1214px, iconos por ALTURA ~64px. Las reglas de style.css
   (legacy, NO dequeado) son (0,3,1)/(0,4,0) CON !important → hay
   que igualar o superar especificidad + !important.
   La fila qh0b8rle es e-con-full: hijos DIRECTOS (sin .e-con-inner),
   flex vive en el propio [data-id]. Clase triplicada gana a post-13.
   ============================================================ */

/* [STATS layout] Cluster CENTRADO ~1214px (≈84% de 1440). La fila era
   full-bleed 1385px → separadores exteriores a x113 / x1327 (no x20/x1405).
   En e-con-full el max-width y el centrado van en el propio elemento. */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"],
.ayc-native.ayc-native.ayc-native .elementor-element-qh0b8rle {
  max-width: 1214px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* celdas iguales pegadas (los bordes SON los divisores) → 6 líneas equiespaciadas */
  justify-content: flex-start !important;
  /* altura uniforme: las 5 columnas se estiran a la más alta → separadores de
     altura idéntica e independientes del contenido de cada etiqueta */
  align-items: stretch !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
}

/* [STATS separadores] cada columna = celda flex igual (1/5). Reafirma flex:1
   (style.css lo da, lo blindamos) y borde derecho navy en las 5 (incl. la 1ª);
   borde IZQUIERDO navy SOLO en la 1ª = la línea exterior izquierda. */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] > .elementor-element {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  border-right: 1px solid #DBE0EA !important;   /* A5: navy → gris sutil #DBE0EA (= divisores de QS) */
  border-left: 0 !important;
  text-align: center !important;
  /* el contenido (icono+número+etiqueta) se alinea arriba dentro de la celda
     estirada; los bordes ocupan TODA la altura de la celda (uniforme) */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  padding: 0 24px !important;
}
/* línea EXTERIOR izquierda (antes del stat 1) — el bracket izquierdo */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] > .elementor-element:first-child {
  border-left: 1px solid #DBE0EA !important;   /* A5: gris sutil = QS */
}
/* línea EXTERIOR derecha (después del stat 5) — restaura el borde que el
   :last-child de style.css quita (border-right:none) → el bracket derecho */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] > .elementor-element:last-child {
  border-right: 1px solid #DBE0EA !important;   /* A5: gris sutil = QS */
}

/* [STATS color etiqueta] las descripciones (años de experiencia, etc.) venían
   #6B7280 (desde description_color en _elementor_data → post-13.css, e
   icon-box-description en style.css) → gris-teal de marca #839794. */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] .elementor-image-box-description,
.ayc-native.ayc-native.ayc-native [data-id="zgzick0h"] .elementor-image-box-description,
.ayc-native.ayc-native.ayc-native [data-id="ya4wbjti"] .elementor-image-box-description,
.ayc-native.ayc-native.ayc-native [data-id="c8ql1y3s"] .elementor-image-box-description,
.ayc-native.ayc-native.ayc-native [data-id="0h5qmaso"] .elementor-image-box-description,
.ayc-native.ayc-native.ayc-native [data-id="ur1nztr5"] .elementor-image-box-description {
  color: #839794 !important;
}

/* [STATS iconos] dimensionar por ALTURA común ~64px (no width fijo 56px), así
   los 5 iconos comparten altura visual (el edificio dejaba de ser demasiado
   alto y las estrellas demasiado bajas). Anula el width:60px del custom_css
   por-widget y el width:56px global. */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] .elementor-image-box-img img {
  width: auto !important;
  max-width: 100% !important;
  height: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
}
/* la caja del icono ya no necesita altura fija anterior (51px) — que respete
   los 64px del <img> y deje un respiro bajo el icono.
   CENTRADO HORIZONTAL: Elementor da a .elementor-image-box-img un ancho fijo =
   ancho del icono (p.ej. 87px en la 5ª col, 51px en la 1ª) y, al ser un bloque
   block-level dentro del .elementor-image-box-wrapper (display:block), queda
   pegado a la IZQUIERDA → su centro NO coincide con el del número/etiqueta
   (centrados a 289px). margin-inline:auto centra la caja del icono sobre el
   eje del número en las 5 columnas (visible sobre todo en la 5ª, más ancha). */
.ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] .elementor-image-box-img {
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 — ANCHO 5ª COLUMNA + RITMO 2 LÍNEAS
   El reparto previo daba flex:1 1 0 a las 5 celdas (anchos iguales ~244px).
   La 5ª etiqueta ("de aprobación en categorías gestionadas por AYC", ~47 chars)
   sólo cabía ~2 palabras/línea → envolvía a 4 líneas (medido 128px) rompiendo
   el equilibrio vertical de la fila. El PDF da a la 5ª columna MÁS ancho para
   que su etiqueta caiga en 2 líneas ("de aprobación en categorías" /
   "gestionadas por AYC"). Centralizado en el bloque scopeado de la fila, sin
   !important por-data-id de un solo uso. Clase TRIPLICADA gana a post-13/style.css.
   ============================================================ */

/* [STATS 5ª columna ancha — RETIRADO 2026-09-04] Existía un `flex:1.7` para la 5ª
   celda ("99% de aprobación..."), cuya etiqueta larga necesitaba ~314px. Al eliminar
   ese stat por pedido del cliente (ítem 1C) la fila pasó a 4 columnas y el selector
   posicional `:last-child` empezó a ensanchar por error a la 4ª ("400+ reseñas
   verificadas"): medido 417px frente a 265px de las otras tres. Se retira la regla
   → las 4 columnas reparten por igual (flex:1 1 0 del bloque de l.1283). */

/* [STATS etiquetas — REVISADO 2026-09-04] Con 5 columnas estrechas las etiquetas
   1-3 rompían solas a 2 líneas y se forzaba a la 4ª ("reseñas verificadas") con un
   max-width:140px para igualar ese ritmo. Al quedar 4 columnas (ítem 1C) cada celda
   mide ~303px y las cuatro etiquetas caben en UNA línea; el cap de 140px dejaba sólo
   a la 4ª partida en dos, justo el desequilibrio inverso. Se retira el cap → ritmo
   uniforme de 1 línea. (La regla de la 5ª se va con el stat eliminado.) */

/* [STATS spacing] El título "Confianza respaldada por resultados" flotaba arriba:
   100px de aire ENCIMA vs 20px DEBAJO (ratio 5:1). El PDF lo muestra centrado en
   su banda (≈0.86:1 arriba:abajo). Equilibramos a ~70px arriba / ~70px abajo:
   bajamos el padding-top de la sección de 100→70 (override del bloque compartido
   de bandas, l.1157) y añadimos margin-bottom 50px al título → 20px gap heredado
   + 50 = 70px debajo. padding-bottom queda en 100 (fin de banda correcto). */
.ayc-native.ayc-native[data-id="sj6v5zqm"] { padding-top: 70px !important; }
.ayc-native.ayc-native.ayc-native [data-id="patiapip"] { margin-bottom: 32px !important; }   /* −36% (50→32, jun-2026): menos blanco bajo el título → menos scroll */

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 — "NUESTRA PROMESA" (sección ef72b413)
   card 9ocgr3gm (e-con-full, flex row) = uvqgyi4m (texto) + ll6itevi (círculo).
   Cierra 7 gaps medidos: círculo grande que DESBORDA, iconos line-style navy,
   etiquetas gris-teal, subtítulo gris-teal + quiebre, título 56px.
   Geometría @1440: card height ≈326px → círculo 1.10x ≈ 358px (desborda ±16px
   arriba/abajo). El card se ESTRECHA (right ~1240) para liberar el canalón
   derecho y que el círculo (centro ≈ borde derecho del card) saque su mitad
   derecha FUERA sin pasar de x=1440 (0 overflow horizontal). Clase TRIPLICADA
   gana a post-13.css / style.css.
   ============================================================ */

/* [PROMESA-1 blocker — círculo grande que desborda]
   El card se estrecha y se ancla a la izquierda dejando el canalón derecho para
   el círculo. El card es CONTEXTO de posición → el círculo se ABSOLUTIZA respecto
   a él, así NO estira la altura del card (la card conserva ~326px y el círculo de
   358px sobresale ±16px arriba/abajo) y podemos clavar su mitad derecha FUERA del
   borde derecho del card sin que el flujo flex lo contenga. */
.ayc-native.ayc-native.ayc-native [data-id="9ocgr3gm"] {
  max-width: 1240px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  position: relative !important;
  overflow: visible !important;
  /* padding vertical bajo (18px) → card ≈324px de alto (paridad PDF: card 540px
     en PNG 2400 ≈ 324px @1440), MÁS BAJO que el círculo de 358px → el círculo
     sobresale ~17px arriba/abajo (PDF). */
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
/* la columna del círculo no ocupa ancho Y se hace position:static para que NO sea
   el offsetParent del círculo (Elementor pone todos los .e-con en position:relative).
   Así el círculo se absolutiza respecto al CARD 9ocgr3gm (su padding-box). */
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"] {
  padding: 0 !important;
  width: 0 !important; min-width: 0 !important; flex: 0 0 0 !important;
  position: static !important;
  overflow: visible !important;
}
/* CÍRCULO 358x358 (no elipse 240x210). ABSOLUTO respecto al padding-box del card.
   right:-162px → borde derecho del círculo ≈ 1422 (dentro del viewport 1425, 0
   overflow), centro ≈ borde derecho del card → la mitad derecha sale FUERA.
   Centrado vertical → sobresale arriba/abajo respecto al card más bajo. */
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] {
  position: absolute !important;
  right: -162px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 358px !important; max-width: 358px !important;
  height: 358px !important; min-height: 358px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(30,39,81,.06) !important;
  box-shadow: 0 8px 24px rgba(30,39,81,.10) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 56px !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 2 !important;
}
/* el logo dentro del círculo escala con el disco (antes 142x109 en disco chico) */
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] img {
  width: 100% !important; max-width: 100% !important; height: auto !important;
}

/* [PROMESA-2 blocker — iconos line-style] glifos cambiados en _elementor_data a
   far fa-star / far fa-user / far fa-dot-circle (outline). El render SVG (e-far-*)
   debe pintar contorno: navy en stroke, SIN relleno sólido. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-icon svg {
  fill: #1e2751 !important;   /* los glifos 'far' son contornos: el fill dibuja la línea */
  color: #1e2751 !important;
  width: 22px !important; height: 22px !important;
}

/* [PROMESA-3 major — color icono navy] el contenedor del icono en navy de marca
   (venía verde #9dc41a en el corazón). Refuerza por si algún glifo usa currentColor. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-icon {
  color: #1e2751 !important;
}

/* [PROMESA-4 major — etiquetas gris-teal] el texto NO-strong de cada stat
   ('años de experiencia', 'profesionales', 'tu tranquilidad') en gris-teal de
   marca #839794; el <strong> del valor SIGUE verde (regla previa intacta). */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-text {
  color: #839794 !important;
}
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-text strong {
  color: #9dc41a !important;   /* reafirma el valor verde de marca */
}

/* [PROMESA-5 major — subtítulo gris-teal] krzy8fuz venía #6b7280 (slate Tailwind)
   → gris-teal de marca #839794. */
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"],
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"] p,
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"] .elementor-widget-container {
  color: #839794 !important;
}

/* [PROMESA-6 major — quiebre del subtítulo en 2 líneas] con el círculo grande
   ocupando la derecha, la columna de texto se estrecha; limitamos su ancho a
   ~62% del card para forzar el quiebre tras 'siempre' (línea1 termina en
   'explorando siempre'). Aplica a heading, subtítulo y stats por coherencia. */
.ayc-native.ayc-native.ayc-native [data-id="uvqgyi4m"] {
  max-width: 760px !important;
}
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"] {
  /* 680px: línea1 "…explorando siempre" mide 650px (cabe), añadir "todas" sube a
     706px (NO cabe) → quiebre exacto tras 'siempre' como el PDF. */
  max-width: 680px !important;
}

/* [PROMESA-6b — stats en UNA fila] El icon-list necesita ~830px para las 3 stats
   en una sola fila (PDF); la columna de texto se estrechó a 760 para el quiebre
   del subtítulo → el 3º stat ('Priorizando') envolvía. Damos al icon-list ancho
   propio (860px, hasta antes del círculo que arranca en x~1064) y nowrap, sin
   tocar el ancho del subtítulo. uvqgyi4m tiene overflow visible → no recorta. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] {
  width: 860px !important; max-width: 860px !important;
}
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-items {
  flex-wrap: nowrap !important;
}

/* [PROMESA-7 minor — título 56px] lb5iw7ns es H2; el global h2=50px. Subimos
   SÓLO este título a 56px (único, más grande — no reintroduce tamaños chicos en
   la categoría global). Color navy y peso 700 ya correctos. */
.ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] .elementor-heading-title {
  font-size: var(--fs-hero) !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 (v2) — "NUESTRA PROMESA" (sección ef72b413)
   La ronda v1 (arriba) quedó CORTA: card aún 1240px (círculo dentro), iconos
   22px filled-look, padding vertical 18px (flat), título 56px (debía ~40px),
   stats con valor+etiqueta en una sola línea corrida (wrap a mitad de frase).
   Esta ronda CORRIGE cada gap medido y GANA por ir ÚLTIMA con misma o mayor
   especificidad (clase TRIPLICADA + !important donde post-13.css/style.css pisan).
   Geometría @1440 (medida): sección right=1425. Objetivos:
     - card 9ocgr3gm: width ~910 (right ~930) → ESTRECHO, no contiene el círculo.
     - circle 2s3d2i03: 358Ø, center ~x1140, right ~x1318 → mitad-larga FUERA a la
       derecha, sin overflow (1318<1425). right:-388 desde el padding-box del card.
     - title lb5iw7ns: 40px / lh 48px (no 56).
     - icons ytds4dmc: 58px navy line-style (no 22).
     - padding vertical del card: 58px; gaps title→sub→stats ~38px.
     - cada stat: valor (verde, grande) en línea 1; etiqueta (gris-teal) en línea 2.
   ============================================================ */

/* [PROMESA v2-1 BLOCKER — card ESTRECHO + círculo MAYORMENTE FUERA a la derecha]
   Card a ~910px anclado a la izquierda. Sigue siendo el offsetParent del círculo
   (position:relative) → el círculo absoluto se ancla a su padding-box. */
.ayc-native.ayc-native.ayc-native [data-id="9ocgr3gm"] {
  /* [v3 ROUND END] el gris se extiende hasta ~el CENTRO del círculo (x≈1135) para
     rellenar DETRÁS de su mitad izquierda → el borde derecho del card aparece como un
     ARCO CÓNCAVO que abraza el círculo (separado por su aro blanco), como el PDF.
     El texto queda a la izquierda (uvqgyi4m max-width 700); el extra es gris tras el círculo. */
  max-width: 1115px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  position: relative !important;
  overflow: visible !important;
  padding-top: 58px !important;
  padding-bottom: 58px !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
}
/* círculo 358Ø anclado al padding-box del card; right:-388 → right edge ≈ 930+388=1318,
   center ≈ 1139, left edge ≈ 960 (roza el borde derecho del card: mayormente fuera). */
/* [PROMESA v3 — círculo GRANDE que SOBRESALE de la card y la SOLAPA a la derecha]
   Ø430 (> card ~392 → sobresale ~19px arriba/abajo). right:-420 → right edge ≈ 930+420=1350,
   left edge ≈ 920 (toca/solapa el borde derecho del card 930: ~10px overlap, sin hueco blanco;
   right 1350 < section 1425 → sin overflow). Aro BLANCO 4px = la separación del PDF sobre el gris
   del card. Padding 36 → el logo llena ~85% del círculo. box-sizing border-box. */
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] {
  position: absolute !important;
  right: -215px !important;   /* card right ahora ≈1135 → circle right ≈1350, left ≈920 (misma pos absoluta, < 1425 sin overflow) */
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 430px !important; max-width: 430px !important;
  height: 430px !important; min-height: 430px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background: #efefef !important;             /* disco gris claro (PDF), distinto del blanco de página */
  border: 4px solid #ffffff !important;       /* aro blanco = la separación del PDF sobre el gris del card */
  box-shadow: 0 10px 28px rgba(30,39,81,.12) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 36px !important;                   /* menos padding → logo más grande (~85% del círculo) */
  margin: 0 !important;
  overflow: visible !important;
  z-index: 2 !important;
}
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] img {
  width: 100% !important; max-width: 100% !important; height: auto !important;
}

/* [PROMESA v2-4 MAJOR type — título ~40px] el global h2=50px y la ronda v1 lo subió
   a 56px (MAL: el PDF da cap-height 26px ≈ font-size ~40px). Bajamos a 40px / lh 48px.
   Único por-data-id (más CHICO que el global h2 pero es título de card, no de banda;
   no reintroduce tamaños chicos en la categoría global de secciones). */
.ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] .elementor-heading-title {
  font-size: var(--fs-promesa) !important;
  line-height: 48px !important;
  margin-bottom: 0 !important;
}

/* [PROMESA v2-3 spacing — ritmo vertical de la columna de texto] gap title→sub→stats.
   uvqgyi4m es la columna de texto (flex column). Damos gap entre sus 3 hijos. */
.ayc-native.ayc-native.ayc-native [data-id="uvqgyi4m"] {
  max-width: 700px !important;
  gap: 36px !important;
  justify-content: flex-start !important;
}
/* refuerzo del aire entre subtítulo y stats por si el gap del contenedor no aplica
   a widgets con margin propio.
   [v2 — quiebre en 2 líneas como el PDF] línea1 "…explorando siempre"=650px cabe;
   añadir "todas" sube a 706px (NO cabe) → max-width 680px quiebra EXACTO tras
   'siempre' (2 líneas, no 3) → baja la altura del card hacia el PDF. */
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"] {
  max-width: 680px !important;
  margin-bottom: 0 !important;
}

/* [PROMESA v2-2 MAJOR image — iconos line-style GRANDES navy ~58px] la ronda v1 los
   dejó en 22px. Los glifos ya son outline (e-far-star / e-far-user / e-far-dot-circle
   en _elementor_data). Subimos a 58px, fill navy (los 'far' son contornos → el fill
   dibuja la línea). GANA al per-data-id 22px de v1 (misma spec, va último) y al
   global .elementor-icon svg{48px}. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-icon svg,
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-icon .e-font-icon-svg {
  width: 58px !important; height: 58px !important;
  fill: #1e2751 !important; color: #1e2751 !important;
}
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-icon {
  color: #1e2751 !important;
  align-self: flex-start !important;       /* icono grande alineado arriba del bloque valor+etiqueta */
  margin-top: 2px !important;
}

/* [PROMESA v2-5 MAJOR layout — valor en línea 1, etiqueta en línea 2]
   Cada stat = icono | (valor verde grande / etiqueta gris-teal). El texto vive en
   span.elementor-icon-list-text como "<strong>valor</strong> etiqueta" corrido →
   envolvía a mitad de frase. Hacemos el <strong> BLOQUE (valor solo en su línea) y la
   etiqueta cae debajo como bloque propio limpio. El item se ensancha para que la
   etiqueta NO parta a mitad de palabra. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  align-items: flex-start !important;
}
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item {
  flex: 0 0 auto !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* el texto del item = columna (valor arriba, etiqueta abajo) */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-text {
  display: block !important;
  color: #839794 !important;               /* etiqueta gris-teal de marca */
  font-family: var(--ayc-font-body) !important;
  font-size: var(--fs-nav-sub) !important; line-height: 1.25 !important;
  white-space: normal !important;
}
/* VALOR: <strong> a bloque → ocupa su propia línea (línea 1); etiqueta cae debajo.
   [v2-8 minor type] valor a 34px (PDF ~32-36). Verde de marca, Futura Bold. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-text strong {
  display: block !important;
  color: #9dc41a !important;
  font-family: var(--ayc-font-head) !important;
  /* [2026-08-27] 800 -> 700: Futura Bold ES 700; pedir 800 hace que el navegador
     sintetice un faux-bold deformado. Canon del proyecto = 700. */
  font-weight: 700 !important;
  font-size: var(--fs-section) !important; line-height: 1.05 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;          /* "30+"/"25"/"Priorizando" nunca parten */
}

/* [PROMESA v2 — la columna del círculo sigue sin ocupar ancho y static (no offsetParent) */
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"] {
  padding: 0 !important;
  width: 0 !important; min-width: 0 !important; flex: 0 0 0 !important;
  position: static !important;
  overflow: visible !important;
}

/* ============================================================
   HOVER GLOBAL DE BOTONES (pedido cliente: "hover en los botones por lo menos").
   Aplica a TODOS los botones del Home (Elementor + submit del form) de forma
   centralizada: elevación + sombra + leve brillo. Transición suave. NO toca el
   color base (respeta los hovers de color existentes por-botón). Las animaciones
   de CARGA ya existen vía animations.js (ayc-d-reveal / fade-up / counter).
   ============================================================ */
.ayc-native.ayc-native .elementor-button,
.ayc-native.ayc-native .elementor-post__read-more,
.ayc-native.ayc-native input[type="submit"],
.ayc-native.ayc-native button[type="submit"],
.ayc-native.ayc-native .contactanos-btn {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background-color .25s ease !important;
  will-change: transform;
}
.ayc-native.ayc-native .elementor-button:hover,
.ayc-native.ayc-native .elementor-post__read-more:hover,
.ayc-native.ayc-native input[type="submit"]:hover,
.ayc-native.ayc-native button[type="submit"]:hover,
.ayc-native.ayc-native .contactanos-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(30,39,81,.22) !important;
  filter: brightness(1.06) !important;
}
.ayc-native.ayc-native .elementor-button:active,
.ayc-native.ayc-native input[type="submit"]:active,
.ayc-native.ayc-native button[type="submit"]:active {
  transform: translateY(-1px) !important;
}
/* Tabs "Soluciones integrales": leve feedback al pasar el cursor (no-activos) */
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-title:not(.elementor-active):hover {
  filter: brightness(1.05) !important; transform: translateY(-2px) !important;
  transition: transform .2s ease, filter .2s ease !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 — "SOLUCIONES INTEGRALES" (sección nchb1fkt)
   Cierra 6 gaps medidos @1440 (todos verificados con getComputedStyle/Rect):
     1) [blocker image] foto equipo: tinte navy quemado en el JPG → asset
        de-tinteado (home-equipo-band.jpg regenerado, sin overlay). Aquí solo
        ajustamos encuadre/brillo; el overlay no existe en _elementor_data.
     2) [major spacing] gap CTA→foto 302px (>diseño 186) → subir la foto pegándola
        al form: section padding-bottom 40→0, tab-content padding-bottom 32→4.
     3) [major layout] fila de 2 columnas align-items:flex-start → CENTER (texto+
        botón equilibrado frente al form, sin vacío de 158px bajo la izquierda).
     4) [major type] label términos 20px/negro → 13px gris-teal #839794.
     5) [minor color] párrafos columna izq #6b7280 → gris-teal de marca #839794.
     6) [minor state] checkbox nativo 13x13 → accent navy #1e2751 + borde gris fino.
   Append-only, gana al ir ÚLTIMA. Clase TRIPLICADA donde post-13.css pisa (0,3,0).
   ============================================================ */

/* [#2 spacing] Pegar la foto del equipo al formulario: la sección nchb1fkt es
   top-level (TIENE la clase) → TRIPLICADA. padding-bottom 0 y el panel de tabs
   casi sin padding inferior → la foto sube ~110px (foto top 1733→~1623, gap
   CTA→foto 302→~190 ≈ diseño 186). NO toca el padding-top (ritmo de banda OK). */
.ayc-native.ayc-native.ayc-native[data-id="nchb1fkt"] {
  padding-bottom: 0 !important;
}
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-content,
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active {
  padding-bottom: 4px !important;
}

/* [#3 layout] Fila de 2 columnas (texto+botón | formulario) CENTRADA verticalmente
   → el bloque izquierdo (h=222) se centra frente al form (h=380) y desaparece el
   vacío de 158px bajo la columna izquierda. Esta regla GANA a la previa flex-start
   (~línea 1019) por ir ÚLTIMA con misma especificidad + variante .elementor-active. */
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div {
  align-items: center !important;
}
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div > :first-child,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div > :first-child {
  align-self: center !important;
}

/* [#5 color] Párrafos de la columna izquierda (2 párrafos del widget 1ppisbmk)
   en GRIS-TEAL DE MARCA #839794 (venía #6b7280 Tailwind genérico). Coherencia con
   el subtítulo. El texto vive en <p>. TRIPLICADA + !important gana a post-13.css. */
.ayc-native.ayc-native.ayc-native [data-id="1ppisbmk"] p,
.ayc-native.ayc-native.ayc-native [data-id="1ppisbmk"] .elementor-widget-text-editor,
.ayc-native.ayc-native.ayc-native [data-id="1ppisbmk"] .elementor-widget-text-editor p {
  color: #839794 !important;
}

/* [#4 type] Label "He leído y acepto los términos y condiciones." → discreto:
   ~13px, gris-teal de marca #839794 (venía 20px negro). El label es bare <label>
   dentro de .ayc-terms-row (id de checkbox dinámico → targeteamos por estructura). */
.ayc-native .ayc-zoho-material-form .ayc-terms-row label,
.ayc-native .ayc-zoho-material-form .zcwf_col_fld .ayc-terms-row label {
  font-size: var(--fs-body) !important;
  line-height: 1.35 !important;
  color: #839794 !important;
  font-family: var(--ayc-font-body) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* [#6 state] Checkbox de términos: cuadrado minimalista de marca. accent navy
   #1e2751 + borde gris fino (appearance custom para que el borde pinte en todos
   los navegadores). 16x16, alineado con el label. */
.ayc-native .ayc-zoho-material-form .ayc-terms-row input[type="checkbox"],
.ayc-native .ayc-zoho-material-form .zcwf_col_fld .ayc-terms-row input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  accent-color: #1e2751 !important;
  width: 16px !important; height: 16px !important;
  min-width: 16px !important;
  border: 1.5px solid #c7ccca !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  margin: 0 8px 0 0 !important;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
/* estado marcado: relleno navy + check blanco dibujado */
.ayc-native .ayc-zoho-material-form .ayc-terms-row input[type="checkbox"]:checked {
  background: #1e2751 !important;
  border-color: #1e2751 !important;
}
.ayc-native .ayc-zoho-material-form .ayc-terms-row input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 4.5px !important; top: 1px !important;
  width: 4px !important; height: 8px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
/* la fila checkbox+label en línea, alineada al inicio (no estirada) */
.ayc-native .ayc-zoho-material-form .ayc-terms-row {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 8px !important;
  flex-wrap: wrap !important;
}

/* [#1 image] Foto del equipo (de-tinteada): encuadre al grupo de pie + brillo
   limpio (PDF: fondo claro, sin tinte). El asset ya viene sin cast navy; aquí solo
   encuadramos para mostrar a las personas de pie y reducimos el filtro (el JPG ya
   es brillante → menos brightness extra para no quemar). TRIPLICADA gana a post-13. */
.ayc-native.ayc-native.ayc-native[data-id="ayceqfoto"],
.ayc-native.ayc-native.ayc-native.elementor-element-ayceqfoto {
  background-position: 50% 14% !important;
  background-size: cover !important;
  filter: none !important;   /* el asset ya está de-tinteado y brillante */
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 (v3) — "SOLUCIONES INTEGRALES" (sección nchb1fkt)
   Cierra los gaps del auditor (todos medidos @1440 con getComputedStyle/Rect).
   Esta ronda va ÚLTIMA → gana a las reglas previas con igual/menor especificidad.
   Clase TRIPLICADA + !important donde post-13.css (0,3,0) pisa.
   NOTA: el blocker de la FOTO (asset estudio de fila de personas) NO se puede
   cerrar aquí: el proyecto no contiene ese recurso; queda devuelto para re-export.
   ============================================================ */

/* [major color] Fondo de la sección #ffffff → #efefef (panel gris claro del PDF;
   los subrayados #c7ccca y los chips blancos ENVIAR están diseñados sobre gris).
   Sección top-level (TIENE la clase) → TRIPLICADA sin espacio gana a post-13.css. */
.ayc-native.ayc-native.ayc-native[data-id="nchb1fkt"] {
  background-color: #efefef !important;
}

/* [major layout] Fila de 2 columnas del panel activo de tabs: align-items center
   → flex-start (TOP-align). El párrafo izquierdo debe arrancar a la misma y que
   "Nombre completo". Una ronda previa (≈1699) la dejó en center → la columna corta
   se centraba ~72px por debajo del form. Esta regla, ÚLTIMA + misma estructura,
   gana. Anula también el align-self:center previo del primer hijo. */
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div {
  align-items: flex-start !important;
}
.ayc-native [data-id="6eeek77d"] .elementor-tab-content > div > :first-child,
.ayc-native [data-id="6eeek77d"] .elementor-tab-content.elementor-active > div > :first-child {
  align-self: flex-start !important;
}

/* [major spacing] Botón "Contáctanos" (verde marca #9dc41a): pill estrecha 193px
   → ~305px. El padding global de .elementor-button (14px 34px, línea ~1150) NO
   aplica porque este link usa la clase .contactanos-btn (no .elementor-button).
   Subimos el padding horizontal 26→50 → ancho render ≈300-310px. Mantiene verde,
   texto blanco, radio 6px, icono a la izquierda. Gana por ir ÚLTIMA (misma spec). */
.ayc-native.ayc-native .contactanos-btn {
  padding: 11px 50px !important;
  min-width: 305px !important;        /* pill ancha del PDF ≈300-310px */
  justify-content: center !important; /* icono+texto centrados en la pill ancha */
  box-sizing: border-box !important;
  border-radius: 6px !important;
}

/* [minor type] H2 "Soluciones integrales" (dny0xfaj): global h2=50px → este título
   a 46px (spec del auditor; ink ~9% sobredimensionado). Override por-data-id,
   patrón ya usado en lb5iw7ns; no toca los demás H2 de banda. TRIPLICADA gana. */
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] .elementor-heading-title {
  font-size: var(--fs-h2-46) !important;
}

/* [minor spacing] Gap entre pills de tabs 10px → 20px (PDF). Los 1/3 iguales (regla
   ≈1159) son correctos; sólo el gap está a la mitad. Subimos el gap del wrapper. */
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
  gap: 20px !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 — "SOLUCIONES CLARAS, trato honesto..."
   (sección ixz9ksb1). Cierra 8 gaps medidos @1440 (todos verificados con
   getComputedStyle/getBoundingClientRect). Append-only, gana al ir ÚLTIMA.
   Clase TRIPLICADA + !important donde post-13.css (0,3,0) / reglas previas pisan.
   El colon verde, el círculo 76px y el número 30px ya van en _elementor_data.
   ============================================================ */

/* [SOLCLARAS-1 major color — GRADIENTE navy→azul] La sección era navy plano
   (reglas previas líneas ~17-21 y ~204-207 forzaban background-color:#1e2751 +
   background-image:none con clase TRIPLICADA). El PDF muestra transición vertical
   navy #1e2751 (arriba) → azul de marca #0075a9 (abajo). Reafirmamos en la sección
   Y en su .e-con-inner / overlay por si Elementor pinta el bg en una capa aparte. */
.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] {
  background-color: #1e2751 !important;
  background-image: linear-gradient(180deg, #1e2751 0%, #0075a9 100%) !important;
  background: linear-gradient(180deg, #1e2751 0%, #0075a9 100%) !important;
}
.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] > .elementor-background-overlay {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #1e2751 0%, #0075a9 100%) !important;
}

/* [SOLCLARAS-2 major type — SUBTÍTULO "Así trabajamos contigo:" ~34px] El <p>
   (widget oppvfba2) tenía inline 16px pero el global .ayc-native.ayc-native p
   (0,3,1) lo escalaba a 20px. Subimos a 34px (PDF: subtítulo ≈ tamaño del título).
   Futura Medium, blanco .85 (ya inline). El colon verde va en _elementor_data. */
.ayc-native.ayc-native.ayc-native [data-id="oppvfba2"],
.ayc-native.ayc-native.ayc-native [data-id="oppvfba2"] p {
  font-size: var(--fs-section) !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

/* [SOLCLARAS-3 minor type + color — DESCRIPCIÓN de las 3 cards ~15px gris-teal]
   Los <p> de las cards (5jn6nn5b/vumj2cdv/ptfe26dd) traían inline 15px +
   rgba(255,255,255,0.8) PERO el global p los subía a 20px y otra regla los pintaba
   #374151 (azul-gris Tailwind). El PDF: gris-teal de marca #839794, ~15px. */
.ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"],
.ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"] p,
.ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"],
.ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"] p,
.ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"],
.ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"] p {
  color: #839794 !important;
  font-size: var(--fs-15) !important;
  line-height: 1.6 !important;
}

/* [SOLCLARAS-4 minor image — CÍRCULO VERDE sin halo blanco] El <div> del número
   (ya 76px inline en _elementor_data) tenía box-shadow blanco 6px (halo) de rondas
   previas (línea ~834). El PDF: disco verde directo sobre el fondo, sin aro claro.
   Quitamos halo, border y forzamos el tamaño 76px (por si border-box lo encoge). */
.ayc-native.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"],
.ayc-native.ayc-native [data-id="njz7rtfr"] div[style*="border-radius: 50%"],
.ayc-native.ayc-native [data-id="epre1cla"] div[style*="border-radius: 50%"],
.ayc-native.ayc-native [data-id="yrd3fj94"] div[style*="border-radius: 50%"] {
  width: 76px !important; height: 76px !important;
  box-shadow: none !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
/* el círculo ahora es 76px → sube media altura fuera de la card (margin-top -38px)
   para que SOLAPE el borde superior como el PDF (antes -52px para 52px de alto). */
.ayc-native.ayc-native [data-id="njz7rtfr"],
.ayc-native.ayc-native [data-id="epre1cla"],
.ayc-native.ayc-native [data-id="yrd3fj94"] {
  margin-top: -38px !important;
}

/* [SOLCLARAS-5 major image + layout — FLECHAS BLOQUE BLANCAS, conectoras y altas]
   Reconstruye el conector entre círculos: shaft horizontal blanco con FADE +
   cabeza triangular sólida, ~160px de largo, CENTRADO a la altura del círculo
   (su centro ~cy del círculo, no en el top-line de la card). Anula las rondas
   previas (líneas ~1172-1193): el bloque era sólo ~50px y caía bajo el círculo.
   Ocultamos el icono fa-arrow-right hijo y el svg.ayc-timeline-arrow del JS. */
.ayc-native.ayc-native [data-id="nw0oe484"],
.ayc-native.ayc-native [data-id="rf75jvl7"] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;     /* arranca en el TOP de la fila = centro del círculo (que sobresale -38px) */
  flex: 1 1 0 !important;                 /* ocupa el hueco entre cards → shaft largo */
  width: auto !important; min-width: 120px !important;
  height: 76px !important;               /* alto = el círculo (76px) → su centro = centro del círculo */
  margin-top: -38px !important;          /* sube el conector a la altura del círculo (que sale -38px sobre la card) */
  overflow: visible !important;
}
/* oculta cualquier hijo (icono fa, widget-container) → sólo pintan los pseudo */
.ayc-native.ayc-native [data-id="nw0oe484"] > *,
.ayc-native.ayc-native [data-id="rf75jvl7"] > * { visibility: hidden !important; }
/* SHAFT: barra blanca con fade (gradiente transparente→blanco), centrada vertical */
.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important; right: 26px !important;       /* deja sitio a la cabeza */
  top: 50% !important; transform: translateY(-50%) !important;
  height: 8px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 100%) !important;
  border-radius: 2px !important;
  display: block !important; visibility: visible !important;
}
/* CABEZA: triángulo blanco sólido a la derecha, centrado vertical */
.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  content: "" !important;
  position: absolute !important;
  right: 4px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-top: 14px solid transparent !important;
  border-bottom: 14px solid transparent !important;
  border-left: 22px solid #ffffff !important;
  display: block !important; visibility: visible !important;
}
/* el svg gris/verde inyectado por el JS sigue oculto (PDF usa 2 flechas blancas) */
.ayc-native svg.ayc-timeline-arrow { display: none !important; }

/* ============================================================
   [SOLCLARAS-6 — FLECHA CONECTORA LARGA, ALTA y A ALTURA DE CÍRCULO]
   Cierra los 3 gaps de imagen/spacing medidos @1440 en las flechas
   nw0oe484 / rf75jvl7 (huecos entre círculos verdes).

   Estado previo medido (round-5):
     · ::before width = 34px  (lo pinaba la ronda vieja, línea ~1182,
       width:34px !important (0,3,0)) → el right:26px se ignoraba → tronco
       de sólo 34px (gap #1: arrow_full/pitch ≈ 0.10 vs PDF 0.69).
     · ::after cabeza = 22w×28h (rechoncha) → gap #2 (PDF ~16w×54h, esbelta).
     · centro de flecha en y≈2820 vs centro de círculo y≈2846 → 26px ALTA;
       PDF quiere la flecha ~7px BAJO el centro del círculo (gap #3).

   Geometría objetivo (medida, no asumida) @1440:
     bloque nw0oe484: x328 → x568 (w=240). Círculo2.left = 674.
     Cabeza-tip deseado ≈ x660 (≈14px antes del círculo2). El bloque sólo
     llega a x568 → la cabeza/tronco DEBEN sobresalir (overflow:visible).
       · tip x660 ⇒ ::after right = 568-660 = -92px.
       · cabeza w=16 ⇒ base en x644 ⇒ ::before right = 568-644 = -76px.
       · tronco arranca a left:8px (x336, ~14px tras círculo1.right=222
         + margen del propio bloque) → longitud tronco ≈ 644-336 = 308px,
         flecha completa (tronco+cabeza) ≈ 660-336 = 324px ⇒
         arrow_full/pitch ≈ 324/528 = 0.61 (vs PDF 0.69, ya conectora).
   Centrado vertical: el bloque centra en y2820; subir +33px (calc(50%+33))
   deja el centro de la flecha en y2853 = círculo cy(2846)+7 → PDF. */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"],
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"] {
  overflow: visible !important;
}
/* TRONCO largo: anulamos el width:34px viejo (width:auto) → mandan left+right.
   Fade transparente→blanco como el PDF. */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  content: "" !important;
  position: absolute !important;
  width: auto !important;                 /* NEUTRALIZA el width:34px de la ronda vieja */
  left: 8px !important; right: -76px !important;  /* tronco x336 → x644 (≈308px) */
  top: calc(50% + 33px) !important;        /* baja a la altura del círculo +7px */
  transform: translateY(-50%) !important;
  height: 8px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 100%) !important;
  border-radius: 2px !important;
  display: block !important; visibility: visible !important;
}
/* CABEZA esbelta y alta: ~16w × 54h, tip ≈ x660 (justo antes del círculo2) */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  content: "" !important;
  position: absolute !important;
  left: auto !important; right: -92px !important; /* tip en x660 */
  top: calc(50% + 33px) !important;
  transform: translateY(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-top: 27px solid transparent !important;
  border-bottom: 27px solid transparent !important;
  border-left: 16px solid #ffffff !important;     /* 16w × 54h, esbelta como el PDF */
  display: block !important; visibility: visible !important;
}
/* Limpieza gap #4: el svg verde JS y los iconos fa-arrow-right hijos NUNCA visibles */
.ayc-native svg.ayc-timeline-arrow { display: none !important; }
.ayc-native [data-id="34x420jc"],
.ayc-native [data-id="z7va5kkc"] { display: none !important; }

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 (sección "Artículos y Recursos"
   data-id=vw9xt2jg, 6 gaps auditor). Append-only, gana al ir último.
   Clase TRIPLICADA donde post-13.css pisa radius:0 (0,3,0). MEDIDO.
   ============================================================ */

/* [GAP color] Fondo de SECCIÓN gris muy claro #efefef → hace resaltar las
   cards blancas. La sección TIENE la clase ayc-native → sin espacio, sin
   triplicar basta (no la pisa post-13), pero la añadimos por robustez. */
.ayc-native.ayc-native[data-id="vw9xt2jg"] {
  background-color: #efefef !important;
}

/* [GAP color+layout] CARD = el <article.elementor-post>: fondo BLANCO,
   esquinas redondeadas 10px en las 4 (con overflow:hidden recorta la imagen
   superior y deja el cuerpo blanco inferior redondeado) y sombra suave.
   OJO: la sección ES la propia .ayc-native[data-id=vw9xt2jg] → selector SIN
   espacio (mismo elemento), luego desciende al article. TRIPLICADO: post-13.css
   fija radius:0 / bg transparente en (0,3,0). */
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] article.elementor-post {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(30,39,81,0.10) !important;
}

/* [GAP type+layout] Título de card y botón "Ir al Blog" CENTRADOS dentro de
   la card. El bloque .elementor-post__text es flex column (ya impuesto antes
   con flex:1 para empujar el read-more al fondo). Centramos su eje cruzado y
   el texto. El read-more traía align-self:flex-start (ronda baseline) → lo
   pasamos a center; conserva margin-top:auto para anclarse abajo. */
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-post__text {
  align-items: center !important;
  text-align: center !important;
}
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-post__title,
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] h3.elementor-post__title {
  text-align: center !important;
}
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-post__read-more {
  align-self: center !important;
  margin-top: auto !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-11 (b) "Artículos y Recursos"
   data-id=vw9xt2jg. 3 gaps auditor: color subtítulo, wrap de
   títulos de card, peso del botón "Ir al Blog". Append-only.
   ============================================================ */

/* [GAP color — subtítulo] "Aprende, infórmate y avanza con contenido claro:".
   El color #6B7280 (gris azulado Tailwind) viene como ESTILO INLINE en el <p>
   (style="color:#6B7280;..."), spec (1,0,0,0) → solo lo bate un !important.
   Lo pasamos al gris-teal de marca #839794. Medido: el <p> es la hoja final. */
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-element-a6b6eym1 p,
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-element-a6b6eym1 .elementor-text-editor p {
  color: #839794 !important;
}

/* [GAP layout — wrap de títulos] En el PDF TODOS los títulos envuelven a 2-3
   líneas. La card mide 328px; post-13.css le da padding:16px (interior 296px)
   → "Cambios recientes en USCIS" (210px) y "Guías para emprendedores latinos"
   (266px) caían en 1 sola línea. Subimos el padding horizontal a 30px
   (interior ~268px) y CAPAMOS el título a max-width:230px centrado → fuerza el
   quiebre a 2-3 líneas como el diseño. post-13.css pisa con (0,3,0) sin
   !important → la clase triplicada (0,4,1) gana; añadimos !important por
   robustez frente a post-13. */
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-post__text {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-post__title,
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] h3.elementor-post__title {
  max-width: 230px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* [GAP type — peso botón "Ir al Blog"] post-13.css fija font-weight:600
   !important en .elementor-element-mtraui2s .elementor-post__read-more (0,3,0).
   Igualamos a 700 (Futura Bold real, consistente con la marca) con clase
   triplicada (0,4,1) + !important → gana. */
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] .elementor-post__read-more,
.ayc-native.ayc-native.ayc-native[data-id="vw9xt2jg"] a.elementor-post__read-more {
  font-weight: 700 !important;
}

/* ============================================================
   ANIMACIONES DE CARGA (SCROLL REVEAL) — BASE PARA EL HOME
   2026-06-11. MOTIVO: overrides.css (que define .ayc-reveal{opacity:0}) NO se
   carga en la Home (post-13) → todas las clases de reveal estaban INERTES aquí
   (los elementos aparecían sin fundido: medido opacity:1 estando is-visible:false).
   Replicamos la base del sistema (idéntica a overrides.css ANIMATIONS V6),
   scopeada a .ayc-native para no afectar otras páginas. animations.js sigue
   gobernando el disparo (añade .is-visible al entrar en viewport via
   IntersectionObserver). SOLO el sistema vivo ayc-reveal* (NO los alias legacy
   ayc-d-reveal-left/right, que quedaron sobre bloques full-width del hero/form
   → un translateX de 30px los sacaba del viewport y metía scroll horizontal;
   se dejan INERTES como estaban). Sutil: 30px de desplazamiento, 0.6s, stagger.
   `-left/-right` con overflow-x:clip por si el bloque toca el borde del viewport
   durante el deslizamiento (evita scroll horizontal sin recortar contenido). */
.ayc-native .ayc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.ayc-native .ayc-reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.ayc-native .ayc-reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
/* Estado revelado (lo activa animations.js con .is-visible). */
.ayc-native .ayc-reveal.is-visible,
.ayc-native .ayc-reveal-left.is-visible,
.ayc-native .ayc-reveal-right.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger (escalonado) por retardo de transición. */
.ayc-native .ayc-delay-1 { transition-delay: .08s; }
.ayc-native .ayc-delay-2 { transition-delay: .16s; }
.ayc-native .ayc-delay-3 { transition-delay: .24s; }
.ayc-native .ayc-delay-4 { transition-delay: .32s; }
.ayc-native .ayc-delay-5 { transition-delay: .40s; }

/* Accesibilidad: si el usuario pidió menos movimiento, mostramos sin animar
   (nada queda oculto en opacity:0). */
@media (prefers-reduced-motion: reduce) {
  .ayc-native .ayc-reveal,
  .ayc-native .ayc-reveal-left,
  .ayc-native .ayc-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   POST-WORKFLOW FIXES 2026-06-11 (el orquestador cierra lo pendiente)
   ============================================================ */
/* [PROMESA] reveal LATENTE (ayc-d-reveal/scale-up) en el círculo 2s3d2i03: al
   reactivarse el sistema de animaciones, su transform/position pisaron mi
   posicionamiento absoluto y el círculo se fue al centro-izquierda cubriendo el
   texto. Lo BLINDO: absoluto, estático, sin animación. */
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"],
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"].ayc-d-reveal,
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"].ayc-d-scale-up,
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"].is-revealed,
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"].is-visible {
  position: absolute !important;
  right: -215px !important; left: auto !important; top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  animation: none !important; transition: none !important;
}

/* [SOL.INTEGRALES] Tab 3 "AYC Accountants" estaba BLANCA+borde azul → NAVY (PDF:
   inactivas navy, activa verde). */
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-title:not(.elementor-active) {
  background-color: #1e2751 !important; border-color: #1e2751 !important; color: #ffffff !important;
}
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-title.elementor-active {
  background-color: #9dc41a !important; border-color: #9dc41a !important; color: #ffffff !important;
}

/* [SOL.CLARAS] Tronco de flecha SÓLIDO blanco (el PDF no usa gradiente) */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  background: #ffffff !important;
}

/* [PROMESA fix raíz] ll6itevi tiene ayc-reveal-right/ayc-d-reveal-left → su transform
   lo convierte en containing-block de los absolutos y el círculo se ancla a ÉL (right 776)
   en vez de al card (1135). transform:none → el círculo vuelve a anclarse al card 9ocgr3gm. */
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"],
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].ayc-reveal-right,
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].ayc-d-reveal-left,
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].is-revealed {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important; transition: none !important;
}

/* [PROMESA fix raíz v2] will-change:transform en ll6itevi (de la clase reveal) TAMBIÉN
   crea containing-block aunque transform=none → forzamos will-change:auto. */
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"],
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].ayc-reveal-right,
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].ayc-d-reveal-left,
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].is-visible,
.ayc-native.ayc-native.ayc-native [data-id="ll6itevi"].is-revealed {
  will-change: auto !important;
  filter: none !important;
  perspective: none !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 — "SOLUCIONES INTEGRALES" (sección nchb1fkt)
   Cierra 3 gaps medidos @1440 (verificados con getComputedStyle/Rect):
     1) [blocker content] CTA "Ver todos los servicios" (svc-cta-home) estaba
        display:none → VISIBLE bajo la columna izquierda del tab, enlaza /servicios/.
     2) [major color]   .crmWebToEntityForm = caja blanca (#fff + padding 25px)
        flotando sobre el gris #efefef → TRANSPARENTE, sin caja/sombra/borde.
        SOLO estilo del wrapper; campos/hidden de Zoho intactos (CRM preservado).
     3) [minor content] estilo del CTA coherente: verde de marca #9dc41a, texto
        blanco, Futura, radio 6px (consistente con los demás botones de la página).
   Append-only, gana al ir ÚLTIMA. Clase doblada/triplicada donde post-13.css pisa.
   ============================================================ */

/* [#1 blocker] CTA VISIBLE. El widget svc-cta-home es hijo de la columna izquierda
   1ppisbmk → aparece naturalmente bajo el párrafo + "Contáctanos". Reafirmamos
   display:block (anula cualquier display:none residual) y opacity:1 (la clase
   ayc-d-reveal-right está inerte en esta página, pero blindamos). */
.ayc-native.ayc-native [data-id="svc-cta-home"] {
  display: block !important;
  opacity: 1 !important;
  margin-top: 18px !important;
}
/* El <a> interno ya está estilizado como botón verde; reafirmamos marca + radio 6px. */
.ayc-native.ayc-native [data-id="svc-cta-home"] .elementor-button,
.ayc-native.ayc-native [data-id="svc-cta-home"] a.elementor-button {
  background-color: #9dc41a !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: var(--ayc-font-head) !important;
  padding: 14px 34px !important;
}
.ayc-native.ayc-native [data-id="svc-cta-home"] .elementor-button:hover,
.ayc-native.ayc-native [data-id="svc-cta-home"] a.elementor-button:hover {
  background-color: var(--ayc-green-dark) !important;
}

/* [#2 major] Formulario Zoho SIN caja blanca: transparente sobre el gris #efefef
   (PDF: campos como subrayados sobre el gris, sin tarjeta). El bg blanco + padding
   25px viven en .crmWebToEntityForm (no existe .zcwf_main_form aquí). Reducimos el
   padding lateral a 0 para alinear los campos al borde de la columna. SOLO estilo
   del wrapper — NO se tocan campos/hidden de Zoho (xnQsjsdp, zc_gad, actionType,
   returnURL, First/Last Name, Phone, Email, LEADCF4) → integración CRM intacta. */
.ayc-native .crmWebToEntityForm,
.ayc-native .zcwf_lblLeft.crmWebToEntityForm,
.ayc-native .zcwf_main_form {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 — "SOLUCIONES CLARAS" (sección ixz9ksb1)
   Cierra 4 gaps medidos @1440 (verificados getComputedStyle/Rect):
     1) [major layout] Círculo verde numerado debe STRADDLE el borde superior
        de la card (centro del círculo = top de la card). MEDIDO: card top=2875,
        círculo cy=2901 → +26px DEBAJO. Subimos 26px ⇒ margin-top -38 → -64px
        (círculo top 2837, cy 2875 = card top ⇒ circleCenterVsCardTop≈0).
     2) [major layout] Flecha conectora a la altura del TOP del círculo (no el
        centro). MEDIDO: arrow center y=2908 ≈ círculo centro(2901). Tras subir
        el círculo, su top=2837. La flecha (bloque nw0oe484 top=2837) debe centrar
        en y=2837 ⇒ pseudo top: calc(50% - 38px)=0px (era +33px) ⇒ centro=block top.
     3) [major image] Cabeza de flecha rechoncha ~33w×46h (era 16w×54h):
        border-left 16→32px, border-top/bottom 27→23px.
     4) [major image] Tronco 8→12px con GRADIENTE blanco (faint→bright); anula
        el sólido blanco de la línea ~2208. Aplicado idéntico a ambas flechas.
   Append-only, gana al ir ÚLTIMA. Clase TRIPLICADA donde post-13.css pisa.
   ============================================================ */

/* [#1] CÍRCULO: subir 26px para que su centro caiga sobre el borde superior de
   la card (straddle mitad-mitad). El widget njz7rtfr/epre1cla/yrd3fj94 lleva el
   disco de 76px; -64px sube media altura del disco (38px) + 26px de corrección. */
.ayc-native.ayc-native.ayc-native [data-id="njz7rtfr"],
.ayc-native.ayc-native.ayc-native [data-id="epre1cla"],
.ayc-native.ayc-native.ayc-native [data-id="yrd3fj94"] {
  margin-top: -64px !important;
}

/* [#2] FLECHA a la altura del TOP del círculo: centro de pseudo = top del bloque
   (que ya está alineado con el top del círculo subido). top: calc(50% - 38px)=0. */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  top: calc(50% - 38px) !important;
  height: 12px !important;                                   /* [#4] tronco más grueso */
  background: linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.95) 100%) !important;
  background-image: linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.95) 100%) !important;
  background-color: transparent !important;                 /* anula el sólido blanco previo */
}
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  top: calc(50% - 38px) !important;
  border-top-width: 23px !important;                         /* [#3] cabeza 33w × 46h */
  border-bottom-width: 23px !important;
  border-left-width: 32px !important;
  border-left-color: #ffffff !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (b) — "SOLUCIONES CLARAS" (ixz9ksb1)
   Cierra 4 gaps medidos @1440 (verificados getComputedStyle/Rect).
   Append-only, gana al ir ÚLTIMA. Clase TRIPLICADA + !important.
   ============================================================ */

/* [#1 major layout — FLECHA: tronco y cabeza COLINEALES + eje sobre el TOP del
   círculo, no en su centro]
   MEDIDO antes: ::before center y ::after center YA coincidían (ambos top:0 del
   bloque, que está alineado con el TOP del disco) → estructuralmente colineales.
   Pero el PDF pide el eje ~20-24px SOBRE el CENTRO del disco (disco cy = card-top
   + 38; top del bloque = card-top ⇒ eje a -38px del centro = demasiado alto).
   Bajamos AMBOS pseudos 16px (top: calc(50%-38px) → calc(50%-22px)) ⇒ eje a
   -22px del centro del disco = dentro del rango 20-24px. Tronco y cabeza usan el
   MISMO top ⇒ siguen perfectamente colineales (shaftCenter == headCenter). */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before,
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  top: calc(50% - 22px) !important;
}

/* [#3 minor spacing — TRONCO arranca más cerca del círculo izquierdo]
   MEDIDO: circle1.right=222, shaftStart(left:8px)=336 ⇒ gap=114px (grande).
   Movemos el inicio del tronco a left:-80px ⇒ x≈248 (≈26px tras el círculo);
   el degradado transparente→blanco hace que el arranque visible aún se desvanezca
   suave, pero el bar cubre la mayoría del hueco como el PDF. right sin cambios
   (la cabeza queda igual, justo antes del círculo derecho). */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  left: -80px !important;
}

/* [#2 major image — DISCO VERDE con ANILLO navy] El PDF muestra un aro oscuro
   navy alrededor del disco verde en los 3 círculos. Estaba plano (border 0,
   box-shadow none). Usamos box-shadow:0 0 0 4px #1e2751 (anillo POR FUERA del
   disco ⇒ disco interior se mantiene 76px, total ≈84px de aro visible). No tocamos
   el tamaño ni el verde de marca #9dc41a. Clase TRIPLICADA: gana al box-shadow:none
   previo (línea ~1910). */
.ayc-native.ayc-native.ayc-native [data-id="njz7rtfr"] div[style*="border-radius:50%"],
.ayc-native.ayc-native.ayc-native [data-id="epre1cla"] div[style*="border-radius:50%"],
.ayc-native.ayc-native.ayc-native [data-id="yrd3fj94"] div[style*="border-radius:50%"],
.ayc-native.ayc-native.ayc-native [data-id="njz7rtfr"] div[style*="border-radius: 50%"],
.ayc-native.ayc-native.ayc-native [data-id="epre1cla"] div[style*="border-radius: 50%"],
.ayc-native.ayc-native.ayc-native [data-id="yrd3fj94"] div[style*="border-radius: 50%"] {
  box-shadow: 0 0 0 4px #1e2751 !important;
}

/* [#4 minor type — SUBTÍTULO "Así trabajamos contigo:" 34→36px] PDF ≈36px
   (60/1.667). Subimos 2px; Futura Medium, blanco, ':' verde (en _elementor_data). */
.ayc-native.ayc-native.ayc-native [data-id="oppvfba2"],
.ayc-native.ayc-native.ayc-native [data-id="oppvfba2"] p {
  font-size: var(--fs-h2-lg) !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (c) — FLECHAS "SOLUCIONES CLARAS"
   (ixz9ksb1) — UNA fuente de verdad para el eje de las flechas.
   nw0oe484 / rf75jvl7  (::before = tronco, ::after = cabeza).

   PROBLEMA (auditor): tronco (12px) y cabeza (46px) compartían `top` pero,
   sin un eje común, leían como flecha doblada; y el eje caía ~22px SOBRE el
   centro de los círculos verdes (eje y≈2856 vs círculo cy≈2878).

   FIX (medido, no asumido): ambos pseudos al MISMO eje = `top:50%` +
   `translateY(-50%)`. El bloque (h=76px, alineado con el círculo de 76px)
   centra en su 50% = centro del círculo ⇒ tronco y cabeza COLINEALES y el
   eje cae exactamente sobre el centerline de los círculos (PDF: una sola
   línea horizontal recta que cruza los centros). translateY(-50%) centra
   CADA caja sobre su propia línea `top`, independiente de su altura
   (tronco 12px y cabeza 46px) ⇒ shaftCenter == headCenter == circleCenter.
   Append-only, gana al ir ÚLTIMA. Clase TRIPLICADA + !important. ============================================================ */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before,
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  /* [RONDA 2026-06-12 c] gap arrow-vertical: el PDF muestra el eje de la flecha
     ~39px (live-equiv) POR ENCIMA del centro del círculo, rozando su borde superior.
     calc(50% - 39px) sobre el bloque de 76px ⇒ eje ≈ borde superior del círculo. */
  top: calc(50% - 39px) !important;
  transform: translateY(-50%) !important;
}

/* ============================================================
   [SOLCLARAS-ARROW-FINAL 2026-06-12] FUENTE ÚNICA de las flechas conectoras.
   Consolida las 6 reglas en conflicto: tronco SÓLIDO blanco (no gradiente) +
   cabeza triangular, AMBOS colineales en el centro del círculo (top:50% del
   contenedor = altura del círculo). Estilo del PDF. Va ÚLTIMA → gana.
   ============================================================ */
/* [SOLCLARAS-BLOCK-WIDTH 2026-06-12] gap #1: el bloque de 3 cards NO es full-bleed.
   PDF: 61.3% del ancho de la banda, CENTRADO. Banda usable ≈1425px ⇒ ~873px.
   Usamos max-width:896px + margin-inline:auto. Cards (flex:1) caen a ~253px y los
   contenedores de flecha (68px fijos) dan ratio gap/card = 68/253 ≈ 0.269 (= PDF 112/417).
   Triplicado + !important para ganar al max-width:none / full-bleed previo. */
.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] [data-id="myg8of7f"] > .e-con-inner,
.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] [data-id="myg8of7f"] {
  /* [2026-06-12 d — cliente: cards "menos altas y más anchas"] Con la letra a 20px,
     el bloque al 61% del PDF dejaba las cards altas/angostas (244×470, aspecto 0.52).
     Ensanchamos el bloque a 1240px → cards ~347px → el texto cae en menos líneas →
     cards más bajas y anchas (aspecto ~0.9-1.0). (Deviación intencional del ancho del
     PDF para acomodar la tipografía más grande pedida por el cliente.) */
  max-width: 1240px !important;
  margin-inline: auto !important;
}
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"],
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"] {
  position: relative !important; overflow: visible !important;
  /* gap #2/ratio: contenedores de flecha = ancho FIJO 68px (no grow). Las cards crecen.
     cardW≈265 / gap 68 → ratio ≈0.256 ≈ PDF 112/417 (0.266). Neutraliza flex previos. */
  flex: 0 0 68px !important; width: 68px !important; min-width: 0 !important; max-width: 68px !important;
}
/* gap A: las 3 cards CRECEN para repartir el ancho restante → ~360px c/u */
.ayc-native.ayc-native.ayc-native [data-id="bbslyhfe"],
.ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"],
.ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"] {
  flex: 1 1 0 !important; min-width: 0 !important;
}
/* gap B: tronco = GRADIENTE transparente→blanco (fade), no sólido.
   gap D (re-tune): con contenedor de 132px el tronco sale ~26px a cada lado
   para arrancar justo a la derecha del círculo izq. y morir justo antes del der. */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  content: "" !important; position: absolute !important;
  /* gap #1 re-tune: con contenedor flecha de 68px y bloque estrecho (896),
     tronco arranca justo a la derecha del círculo izq. (offset -78 ⇒ edge 4px
     pasado el círculo) y muere en la base de la cabeza (right -56 ⇒ edge 649). */
  left: -78px !important; right: -56px !important; width: auto !important;
  /* [RONDA 2026-06-12 c] eje ~39px sobre el centro del círculo (roza el borde superior). */
  top: calc(50% - 39px) !important; transform: translateY(-50%) !important;
  height: 7px !important;
  background-color: transparent !important;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 35%, #ffffff 100%) !important;
  border-radius: 3px !important; display: block !important; visibility: visible !important;
}
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  content: "" !important; position: absolute !important;
  /* gap #1 re-tune: cabeza (tip) muere justo antes del círculo der.
     right -75 ⇒ tip en container.right(593)+75 = 668, ~7px antes del círculo (675). */
  left: auto !important; right: -75px !important;
  /* [RONDA 2026-06-12 c] cabeza colineal con el tronco, ~39px sobre el centro. */
  top: calc(50% - 39px) !important; transform: translateY(-50%) !important;
  width: 0 !important; height: 0 !important;
  border-top: 17px solid transparent !important;
  border-bottom: 17px solid transparent !important;
  border-left: 19px solid #ffffff !important;
  display: block !important; visibility: visible !important;
}

/* ============================================================
   [SOLCLARAS-RHYTHM+HOVER 2026-06-12] gap C (ritmo vertical) + gap E (hover).
   ============================================================ */
/* gap C: más aire entre "Así trabajamos contigo:" (oppvfba2) y la fila de
   cards/flechas (myg8of7f). El margin-top:40px previo (línea ~1197, spec 0,3,0)
   se sube a 56px aquí (0,4,0 triplicado, gana). Bloque más balanceado. */
.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] [data-id="myg8of7f"] {
  margin-top: 48px !important;
}
/* gap #3: separación título H2 → subtítulo "Así trabajamos contigo:" (oppvfba2).
   Live medía 20px (pegados); PDF ≈46px. Subimos margin-top del subtítulo a 28px
   (20px efectivos previos eran ~todo margin; +28 ⇒ ≈46px medidos). Triplicado, gana. */
.ayc-native.ayc-native.ayc-native [data-id="oppvfba2"] {
  margin-top: 28px !important;
}
/* gap E: hover discreto y suave SOLO en las 3 cards. Flechas/círculos intactos. */
.ayc-native.ayc-native.ayc-native [data-id="bbslyhfe"],
.ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"],
.ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"] {
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.ayc-native.ayc-native.ayc-native [data-id="bbslyhfe"]:hover,
.ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"]:hover,
.ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.15) !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (v2) — "SOLUCIONES INTEGRALES" (nchb1fkt)
   Referencia /tmp/pdf_sol_integrales.png: el PDF NO muestra ningún CTA verde
   "Ver todos los servicios" en esta sección — las columnas/formulario fluyen
   directamente hacia la banda del equipo (ayceqfoto). Cierra los gaps medidos:
     1) [blocker spacing] CTA pegado a la banda (bottom 1681 = band top 1681 → 0px).
     2) [major layout]    wrapper del CTA a ancho completo (1385px) leído como barra.
        → Solución 1:1 con el diseño: OCULTAR el CTA (display:none). Restaura la
          parida exacta con el PDF y elimina el choque con la foto de un plumazo.
          (El widget svc-cta-home permanece en _elementor_data y es editable; solo
          se oculta por CSS — no se rompe el CRM ni el resto.)
     3) [minor type]      subtítulo 'Conoce las líneas...' a 640px → 3 líneas.
        → Ensanchar a max-width 820px (anula el inline 640px con !important) → ~2
          líneas naturales, sin <br>. Mantiene center + gris-teal #839794 + 20px.
   Append-only → gana por orden de fuente. Triplicada donde post-13.css pisa.
   ============================================================ */

/* [#1 blocker + #2 major] CTA fuera (el PDF no lo muestra). Anula el display:block
   de la ronda anterior. */
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] {
  display: none !important;
}

/* [#3] Subtítulo a 2 líneas naturales y fluidas → más ancho. A 24px, 820px caía
   en 3 líneas; ~1040px lo deja en 2 líneas centradas. (Inline trae 640px → !important.) */
.ayc-native.ayc-native.ayc-native [data-id="6r9y102e"] p {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (v3) — "SOLUCIONES INTEGRALES" (nchb1fkt)
   Referencia /tmp/pdf_sol_integrales.png. Cierra 3 gaps medidos @1440
   (verificados getComputedStyle/getBoundingClientRect):
     1) [type major]  Captions del form Zoho UNIFORMES. MEDIDO: el div visible
        .zcwf_col_lab leía 12px / rgb(0,0,0) en "Nombre completo" y "Correo",
        pero el <label> suelto de "Teléfono" leía 13px / navy → 3 estilos.
        Unificamos TODOS (el div .zcwf_col_lab + cualquier label/span dentro)
        a 13px, navy rgb(30,39,81), peso 500, Futura. Una sola fuente de verdad.
     2) [type minor]  Inputs 16px → 14px para armonizar con captions de 13px
        (mantiene el estilo underline sin caja; NO toca name/hidden de Zoho).
     3) [layout minor] Tabs edge-to-edge (1385px) → grupo CONTENIDO + CENTRADO.
        MEDIDO en el PDF: pills de x≈174 a x≈1265 (1440-space) = ancho ≈1091px,
        márgenes 174/175px (simétrico ⇒ centrado). Constreñimos la
        .elementor-tabs-wrapper a max-width:1091px + margin-inline:auto.
        Cada pill (flex:1) cae a ≈350px con gaps de 20px (como el PDF), radio 6px.
   Append-only → gana por orden de fuente. Triplicada donde post-13.css pisa.
   ============================================================ */

/* [#1] Captions uniformes: 13px navy 500, Futura. Triplicada + !important para
   ganar al .zcwf_col_lab label (13px) previo y a los inline 12px/negro de Zoho.
   Cubre el div contenedor Y cualquier label/span de texto dentro (sin el checkbox,
   ya excluido por su propia regla flex; aquí solo color/tamaño de texto). */
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab,
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab label,
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab span {
  font-family: var(--ayc-font-body) !important;
  font-size: var(--fs-body) !important;     /* de-orfanizado 13px → token escala */
  font-weight: 500 !important;
  color: rgb(30, 39, 81) !important;        /* navy de marca */
}

/* [#2] Inputs del form = TOKEN --fs-body (21), conservando underline (de-orfanizado 14px). */
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld input[type="text"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld input[type="tel"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld input[type="email"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld input {
  font-size: var(--fs-body) !important;
}

/* [#3] Tabs como grupo CONTENIDO y CENTRADO (no full-bleed). max-width 1091px
   (= ancho medido en el PDF) + margin-inline:auto. justify-content:center y los
   pills crecen (flex:1) a ≈350px con gap 20px. Triplicada para ganar a la regla
   ~421 (justify-content:flex-start, width:100%). */
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
  max-width: 1091px !important;
  width: 100% !important;
  margin-inline: auto !important;
  justify-content: center !important;
  gap: 20px !important;
}
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-title {
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (v4) — "SOLUCIONES INTEGRALES" (nchb1fkt)
   Cierra los 4 gaps medidos @1440 (verificados getComputedStyle/Rect).
   El brief manda RENDERIZAR el CTA "Ver todos los servicios" como pill verde
   CONTENIDO + CENTRADO, con aire balanceado bajo el tab/form y ANTES de la banda
   del equipo (ayceqfoto), sin tocarla. Anula el display:none de v2 (línea 2531).
     1) [major layout]  CTA visible: wrapper inline-block (NO full-width), pill
        contenido centrado. svc-cta-home es hijo directo de 1ppisbmk (align-items
        center) → cae centrado bajo los tabs y sobre la banda.
     2) [major spacing] Sección nchb1fkt padding-bottom 0 → 48px → aire par
        arriba (del CTA al form) y abajo (del CTA a la banda); el CTA nunca solapa.
     3) [minor type]    Captions del form a gris-teal de marca #839794 (muted),
        coherentes con subtítulo/párrafos (PDF: captions grises, no navy).
     4) [minor spacing] Botón ENVIAR: padding 10px 26px (caja algo mayor, ~h38),
        conservando outline navy + alineación izquierda + fondo transparente.
   Append-only → gana por orden de fuente. Triplicada donde post-13.css pisa.
   ============================================================ */

/* [#1 major] CTA VISIBLE como pill verde CONTENIDO y CENTRADO. Anula display:none
   de v2. El widget (wrapper) se centra; el wrapper interno y el <a> a width:auto
   (inline-block) → ancho de contenido, NO barra full-width. Aire: 40px arriba. */
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] {
  display: block !important;
  opacity: 1 !important;
  width: 100% !important;
  text-align: center !important;
  margin: 40px 0 0 0 !important;
}
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] > .elementor-widget-container,
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] .elementor-button-wrapper {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] a.elementor-button {
  display: inline-flex !important;       /* contenido → pill, no full-width */
  width: auto !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #9dc41a !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-family: var(--ayc-font-head) !important;
  font-weight: 700 !important;
  font-size: var(--fs-button) !important;   /* TOKEN botón (26) — gobierna por token, no por el literal de _elementor_data */
  padding: 14px 34px !important;
}
.ayc-native.ayc-native.ayc-native [data-id="svc-cta-home"] a.elementor-button:hover {
  background-color: var(--ayc-green-dark) !important;
}

/* [#2 major spacing] Sección con aire inferior balanceado (~48px) → el CTA queda
   centrado con aire par arriba (form) y abajo (banda) y nunca solapa ayceqfoto.
   Anula el padding-bottom:0 previo (líneas 1699/1805 piso). Triplicada + !important. */
.ayc-native.ayc-native.ayc-native[data-id="nchb1fkt"] {
  padding-bottom: 48px !important;
}

/* [#3 minor type] Captions del form Zoho en gris-teal de marca #839794 (muted),
   coherentes con subtítulo/párrafos (PDF: captions grises, no navy). Anula el navy
   rgb(30,39,81) de v3 (línea ~2566). NO toca name/hidden de Zoho (CRM intacto). */
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab,
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab label,
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab span {
  color: #839794 !important;
}

/* [#4 minor spacing] Botón ENVIAR (submit) con caja algo mayor: padding 10px 26px
   (era 8px 22px → ~h38px). Conserva outline navy, alineación izquierda y fondo
   transparente. NO toca el name/value del submit de Zoho. */
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_button {
  padding: 10px 26px !important;
}

/* ============================================================
   [TYPE-SCALE 2026-06-12] Escala tipográfica CONSOLIDADA y legible.
   PISO de cuerpo = 20px. Escala lógica y con MENOS tamaños:
     20 body · 24 lead/subtítulo · 28 card-title · 36 band-title · 46 h2 · 62 hero.
   Sube los cuerpos chicos (13/15/16/17) al piso. Fine-print = 14-16.
   Va ÚLTIMA → gana a overrides previos. (NO toca divs genéricos: los
   números de los círculos verdes son divs dentro de text-editor.)
   ============================================================ */

/* (1) CUERPO = 20 (piso): párrafos, listas, tabs, excerpts, quote testimonios */
.ayc-native.ayc-native p,
.ayc-native.ayc-native li,
.ayc-native.ayc-native .elementor-icon-list-text,
.ayc-native.ayc-native .elementor-tab-content,
.ayc-native.ayc-native .elementor-tab-content p,
.ayc-native.ayc-native .elementor-widget-text-editor p,
.ayc-native.ayc-native .elementor-post__excerpt,
.ayc-native.ayc-native .elementor-post__excerpt p,
.ayc-native.ayc-native .ayc-tst-quote,
.ayc-native.ayc-native .ayc-tst-quote p { font-size: var(--fs-quote) !important; line-height: 1.6 !important; }

/* (2) Descripciones de las 3 cards del proceso (eran 15px → 20, consistentes) */
.ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"],
.ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"] p,
.ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"],
.ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"] p,
.ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"],
.ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"] p { font-size: var(--fs-quote) !important; line-height: 1.55 !important; }

/* (3) LEAD / párrafos descriptivos de sección = CUERPO 21 (cliente jun-2026: estos
   párrafos ("Conoce las líneas de servicio…", "Es estar siempre contigo…", etc.) son
   cuerpo, NO subtítulos; venían a 26 (--fs-step) y se ven grandes → var(--fs-body)). */
.ayc-native.ayc-native.ayc-native [data-id="6r9y102e"] p,
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"] p,
.ayc-native.ayc-native.ayc-native [data-id="pxr2o2bu"] p,
.ayc-native.ayc-native.ayc-native [data-id="a6b6eym1"] p,
.ayc-native.ayc-native.ayc-native [data-id="6r9y102e"],
.ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"],
.ayc-native.ayc-native.ayc-native [data-id="pxr2o2bu"],
.ayc-native.ayc-native.ayc-native [data-id="a6b6eym1"] { font-size: var(--fs-body) !important; line-height: 1.5 !important; }

/* (4) Artículos: descripción 20, botón "Ir al Blog" 18 (consistente, legible) */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__excerpt,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__excerpt p { font-size: var(--fs-quote) !important; }
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more { font-size: var(--fs-nav) !important; }

/* (5) Testimonios: nombre 26, rol 20, quote 20 (menos tamaños) */
.ayc-native.ayc-native .ayc-tst-name,
.ayc-native.ayc-native .ayc-tst-name .elementor-heading-title { font-size: var(--fs-h2) !important; }
.ayc-native.ayc-native .ayc-tst-role,
.ayc-native.ayc-native .ayc-tst-role p { font-size: var(--fs-quote) !important; }

/* (6) FINE-PRINT: disclaimer legal hero 14 (muy fino sobre foto). Labels/inputs del
   form de Contacto = TOKEN --fs-body (21): el cliente pide texto generoso y el PDF los
   muestra a tamaño cercano al cuerpo; de-orfanizados los literales 16px/18px → escala. */
.ayc-native.ayc-native.ayc-native [data-id="l9417o9n"] .elementor-widget-text-editor p { font-size: var(--fs-legal) !important; }
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab label,
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_lab span { font-size: var(--fs-body) !important; }
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld input { font-size: var(--fs-body) !important; }

/* ============================================================
   [TYPE-SCALE v2 2026-06-12] Cierra los últimos chicos e inconsistentes.
   ============================================================ */
/* Artículos: TÍTULOS de card 15→24, botón "Ir al Blog" 12→18 (legibles) */
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__title,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__title a,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__title,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__title a { font-size: var(--fs-step) !important; line-height: 1.25 !important; }
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__read-more,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more { font-size: var(--fs-nav) !important; }

/* Form: labels de campo + label del checkbox de términos → TOKEN --fs-body (21),
   prominentes/legibles como pide el cliente y el PDF (eran 16px literal). Single source. */
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] form label,
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .zcwf_col_lab,
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .zcwf_col_lab label,
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .ayc-terms-row label { font-size: var(--fs-body) !important; }

/* TÍTULOS DE SECCIÓN = TOKEN --fs-section (34px, NIVEL 3 de la escala consolidada
   jun-2026, ayc-base.css). Antes 48px LITERAL per-data-id (ronda vieja) → ganaba al
   token global y dejaba los títulos de sección del Home fuera de la escala (debían
   ser 34 como en las 3 páginas de servicio). De-orfanizado al token: single source.
   Hero (h1, --fs-page-hero 56) queda aparte. */
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="patiapip"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="ri79pxmq"] .elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="42to31zq"] .elementor-heading-title { font-size: var(--fs-section) !important; line-height: 1.18 !important; }
/* dcms2iot (CTA de Home) SACADO del grupo de títulos de sección: usa --fs-cta-title (44), no --fs-section (34). */

/* Unificación final de títulos de sección al TOKEN (h2 selector, gana a reglas 0,4,2) */
.ayc-native.ayc-native.ayc-native [data-id="dny0xfaj"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="patiapip"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="ri79pxmq"] h2.elementor-heading-title,
.ayc-native.ayc-native.ayc-native [data-id="42to31zq"] h2.elementor-heading-title { font-size: var(--fs-section) !important; }

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (d) — "SOLUCIONES CLARAS" (ixz9ksb1)
   3 cards del proceso: CONTENIDO VERTICALMENTE BALANCEADO + aire interno.
   Ref /tmp/pdf_sol_claras.png. NO se reduce ninguna letra (escala intacta):
   se CRECE el contenedor (alto de fila +28px) y se reparte el aire muerto.

   Mecánica (sin tocar el círculo verde ni el eje de las flechas):
   - El círculo (disc 76px) tiene su centro EXACTO en el borde superior de la
     card (discCenterRelCardTop=0). Se mantiene: los auto-margins NO lo mueven
     (medido discMoved=0 en las 3 cards).
   - Aire muerto previo TODO abajo: card1=0 / card2=93 / card3=31px.
   - Auto-margins (title margin-top:auto + desc margin-bottom:auto) reparten el
     aire libre arriba/abajo del bloque título+texto → bloque CENTRADO.
   - Breath FIJO círculo→título = 20px (margin-bottom del widget círculo) [gap3].
   - Breath FIJO título→descripción = 8px → gap medido 18px (PDF≈18px) [gap2].
   La card MÁS llena (card1) define el alto de fila (355→383px): las otras
   estiran y centran su contenido. 0 overflow @1440.
   ============================================================ */
/* Círculo verde numerado: breath fijo bajo el disc hacia el título (gap #3).
   widgets text-editor que contienen el disc: njz7rtfr / epre1cla / yrd3fj94. */
.ayc-native.ayc-native.ayc-native [data-id="njz7rtfr"],
.ayc-native.ayc-native.ayc-native [data-id="epre1cla"],
.ayc-native.ayc-native.ayc-native [data-id="yrd3fj94"] {
  flex: 0 0 auto !important;
  margin-bottom: 20px !important;   /* círculo→título: aire cómodo, no pegado */
}
/* Títulos de paso (ojot1sgd/qc6hehwt/njio8v9u): margin-top:auto = mitad superior
   del aire libre → el bloque título+texto queda CENTRADO en la card (gap #1). */
.ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"],
.ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"],
.ayc-native.ayc-native.ayc-native [data-id="njio8v9u"] {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
/* Descripciones (5jn6nn5b/vumj2cdv/ptfe26dd): breath fijo título→texto = 8px
   (gap #2, sube de 10px a ~18px) + margin-bottom:auto = mitad inferior del aire. */
.ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"],
.ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"],
.ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"] {
  margin-top: 8px !important;
  margin-bottom: auto !important;
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (e) — "SOLUCIONES CLARAS" (ixz9ksb1)
   3 cards del proceso: card1 (6 líneas) ya NO apretada + títulos alineados.
   Ref /tmp/pdf_sol_claras.png. NO se reduce NINGUNA letra (escala 20/24/28
   intacta): se CRECE el contenedor (min-height + padding) para dar aire abajo.

   DIAGNÓSTICO MEDIDO @1440 (antes):
   - Las 3 cards 383px (flex-stretch ✓). flexDir column, justify normal.
   - card1 desc→fondo = 32px (SOLO padding, 0 aire libre) → APRETADA.
   - card2 desc→fondo = 79px, card3 = 48px (aire desigual / desbalanceado).
   - Títulos NO alineados: top Y 3128 / 3174 / 3143 (circulo→título 20/67/36).
     El auto-margin de la ronda (d) (title margin-top:auto + desc
     margin-bottom:auto) SÓLO actúa donde hay aire libre → CENTRA card2/card3
     pero NO card1 (llena) ⇒ DESALINEA los títulos. El PDF muestra los 3
     títulos en UNA línea base bajo el círculo (modelo TOP-anchored, gap fijo
     círculo→título), con la descripción fluyendo hacia abajo distinta longitud.

   FIX (1:1 con el PDF, todo creciendo contenedor, 0 letra tocada):
   1) min-height 430px en las 3 cards: card1 (la más llena, ~405px natural con
      el padding nuevo) gana ~44-50px de aire bajo la última línea. gap #1.
   2) padding-top 36 / padding-bottom 44 (eran 26/32): el título despeja el
      círculo con aire parejo (gap #4) y la 6ª línea nunca toca la esquina.
   3) Se ANULA el auto-margin de la ronda (d): título margin-top:0 (no auto) y
      desc margin-bottom:0 (no auto) ⇒ TOP-anchored con gap fijo círculo→título
      (20px, del margin-bottom del círculo) ⇒ los 3 títulos arrancan en la MISMA
      base (gap #3). El aire muerto restante queda abajo en cada card, como el
      PDF (card más corta = más aire abajo, no centrado que desalinearía).
   Append-only → gana por orden. Triplicada donde post-13.css pisa. 0 overflow.
   ============================================================ */
/* [#1 + #4] CRECER la card: min-height generoso + padding parejo. */
.ayc-native.ayc-native.ayc-native [data-id="bbslyhfe"],
.ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"],
.ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"] {
  /* 408px ≈ alto natural de card1 (la más llena, 6 líneas) con el padding nuevo:
     card1 gana ~47px de aire abajo (≥40-50 objetivo) sin inflar el vacío de
     card2 (3 líneas) más de lo que el PDF muestra. Top-anchored ⇒ títulos
     alineados (la card corta tiene más aire abajo, fiel al diseño). */
  min-height: 408px !important;
  padding-top: 36px !important;
  padding-bottom: 44px !important;
}
/* [#3] TOP-anchored: anula el auto-margin de la ronda (d) en título y desc para
   que los 3 títulos compartan UNA misma base (gap fijo círculo→título = 20px). */
.ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"],
.ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"],
.ayc-native.ayc-native.ayc-native [data-id="njio8v9u"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"],
.ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"],
.ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"] {
  margin-top: 8px !important;
  margin-bottom: 0 !important;   /* no auto → top-anchored, títulos alineados */
}

/* ============================================================
   RONDA GAPS MEDIDOS — 2026-06-12 (e) — "ARTÍCULOS Y RECURSOS" (vw9xt2jg)
   4 cards de blog, widget mtraui2s. Ref /tmp/pdf_articulos.png.
   3 gaps auditor (spacing). MANDATO: se CRECE el contenedor (padding interno
   y gap fijo), NUNCA se reduce la letra (escala intacta: title 24 / botón 18).

   CAUSA medida: la grid (align-items:stretch) estira las 4 cards al alto del
   título más largo (3 líneas → 396px). El bloque .elementor-post__text era
   flex:1 1 auto con el read-more anclado al fondo (margin-top:auto) → en la
   card de 3 líneas el botón quedaba PEGADO al título (gap=0) y en la de 2
   líneas FLOTABA (gap=30). Además el padding interno era 16/16 (apretado).

   FIX (todo CRECIENDO contenedor):
   - Gap título→botón FIJO = 18px en TODAS las cards (margin-top:18px en el
     read-more; se anula el margin-top:auto + align-self previos). [gap #1 y #2]
   - Contenido TOP-anchored (justify-content:flex-start): la card de 2 líneas
     deja su aire libre abajo (fiel al PDF), pero el gap título→botón es el
     MISMO en las 4 (18px). [gap #2]
   - Padding interno del bloque de texto: top 27px / bottom 25px (era 16/16) →
     más aire generoso; la card crece para acomodarlo. [gap #3]
   Clase TRIPLICADA + !important para batir post-13.css (0,3,0) y reglas previas.
   ============================================================ */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__text,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__text {
  justify-content: flex-start !important;   /* grupo imagen/título arriba; el botón se ancla con margin-top:auto */
  padding-top: 27px !important;             /* era 16 → más aire arriba (PDF≈27px) */
  padding-bottom: 25px !important;          /* era 16 → BANDA del botón = 25px sobre el fondo de la card (PDF) */
  /* min-height GENEROSO: con el título de 3 líneas (90px) el bloque medía 179.6
     y el botón quedaba PEGADO al título (gap 0). Subimos a 198 → queda ~18px de
     aire título→botón incluso en la card de 3 líneas (la card CRECE, no se
     encoge la letra). El botón sigue anclado abajo (margin-top:auto) → baseline
     compartida intacta. */
  min-height: 198px !important;
}
/* ------------------------------------------------------------------
   FIX baseline compartida (2026-06-12 f) — auditor: los 4 botones "Ir al
   Blog" deben compartir UNA misma línea base a ~25px del fondo de la card,
   sin importar si el título es de 2 o 3 líneas. La ronda (e) usaba
   margin-top:18px (gap FIJO título→botón) con contenido top-anchored → en la
   card de 2 líneas (card 2) el botón FLOTABA 30px más alto (55px del fondo vs
   25px de las de 3 líneas), rompiendo la simetría de la fila.
   FIX: margin-top:auto → el botón se ANCLA al fondo del bloque de texto; el
   padding-bottom:25px del bloque deja la banda de 25px en LAS 4 cards. Esto
   CRECE el aire título→botón en la card corta (los ~30px que faltaban) sin
   tocar ningún font-size (escala intacta: title 24 / botón 18) ni el alto
   igual de 434px. ------------------------------------------------------------------ */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more,
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] a.elementor-post__read-more,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] .elementor-post__read-more,
.ayc-native.ayc-native.ayc-native [data-id="mtraui2s"] a.elementor-post__read-more {
  margin-top: auto !important;   /* ancla el botón al fondo → baseline compartida en las 4 */
  margin-bottom: 0 !important;
  align-self: center !important; /* mantiene el botón centrado (diseño) */
}

/* ============================================================
   RONDA AVATAR FINAL — TESTIMONIOS (2026-06-12) — bloque ÚNICO autoritativo.
   Cierra 4 gaps del auditor SIN reducir letra (escala intacta: quote 20 /
   name 24 / role 20). Sustituye a v1/v2/v3 (retirados arriba). Estrategia:
   - Avatar = wrapper position:absolute anclado al TOP de la card, con TODA la
     cadena del widget-imagen (container/figure/image/img) dimensionada al
     diámetro (el wrapper de Elementor colapsaba a 0x0 si no se sizean los
     hijos → por eso el img caía 38px DENTRO de la card). top negativo = mitad
     del aro POR ENCIMA del borde superior (~51% como el PDF).
   - Diámetro CRECE 72→84px (más fiel al PDF).
   - La card RESERVA padding-top generoso (62px) → la mitad inferior del aro
     (42px) entra con colchón y deja AIRE claro avatar→quote (~20px). CRECER el
     contenedor, nunca achicar la letra.
   - GAP de la fila 20→30px (proporción del PDF cardW:gap ≈10.6:1).
   ============================================================ */

/* GAP fila 20→30px (proporción del diseño). Se fija en la fila Y en su
   .e-con-inner (boxed container flexiona en el inner). */
.ayc-native [data-id="581ginu8"].ayc-tst-row,
.ayc-native .ayc-tst-row { gap: 30px !important; }
.ayc-native .ayc-tst-row > .e-con-inner { gap: 30px !important; }

/* La card reserva colchón arriba para el aro solapado + aire al quote.
   CRECE el contenedor (padding-top 62px); el resto del padding intacto. */
.ayc-native .ayc-tst-card,
.ayc-native [data-id="tstcard1"],
.ayc-native [data-id="tstcard2"],
.ayc-native [data-id="tstcard3"] {
  padding: 62px 28px 32px !important;   /* top GENEROSO (aro + aire); laterales algo más */
  margin-top: 48px !important;          /* sitio físico para la mitad del aro que sale arriba */
  overflow: visible !important;
}

/* AVATAR: wrapper absoluto anclado al top de la card; toda la cadena del
   widget-imagen dimensionada al diámetro para que NO colapse.
   CLAVE: el bridge global `.ayc-native .elementor-widget-image{display:contents}`
   (ayc-native-bridge.css) anulaba la caja del wrapper → position/top/width se
   ignoraban y el img caía en flujo normal DENTRO de la card. Forzamos
   display:block en wrapper Y container para reactivar la caja absoluta. */
.ayc-native .ayc-tst-card .ayc-tst-ava,
.ayc-native .ayc-tst-card .ayc-tst-ava.is-revealed,
.ayc-native .ayc-tst-card .ayc-tst-ava.ayc-d-scale-up,
.ayc-native .ayc-tst-card .ayc-tst-ava.ayc-d-scale-up.is-revealed {
  display: block !important;                       /* anula el display:contents del bridge */
  position: absolute !important; top: -42px !important; left: 50% !important;
  width: 84px !important; height: 84px !important;
  margin: 0 !important; transform: translateX(-50%) !important;
  opacity: 1 !important; z-index: 3 !important; pointer-events: none;
}
.ayc-native .ayc-tst-card .ayc-tst-ava > .elementor-widget-container,
.ayc-native .ayc-tst-card .ayc-tst-ava .elementor-image,
.ayc-native .ayc-tst-card .ayc-tst-ava figure {
  display: block !important;                       /* anula el display:contents del bridge */
  width: 84px !important; height: 84px !important; margin: 0 !important;
}
.ayc-native .ayc-tst-card .ayc-tst-ava img {
  width: 84px !important; height: 84px !important; border-radius: 50% !important;
  object-fit: cover !important; display: block !important;
  border: 3px solid #9dc41a !important;            /* aro verde de marca, CRECE */
  background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

/* AIRE explícito avatar→quote: el padding-top ya reserva el colchón; añadimos
   un pequeño margin-top al quote para garantizar ~20px de respiro nítido. */
.ayc-native .ayc-tst-card .ayc-tst-quote {
  margin-top: 8px !important;
}

/* ============================================================
   [BATCH A+C 2026-06-12] Botones grandes + tabs full-width + ENVIAR +
   círculo Promesa + subtítulo CTA + testimonios + baseline Artículos.
   ============================================================ */
/* BOTONES más grandes (caja + letra), global (cliente: "siguen muy pequeños") */
.ayc-native.ayc-native .elementor-button { font-size: var(--fs-button) !important; padding: 15px 40px !important; }
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more { font-size: var(--fs-19) !important; padding: 11px 30px !important; }
/* ENVIAR: legible + SEPARADO del checkbox */
.ayc-native.ayc-native.ayc-native form input[type="submit"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"] { font-size: var(--fs-footer-sm) !important; padding: 14px 46px !important; margin-top: 22px !important; width: auto !important; }

/* TABS: ancho COMPLETO del contenido (del inicio del texto al fin del form) */
.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper { max-width: none !important; width: 100% !important; }

/* CTA subtítulo: lead 24 (era body, se veía como texto normal) */
.ayc-native.ayc-native.ayc-native [data-id="8x0l93wp"] .elementor-widget-text-editor p { font-size: var(--fs-step) !important; line-height: 1.5 !important; }

/* NUESTRA PROMESA: círculo un poco más grande (430 → 465). Mantiene anclaje al card
   (will-change:auto ya forzado) y no genera overflow (right edge ≈1350 < 1425). */
.ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] { width: 465px !important; max-width: 465px !important; height: 465px !important; min-height: 465px !important; }

/* TESTIMONIOS: agrupar contenido arriba (elimina el void del card del medio) */
.ayc-native.ayc-native .ayc-tst-card { justify-content: flex-start !important; }
.ayc-native.ayc-native .ayc-tst-role,
.ayc-native.ayc-native .ayc-tst-card .ayc-tst-role { margin-top: 2px !important; }

/* ARTÍCULOS: botón "Ir al Blog" anclado al fondo → misma línea base en las 4 cards */
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__text { display: flex !important; flex-direction: column !important; height: 100% !important; }
.ayc-native.ayc-native.ayc-native [data-id="vw9xt2jg"] .elementor-post__read-more { margin-top: auto !important; }

/* ============================================================
   [BATCH B 2026-06-12] Sol.claras: cards ANCHAS + BAJAS (aspecto del PDF ~1.0).
   Eran 265×408 (aspecto 0.65, muy altas). Libero el row a ancho completo y
   ensancho los gaps → cards ~395px → el texto 20px cae en menos líneas → bajan.
   Contenido TOP-anchored (el círculo debe quedar arriba como el PDF).
   ============================================================ */
.ayc-native.ayc-native.ayc-native [data-id="myg8of7f"] > .e-con-inner,
.ayc-native.ayc-native.ayc-native [data-id="myg8of7f"] { max-width: 1385px !important; width: 100% !important; }
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"],
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"] { flex: 0 0 100px !important; width: 100px !important; min-width: 100px !important; }
.ayc-native.ayc-native.ayc-native [data-id="bbslyhfe"],
.ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"],
.ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"] {
  flex: 1 1 0 !important; min-height: 0 !important;
  padding-top: 38px !important; padding-bottom: 40px !important; padding-left: 30px !important; padding-right: 30px !important;
}

/* [BATCH B-fix] El row del proceso estaba fijado a 972px por una regla (0,5,0).
   Lo liberamos a ancho completo con mayor specificity (0,6,0) → cards ~395 (anchas+bajas). */
.ayc-native.ayc-native.ayc-native [data-id="ixz9ksb1"] [data-id="myg8of7f"].e-con,
.ayc-native.ayc-native.ayc-native [data-id="ixz9ksb1"] [data-id="myg8of7f"].e-con > .e-con-inner {
  max-width: 1385px !important; width: 100% !important;
}

/* ============================================================
   [SOLCLARAS-ARROW v3 2026-06-12] Flechas re-ajustadas a la geometría NUEVA
   (cards anchas 333px): tronco GRUESO con GRADIENTE transparente→blanco (como el PDF,
   "más imponentes"), cabeza GRANDE y esbelta, colineales al centro del círculo.
   Container nw0oe484 = x446-546 (100px); circle1.right=317, circle2.left=675;
   centro del círculo a 50px del top del container. Última → gana a todo lo previo.
   ============================================================ */
/* ============================================================
   [SOLCLARAS-ARROW v4 2026-06-14] FIX flechas "mal ubicadas / mal estilo".
   Causa raíz: el eje estaba a 50px = CENTRO del círculo = 12px DEBAJO del top
   de la card → los extremos del tronco y TODA la cabeza caían tras la card
   blanca (ocultos). Se veía sólo un trozo gris + una cabeza rota.
   FIX: eje a 28px (≈10px POR ENCIMA del top de la card) → flecha 100% sobre el
   azul, nunca tapada. Estilo PDF: tronco FINO con gradiente transparente→blanco
   + cabeza CHEVRON ">" (dos trazos), no triángulo macizo. Animación de
   "dibujado" izq→der al entrar en viewport (hook .ayc-arrowfx en animations.js).
   Geometría: container 453-553; círculo1.right=325, círculo2.left=681.
   ============================================================ */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"],
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"] { position: relative !important; overflow: visible !important; z-index: 6 !important; }
/* TRONCO + gradiente (transparente→blanco), POR ENCIMA del top de las cards.
   v6 2026-06-14: eje subido 13px→4px (más arriba, sobre el azul, despegado de
   los badges/cards), grosor 11px→9px (más fino y elegante). */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::before {
  content: "" !important; position: absolute !important;
  left: -120px !important; right: -104px !important; width: auto !important;
  top: 4px !important; transform: translateY(-50%) !important;
  height: 9px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 26%, #ffffff 66%, #ffffff 100%) !important;
  background-color: transparent !important;
  border-radius: 6px !important; display: block !important; visibility: visible !important;
  clip-path: inset(0 0 0 0); /* estado por defecto = visible (fallback sin JS) */
}
/* CABEZA = chevron blanco ">" limpio y proporcionado (dos trazos), bold pero NO
   deforme. v6: se ELIMINA el scaleY(1.55) (estiraba la cabeza a ~65px de alto →
   feo y su parte inferior pisaba las cards). Ahora caja 18px + borde 8px, rotada
   45° → chevron ~25px de alto, centrado en el eje, su base queda ~20px por
   encima del top de las cards (no las toca). */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"]::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"]::after {
  content: "" !important; position: absolute !important;
  left: auto !important; right: -116px !important;
  top: 4px !important;
  width: 18px !important; height: 18px !important;
  border-top: 8px solid #ffffff !important;
  border-right: 8px solid #ffffff !important;
  border-left: 0 !important; border-bottom: 0 !important;
  background: transparent !important;
  transform: translateY(-50%) rotate(45deg) !important;
  display: block !important; visibility: visible !important;
}
/* --- ANIMACIÓN de carga: tronco se "dibuja" izq→der, luego aparece el chevron.
   Estado inicial sólo cuando JS añadió .ayc-arrowfx (si no hay JS, queda visible). --- */
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"].ayc-arrowfx::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"].ayc-arrowfx::before { clip-path: inset(0 100% 0 0); }
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"].ayc-arrowfx::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"].ayc-arrowfx::after { opacity: 0; }
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"].ayc-arrowfx.is-visible::before,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"].ayc-arrowfx.is-visible::before {
  clip-path: inset(0 0 0 0) !important; transition: clip-path 0.85s ease 0.15s !important;
}
.ayc-native.ayc-native.ayc-native [data-id="nw0oe484"].ayc-arrowfx.is-visible::after,
.ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"].ayc-arrowfx.is-visible::after {
  opacity: 1 !important; transition: opacity 0.4s ease 0.85s !important;
}
/* Más AIRE arriba de la fila de cards (separación del subtítulo "Así trabajamos contigo:") */
.ayc-native.ayc-native.ayc-native [data-id="ixz9ksb1"] [data-id="myg8of7f"] { margin-top: 64px !important; }

/* [BATCH A-fix] Tabs a ancho COMPLETO (override del max-width:1091) + ENVIAR sin recorte */
.ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
  max-width: none !important; width: 100% !important;
}
.ayc-native.ayc-native.ayc-native form input[type="submit"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"],
.ayc-native.ayc-native.ayc-native .zcwf_button[type="submit"] {
  width: auto !important; max-width: none !important; min-width: 150px !important;
  padding: 14px 34px !important; margin-top: 22px !important; font-size: var(--fs-footer-sm) !important;
}

/* ============================================================
   [DETALLE 2026-06-14] CTA subtítulo + tab pointer + ENVIAR colores
   ============================================================ */

/* (#3) CTA "Estamos listos para escuchar tu caso y orientarte." — el <p> trae
   font-size:18px INLINE; el piso de body lo subía a 20px pero el cliente lo
   quiere MUCHO más grande (es el lead bajo un título de 48px). → 28px, blanco
   casi sólido. !important + data-id bate el inline y el piso global. */
.ayc-native.ayc-native.ayc-native [data-id="33wqgkfg"] p,
.ayc-native.ayc-native.ayc-native [data-id="33wqgkfg"] .elementor-widget-container p {
  font-size: var(--fs-cta-sub) !important; /* parity CTA servicios (34) */
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.95) !important;
}

/* (#4a) Soluciones integrales: el TAB ACTIVO (verde limón) lleva una FLECHA
   (triángulo) que apunta hacia abajo, como el PDF (cola de bocadillo). Sigue al
   .elementor-active (el que está en verde). Necesita overflow visible + relative. */
.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper,
.ayc-native [data-id="6eeek77d"] .elementor-tab-desktop-title { overflow: visible !important; }
.ayc-native [data-id="6eeek77d"] .elementor-tab-desktop-title.elementor-active { position: relative !important; }
/* SÓLO el tab de escritorio (no el .elementor-tab-mobile-title del acordeón,
   que estaba pintando un triángulo suelto en el área de contenido) */
.ayc-native [data-id="6eeek77d"] .elementor-tab-desktop-title.elementor-active::after {
  content: "" !important; position: absolute !important;
  left: 50% !important; bottom: -19px !important; transform: translateX(-50%) !important;
  width: 0 !important; height: 0 !important; top: auto !important; right: auto !important;
  border-left: 19px solid transparent !important;
  border-right: 19px solid transparent !important;
  border-top: 20px solid #9dc41a !important;
  border-bottom: 0 !important;
  background: transparent !important;
  display: block !important; visibility: visible !important; opacity: 1 !important;
  z-index: 5 !important;
}

/* (#4b) Botón ENVIAR: en el PDF la LETRA y el BORDE son gris-teal de marca
   (#839794), fondo transparente, esquinas redondeadas — NO navy. */
.ayc-native.ayc-native.ayc-native form input[type="submit"],
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form input[type="submit"],
.ayc-native.ayc-native.ayc-native .zcwf_button[type="submit"] {
  color: #839794 !important;
  border: 1.5px solid #839794 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 8px !important;
}

/* (#5) NUESTRA PROMESA — los 3 iconos inferiores estaban "totalmente malos"
   (FA genéricos: 1 estrella suelta / 1 persona / círculo-punto). Uso los ASSETS
   REALES del diseño (igm_home/Imágenes exportadas → Recurso 2/7/8, copiados a
   native/icons/promesa-*.png): (1) maletín + 3 estrellas, (2) grupo de personas
   + check, (3) diana + dardo. Oculto el SVG de FontAwesome (opacity 0 → conserva
   la caja) y pinto el PNG de marca como background del contenedor del icono
   (ytds4dmc = widget de las 3 stats). url() relativa a native/home.css. */
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-icon svg { opacity: 0 !important; }
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item .elementor-icon-list-icon {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item:nth-child(1) .elementor-icon-list-icon { background-image: url(icons/promesa-exp.png) !important; }
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon { background-image: url(icons/promesa-team.png) !important; }
.ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon { background-image: url(icons/promesa-target.png) !important; }

/* [FIX lazy-bg 2026-06-14] Soluciones claras (ixz9ksb1): Elementor inyecta un
   <style> inline con `.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded){
   background-image:none!important}` (lazy-load de fondos, spec 0,5,0) que pisa
   el gradiente navy→azul HASTA que la sección entra en viewport → flash blanco
   (y las flechas blancas quedan invisibles ese instante). Como el fondo es un
   GRADIENTE CSS (no hay imagen que cargar), lo fijamos SIEMPRE con specificity
   (0,6,0) que bate la regla inline. */
.ayc-native.ayc-native.ayc-native.ayc-native.ayc-native.ayc-native[data-id="ixz9ksb1"] {
  background-color: #1e2751 !important;
  background-image: linear-gradient(180deg, #1e2751 0%, #0075a9 100%) !important;
}

/* =====================================================================
   RESPONSIVE — LAYOUT POR SECCIÓN (HOME / página 13) — 2026-06-22
   =====================================================================
   INVARIANTE: el desktop (≥1025px) queda BYTE-IDÉNTICO. Todas las reglas de
   abajo viven SOLO dentro de @media (max-width:1024px) [tablet] y
   (max-width:767px) [móvil]; NUNCA se editó una regla sin media-query.
   La escala tipográfica móvil vive centralizada en ayc-base.css (tokens
   --fs-* en @media) → aquí NO se pone font-size px por elemento; sólo se
   ajusta LAYOUT (apilar columnas, anchos a 100%, reducir gaps/padding,
   reposicionar diagramas absolutos) sin perder NINGUNA información.

   Diagnóstico (medido a 360/390/820/1000):
     - ef72b413 "Nuestra Promesa": ÚNICA sección con desborde grande en TODOS
       los anchos. La tarjeta gris (9ocgr3gm) tiene anchos px fijos
       (uvqgyi4m 700, krzy8fuz 680, ytds4dmc 860) y el círculo del logo
       (2s3d2i03) es ABSOLUTO 430px right:-215 → sale fuera del viewport.
     - ixz9ksb1 "Soluciones claras": las descripciones de paso tienen
       width:205px fijo → leve desborde a ≤390.
     - sx7r0nl2 testimonios: 3 tarjetas en fila (581ginu8) + chevrons →
       comprimidas/desbordan en móvil.
     - sj6v5zqm/qh0b8rle stats: 5 celdas flex:1/0 → números "10,000" se
       CORTAN en celdas de ~60px a 360.
   ===================================================================== */

/* ========================= TABLET (≤1024px) ========================= */
@media (max-width: 1024px) {

  /* ---- NUESTRA PROMESA (ef72b413): apilar tarjeta a 1 columna ----
     El círculo del logo deja de ser absoluto y pasa al FLUJO, centrado,
     debajo del texto. Todos los anchos px fijos → 100%. Conserva texto,
     iconos y los 3 stats (años / profesionales / tranquilidad). */
  .ayc-native.ayc-native.ayc-native [data-id="9ocgr3gm"] {
    max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    padding: 44px 32px !important;
    overflow: visible !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="9ocgr3gm"] > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* columna de texto a ancho completo */
  .ayc-native.ayc-native.ayc-native [data-id="uvqgyi4m"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"],
  .ayc-native.ayc-native.ayc-native [data-id="krzy8fuz"] .elementor-widget-container {
    max-width: 100% !important;
    width: auto !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="lb5iw7ns"] {
    max-width: 100% !important;
  }
  /* los 3 stats (icon-list): ancho propio fuera, vuelven a fluir a 100% y
     pueden envolver si no caben (nunca se cortan) */
  .ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-items {
    flex-wrap: wrap !important;
  }
  /* la columna del círculo vuelve al flujo (en desktop es width:0 + static) */
  .ayc-native.ayc-native.ayc-native [data-id="ll6itevi"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 32px !important;
  }
  /* CÍRCULO del logo → estático, centrado, en flujo (NO absoluto) */
  .ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] {
    position: relative !important;
    right: auto !important; left: auto !important; top: auto !important;
    transform: none !important;
    width: 320px !important; max-width: 80vw !important;
    height: 320px !important; min-height: 0 !important;
    margin: 0 auto !important;
    padding: 30px !important;
  }

  /* ---- SOLUCIONES CLARAS (ixz9ksb1): tarjetas de paso a stack vertical ----
     Las tarjetas (bbslyhfe/s1m0bqcn/3pitxuf4) traen de Elementor
     --flex-direction:column + --flex-wrap:wrap; en desktop el alto uniforme
     las mantiene en 1 columna, pero al estrecharse el contenido (número +
     título + descripción) WRAPEA en columnas paralelas → el título y la
     descripción se salen a la derecha (desborde a ≤390). Forzamos NOWRAP +
     alto auto → el número, el título y la descripción se apilan en vertical
     dentro de la tarjeta. */
  .ayc-native.ayc-native.ayc-native [data-id="bbslyhfe"],
  .ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"],
  .ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"] {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: auto !important;        /* alto = contenido (no 408px de desktop, ni 0) */
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;          /* tarjetas centradas a ancho de columna */
  }
  /* separación vertical entre tarjetas apiladas (la 2ª y 3ª) — deja sitio al
     círculo numerado que sobresale por arriba (margin-top:-52px del número).
     40→72: a 40 el badge (-52) invadía 12px la card anterior (queja cliente:
     "los círculos con números se interponen encima de la card siguiente"). 72 = 52
     overhang + 20 de aire → el círculo NO toca la card de arriba. */
  .ayc-native.ayc-native.ayc-native [data-id="s1m0bqcn"],
  .ayc-native.ayc-native.ayc-native [data-id="3pitxuf4"] {
    margin-top: 72px !important;
  }
  /* título y descripción de cada paso a ancho completo, centrados */
  .ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"],
  .ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"],
  .ayc-native.ayc-native.ayc-native [data-id="njio8v9u"],
  .ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"],
  .ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"],
  .ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="ojot1sgd"] .elementor-heading-title,
  .ayc-native.ayc-native.ayc-native [data-id="qc6hehwt"] .elementor-heading-title,
  .ayc-native.ayc-native.ayc-native [data-id="njio8v9u"] .elementor-heading-title,
  .ayc-native.ayc-native.ayc-native [data-id="5jn6nn5b"] p,
  .ayc-native.ayc-native.ayc-native [data-id="vumj2cdv"] p,
  .ayc-native.ayc-native.ayc-native [data-id="ptfe26dd"] p {
    text-align: center !important;
  }
  /* FLECHAS conectoras horizontales (nw0oe484/rf75jvl7): son DECORACIÓN del
     layout horizontal de desktop. Con las tarjetas apiladas en vertical, una
     flecha "→" horizontal no conecta nada y su gráfico (220px) desborda su
     caja (100px) → la ocultamos en ≤1024 (no porta información; el orden 1-2-3
     ya lo dan los círculos numerados). */
  .ayc-native.ayc-native.ayc-native [data-id="nw0oe484"],
  .ayc-native.ayc-native.ayc-native [data-id="rf75jvl7"] {
    display: none !important;
  }
  /* Las flechas SVG inyectadas por JS (svg.ayc-timeline-arrow) tampoco aplican
     al stack vertical → ocultas en ≤1024. */
  .ayc-native [data-id="myg8of7f"] svg.ayc-timeline-arrow {
    display: none !important;
  }
  /* TABS "Soluciones integrales" (6eeek77d): el wrapper de títulos puede
     envolver sin recortar; los títulos a ancho completo. */
  .ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
  }

  /* ---- STATS "Confianza" (qh0b8rle): 4 celdas → tarjetas en wrap CENTRADO ----
     [ACTUALIZADO 2026-09-04] Eran 5 stats y se repartían 3 por fila (3+2 centrado).
     Al eliminar el stat "99%" (ítem 1C) quedan 4: con 33.333% daban 3+1 y la cuarta
     tarjeta quedaba HUÉRFANA y estirada a doble alto (medido a 768 y 1024). Pasamos
     a 50% → rejilla 2x2 equilibrada, coherente con el ≤767 que ya usaba 2 por fila.
     Cada stat = tarjeta con borde suave navy + radio; alturas iguales por fila vía
     align-items:stretch. */
  .ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"],
  .ayc-native.ayc-native.ayc-native .elementor-element-qh0b8rle {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 14px !important;
    max-width: 680px !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] > .elementor-element {
    flex: 0 0 calc(50% - 7px) !important;
    max-width: calc(50% - 7px) !important;
    min-width: 0 !important;
    padding: 20px 10px !important;
    border: 1px solid rgba(30,39,81,.16) !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* ---- TESTIMONIOS (sx7r0nl2): apilar las 3 tarjetas a 1 columna ----
     Las 3 tarjetas SIEMPRE visibles (no es carrusel JS). Los chevrons son
     decoración de navegación → se ocultan al apilar (no hay info ahí). */
  .ayc-native [data-id="581ginu8"].ayc-tst-row,
  .ayc-native .ayc-tst-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    max-width: 520px !important;
  }
  .ayc-native .ayc-tst-row > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ayc-native .ayc-tst-card,
  .ayc-native [data-id="tstcard1"],
  .ayc-native [data-id="tstcard2"],
  .ayc-native [data-id="tstcard3"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* segunda y tercera tarjeta: separación vertical entre tarjetas apiladas */
  .ayc-native [data-id="tstcard2"],
  .ayc-native [data-id="tstcard3"] {
    margin-top: 56px !important;
  }
  /* chevrons decorativos: ocultos al apilar (no portan información) */
  .ayc-native [data-id="tstchevl"],
  .ayc-native [data-id="tstchevr"] {
    display: none !important;
  }
}

/* ========================= MÓVIL (≤767px) ========================== */
@media (max-width: 767px) {

  /* ---- TABS "Soluciones integrales" (6eeek77d): a ≤767 los 3 títulos NO caben
     en fila (texto se solapaba a 93px). Resetea flex:1 (regla desktop L2604) y
     da ancho completo → los títulos se APILAN en vertical (1 por línea), legibles.
     El wrapper ya trae flex-wrap:wrap (bloque ≤1024). ---- */
  .ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tabs-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-title {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;     /* permite envolver si el label es largo */
    text-align: center !important;
  }
  /* La FLECHA verde (pointer del tab activo) apunta hacia abajo para los tabs
     HORIZONTALES de desktop; apilados en móvil se montaba ENCIMA del siguiente tab
     (queja cliente). Se OCULTA en móvil (el acordeón no necesita pointer). */
  .ayc-native.ayc-native.ayc-native [data-id="6eeek77d"] .elementor-tab-desktop-title.elementor-active::after {
    display: none !important;
  }

  /* ---- NUESTRA PROMESA: padding y círculo más compactos ---- */
  .ayc-native.ayc-native.ayc-native [data-id="9ocgr3gm"] {
    padding: 32px 20px !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] {
    width: 240px !important;
    height: 240px !important;
    padding: 24px !important;
    margin-top: 8px !important;
  }
  /* los 3 stats del icon-list: cada item a ancho completo, apilados */
  .ayc-native.ayc-native.ayc-native [data-id="ytds4dmc"] .elementor-icon-list-item {
    width: 100% !important;
  }

  /* ---- STATS "Confianza": 2 tarjetas por fila (números grandes legibles).
     5 stats → 2+2+1; la 5ª queda CENTRADA sola (justify-content:center heredado
     del bloque ≤1024). Tarjetas con el mismo borde suave navy. ---- */
  .ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"],
  .ayc-native.ayc-native.ayc-native .elementor-element-qh0b8rle {
    max-width: 360px !important;
    gap: 12px !important;
  }
  .ayc-native.ayc-native.ayc-native [data-id="qh0b8rle"] > .elementor-element {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    padding: 18px 8px !important;
  }
}

/* ============================================================================
   LOGOS / CLIENTES — banda de carrusel ANTES del CTA  (#ayc-logos-sec)
   "Empresas que confían en AYC Group". 19 logos autorizados normalizados a
   160px de alto, cada uno en un CHIP blanco uniforme sobre banda gris claro.
   Widget Image Carousel nativo (editable): autoplay + infinito + pausa al
   hover/foco. Accesible: cada img lleva alt = nombre de empresa, Swiper añade
   roles/aria; prefers-reduced-motion neutraliza el desplazamiento.
   ============================================================================ */
#ayc-logos-sec {
  overflow: hidden;
  position: relative;
  /* [REDISEÑO 2026-06-24] Banda LIMPIA y pareja con aire vertical real (antes:
     padding 0 → contenedor apretado; radial muddy/desigual). Degradado vertical
     suave que hace resaltar los chips blancos sin ensuciar. */
  padding-top: 72px !important;  /* 2026-06-24 HM2: sin eyebrow el título no debe quedar con hueco arriba (88→72) */
  padding-bottom: 88px !important;
  background: linear-gradient(180deg, #FBFCFE 0%, #ECF1F8 100%) !important;
}
/* Antes había DOS acentos verdes (barra superior + subrayado del eyebrow) →
   recargado. Quitamos la barra superior; el acento vive sólo en el eyebrow. */
#ayc-logos-sec::before { display: none !important; }

/* [2026-06-24 PDF AJUSTES HM2] "Quitar nuestros clientes, dejar solo el título grande y
   reestructurar la sección." → ocultamos el eyebrow "NUESTROS CLIENTES" y sus líneas verdes
   de flanco. Queda SOLO el título grande + subtítulo, recentrado. (El nodo sigue en el editor,
   oculto — reversible; no se borra de _elementor_data.) */
.ayc-native.ayc-native #ayc-logos-eyebrow { display: none !important; }
/* TÍTULO: navy con acento verde en "AYC Group", más presencia */
.ayc-native.ayc-native #ayc-logos-title,
.ayc-native.ayc-native #ayc-logos-title .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-size: var(--fs-section) !important;
  font-weight: 700 !important;                 /* Futura Bold = 700 (no 800 faux) */
  color: var(--ayc-navy, #1e2751) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.4px;
  margin: 0 0 18px !important;
}
.ayc-native.ayc-native #ayc-logos-title .ayc-logos-accent,
.ayc-native.ayc-native #ayc-logos-title .elementor-heading-title .ayc-logos-accent {
  color: var(--ayc-green, #1aa64b) !important;
}
/* SUBTÍTULO de apoyo: gris de marca, centrado */
.ayc-native.ayc-native #ayc-logos-subtitle,
.ayc-native.ayc-native #ayc-logos-subtitle p {
  font-family: var(--ayc-font-body);
  font-size: 18px !important;            /* antes 26px = demasiado grande para subtítulo de apoyo */
  font-weight: 400 !important;
  color: #5B6472 !important;             /* gris legible (antes gris-teal #839794 washed/bajo contraste) */
  line-height: 1.6 !important;
  text-align: center !important;
  max-width: 600px;
  margin: 0 auto 48px !important;
}

/* slide centrado + CHIP uniforme (figure swiper-slide-inner) */
#ayc-logos-sec .elementor-image-carousel .swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto;
}
#ayc-logos-sec .swiper-slide .swiper-slide-inner {
  width: 100%;
  min-height: 104px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(30,39,81,.06);   /* borde MUY suave (antes #E6E9EF duro/boxy) */
  border-radius: 16px;
  padding: 22px 24px;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(30,39,81,.07);  /* sombra premium suave (antes 1px casi plana) */
  transition: box-shadow .25s ease, transform .25s ease;
}
#ayc-logos-sec .swiper-slide .swiper-slide-inner:hover {
  box-shadow: 0 14px 32px rgba(30,39,81,.14);
  transform: translateY(-3px);
}
#ayc-logos-sec .swiper-slide img.swiper-slide-image {
  width: auto !important;
  max-width: 100% !important;          /* NO recortar: encajar el logo dentro del chip */
  height: auto !important;
  max-height: 54px !important;         /* logos un poco más grandes (antes 48) */
  object-fit: contain;
  margin: 0 auto;
  background: transparent;
}
/* (Se intentó un edge-fade con mask-image en el carrusel pero ROMPE el render de
   los slides — mask sobre el wrapper transformado de Swiper no composita y los
   logos desaparecen. Retirado: los chips sobre banda limpia ya se ven premium.) */

@media (prefers-reduced-motion: reduce) {
  #ayc-logos-sec .swiper-wrapper { transition-duration: 0ms !important; }
}
@media (max-width: 1024px) {
  #ayc-logos-sec .swiper-slide .swiper-slide-inner { min-height: 84px; padding: 16px 16px; }
  #ayc-logos-sec .swiper-slide img.swiper-slide-image { max-height: 42px !important; }
}
@media (max-width: 767px) {
  #ayc-logos-sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  .ayc-native.ayc-native #ayc-logos-title { margin-bottom: 20px !important; }
  #ayc-logos-sec .swiper-slide .swiper-slide-inner { min-height: 76px; padding: 14px 12px; }
  #ayc-logos-sec .swiper-slide img.swiper-slide-image { max-height: 38px !important; }
}

/* ============================================================================
   RESEÑAS — CARRUSEL DESLIZANTE (ayc-reviews.js construye .ayc-tst-viewport +
   .ayc-tst-track dentro de .ayc-tst-row). El viewport recorta en X (deslizamiento)
   pero deja salir el avatar por ARRIBA (overflow-y visible). Las cards del track
   van a ANCHO FIJO (--ayc-tst-cw, lo fija el JS) — override del flex:1 original
   con mayor especificidad para que entren 3 + 1 buffer y el track pueda deslizar. */
.ayc-native [data-id="sx7r0nl2"] { overflow-x: clip; }
/* RESEÑAS — carrusel Swiper (ayc-reviews.js crea .ayc-rev-swiper en .ayc-tst-row).
   padding-top deja salir el avatar que sobresale por arriba; cada slide ocupa 1
   card a ancho completo del slide (override del flex:1 original del .ayc-tst-card). */
.ayc-native .ayc-rev-swiper { width: 100%; overflow: hidden; padding-top: 24px; }
.ayc-native .ayc-rev-swiper .swiper-wrapper { align-items: stretch; }
.ayc-native .ayc-rev-swiper .swiper-slide { 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;
}

/* FIX scroll horizontal (2026-06-23): el círculo de "Nuestra Promesa" (465px fijo)
   desbordaba a ~1280-1366px de ancho. Clip de la sección como garantía + el círculo
   escala con el viewport por debajo de 1366px (se mantiene cuadrado, máx 465). */
.ayc-native.ayc-native[data-id="ef72b413"] { overflow-x: clip; }   /* sección Promesa: garantiza no-scroll horizontal */
@media (max-width: 1366px) {
  .ayc-native.ayc-native.ayc-native [data-id="2s3d2i03"] {
    width: 30vw !important; max-width: 420px !important;
    height: 30vw !important; max-height: 420px !important; min-height: 0 !important;
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* ============================================================
   R3 (2026-06-23) — Soluciones integrales: tabs
   [#4 + #5] Los títulos MÓVILES de las tabs (.elementor-tab-title dentro de
   .elementor-tabs-content-wrapper) salían display:flex en DESKTOP (la CSS del
   widget Tabs de Elementor que los oculta NO carga en páginas native). Cada
   título móvil (36px, barra verde/navy) (a) empujaba el panel activo +36px por
   tab → la descripción izq bajaba más cuanto más a la derecha; (b) se veía como
   una "raya/barra horizontal" bajo las tabs. Los ocultamos en ≥768px (comporta-
   miento nativo de Elementor); en móvil siguen visibles (acordeón). */
@media (min-width: 768px) {
  .ayc-native .elementor-widget-tabs .elementor-tabs-content-wrapper > .elementor-tab-title {
    display: none !important;
  }
}

/* [R3 #5] Quitar la "raya horizontal" gris bajo los tabs (Soluciones integrales):
   es el ::before del tab ACTIVO (Elementor clásico) — width 25974px, left -25974px,
   border-bottom 1px solid #d5d8dc — que cruza TODO el ancho como un divisor. El
   diseño NO la tiene; sólo va el chevron verde (::after, h20). Lo ocultamos. */
.ayc-native .elementor-widget-tabs .elementor-tab-title.elementor-active::before {
  display: none !important;
}

/* ============================================================
   R3 #7 (2026-06-23) — Home "Artículos y Recursos" (widget Posts)
   Cada card (.elementor-post) es flex-column con el botón "Ir al Blog"
   (.elementor-post__read-more) a margin-top:auto (pegado al fondo). En las
   cards con TÍTULO de 3 líneas el botón quedaba pegado al título (gap ~1px);
   las de 2 líneas tenían ~34px. Damos un margen MÍNIMO bajo el título → la card
   más alta conserva ~20px y, al ser grid de altura igual, todas crecen juntas y
   los botones siguen alineados al fondo. */
.ayc-native .elementor-widget-posts .elementor-post__title {
  margin-bottom: 20px !important;
}

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

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

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

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

/* ============================================================================
   [HERO BANNER 2026-09-07] Banner del cliente (banner-ayc-group) al 100%.
   Requisito: NO recortar cabezas y usar el tamaño completo de la imagen.
   La imagen es 1672x941 (1.7768). El hero traía min-height 660px + cover, que
   a ancho completo recortaba ~39% del alto y decapitaba a las dos personas.
   Solución: el contenedor adopta el MISMO aspect-ratio que la imagen, así
   'cover' no tiene nada que recortar -> se ve el 100% del encuadre.
   Append-only: gana por orden de cascada sobre las reglas previas de vrz9flip.
   ========================================================================= */
.ayc-native.ayc-native[data-id="vrz9flip"] {
  /* La sección termina justo debajo del disclaimer legal. Con aspect-ratio el
     hero medía 1081px en 1920 y sobraban ~413px de foto por debajo del texto.
     620px = bloque de contenido (255px) + aire arriba/abajo.
     'center 20%' encuadra por la parte ALTA: las dos cabezas quedan completas
     (se recorta la mesa, no a las personas) y aún se ve la entrega del pasaporte. */
  min-height: 560px !important;
  height: auto !important;
  background-size: cover !important;
  /* 5% medido, no estimado: el tope del pelo está en y=47 de 941. Con 560px
     sobran 453px, así que 5% arranca la ventana en y=23 → 24px de margen
     sobre la cabeza. A 20% arrancaba en y=80 y CORTABA el pelo. */
  background-position: center 5% !important;
  background-repeat: no-repeat !important;
  /* El bloque titulo+boton+legal se ANCLA ABAJO: el disclaimer cierra la
     imagen. Los gaps internos no se tocan (los define el contenedor l9417o9n),
     solo se libera el bloque hacia abajo. 28px = respiro para que el legal
     no quede pegado al borde. */
  justify-content: flex-end !important;
  padding-bottom: 28px !important;
}
.ayc-native [data-id="l9417o9n"] { justify-content: flex-end !important; }

/* Móvil: por debajo de ~900px el ratio deja el hero demasiado bajo para el
   titular; se libera la altura y se deja que el contenido mande, recortando
   por los lados (las caras están centradas, así que no se pierden). */
@media (max-width: 900px) {
  .ayc-native.ayc-native[data-id="vrz9flip"] {
    /* el contenido manda: con min-height fijo el titular se desbordaba por
       arriba (se perdia la 1a linea). Se deja crecer y se da aire vertical. */
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .ayc-native [data-id="l9417o9n"] { justify-content: center !important; }
}

/* ============================================================================
   [BLOG OCULTO 2026-09-08] El cliente pidió retirar del Home la sección
   "Artículos y Recursos" (4 tarjetas + botones "Ir al Blog").
   Se oculta el contenedor completo vw9xt2jg (título 42to31zq + listado
   mtraui2s). Se hace por CSS y NO borrando el _elementor_data: si el cliente
   decide publicar blog más adelante, basta con retirar esta regla.
   ========================================================================= */
.ayc-native .elementor-element-vw9xt2jg,
.elementor-13 .elementor-element-vw9xt2jg {
  display: none !important;
}

/* "Información adicional" (Description) visible en los forms del Home
   (2026-10-02): mismo estilo de línea inferior que los demás campos. Triplicada
   para ganar al textarea con caja de `.ayc-native.ayc-native textarea` (L54). */
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld textarea {
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  border: 0 !important;
  border-bottom: 1.5px solid #c7ccca !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--ayc-font-body) !important;
  font-size: var(--fs-body) !important;
  min-height: 72px !important;
  height: 72px;
  resize: vertical;
}
.ayc-native.ayc-native.ayc-native .ayc-zoho-material-form .zcwf_col_fld textarea:focus {
  border-bottom-color: var(--ayc-green) !important;
  outline: none !important;
}