/* ============================================================
   AYC — CONTACTO (capa NATIVA, centralizada, SIN !important).
   Scopeada bajo la clase DOBLADA .ayc-native.ayc-native (gana a
   Elementor .e-con.e-flex sin !important). Reemplaza a contacto.css
   cuando la pagina 86 esta en ayc_native_page_ids().
   Tamanos = escala compacta de marca
     (hero 64 · seccion/h2 44 · card 32 · subtitulo/boton 26 ·
      cuerpo 22 · small 17). Colores = tokens del Kit / ayc-native.css.
   Tipografia = Futura (Bold/Medium) via @font-face local.
   Fixes de paridad vs PDF de Contacto:
     - labels del form en negrita (Futura Bold 700)
     - checkbox legal en italica + navy
     - disclaimer del hero visible COMPLETO (reduce solape de la intro card)
     - filtro azul de marca sobre la foto del hero + posicion sin cortar caras
   ============================================================ */

.ayc-native.ayc-native { color: var(--ayc-ink); }

/* ============================================================
   1) HERO — foto con FILTRO AZUL de marca + titular centrado
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-hero-sec"] {
  position: relative;
  /* Banda foto MAS ALTA: el diseno deja ~512px de foto sobre el titular y el
     titular cae en el tercio inferior. Con justify-content:flex-end + 60px de
     padding-bottom, 720px baja el titular a ~section-rel 500px (medido). */
  min-height: 580px; /* 2026-06-24 PDF AJUSTES CT1: "el banner se ve muy alto y el texto muy abajo" (720→580) */
  background-size: cover;
  background-position: center 28%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 56px; /* CT1: subir un poco el titular (60→56) */
  overflow: hidden;
}
/* Filtro azul de marca: azul arriba -> navy abajo (legibilidad), deja ver la foto */
.ayc-native.ayc-native [data-id="ct-hero-sec"]::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Filtro azul de marca CANÓNICO (alineado 2026-06-23: 0.40/0.60 → 0.46/0.66). */
  background: linear-gradient(180deg, rgba(0,73,116,0.50) 0%, rgba(30,39,81,0.70) 100%);
  z-index: 0;
  opacity: 1; /* vence el opacity:0.5 que Elementor pone al ::before (background_overlay del _elementor_data); el alpha real vive en los stops */
  pointer-events: none;
}
/* Contenido del hero por encima del filtro */
.ayc-native.ayc-native [data-id="ct-hero-sec"] > .e-con-inner,
.ayc-native.ayc-native [data-id="ct-hero-inner"] { position: relative; z-index: 1; }

.ayc-native.ayc-native [data-id="ct-hero-inner"] {
  justify-content: flex-end;
  padding-bottom: 0;
  /* Reduce el padding lateral de Elementor (60px) a 30px -> caja de contenido
     1400-60 = 1340px, asi el disclaimer legal (linea natural ~1327px @14px)
     cabe en 1 LINEA. El titular (1280px) sigue centrado sin problema. */
  padding-left: 30px;
  padding-right: 30px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.ayc-native.ayc-native [data-id="ct-hero-inner"] > .e-con-inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* Titular hero — escala hero 64, blanco con span verde, centrado */
.ayc-native.ayc-native [data-id="ct-hero-title"] { width: 100%; text-align: center; }
.ayc-native.ayc-native [data-id="ct-hero-title"] p {
  font-family: var(--ayc-font-head);
  font-weight: 700; /* Futura Bold @font-face es 700; 800 forzaba faux-bold distorsionado */
  font-size: var(--fs-hero);
  color: var(--ayc-white);
  line-height: 1.12;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}
.ayc-native.ayc-native [data-id="ct-hero-title"] p span {
  font-family: var(--ayc-font-head);
  font-weight: 700; /* idem: titulo = --ayc-font-head Bold 700, NO 800 */
  font-size: var(--fs-hero);
  color: var(--ayc-green);
  line-height: 1.12;
  display: inline-block;
  margin-top: 2px;
}

/* Disclaimer legal del hero — rol LEGAL: token --fs-legal (14px), 1 sola linea.
   (antes --fs-small=21 lo bajaba a 2 lineas y lo sacaba de su escala legal).
   Anchura: a 14px la frente natural mide ~1327px -> ensanchamos a 1360px (cabe
   en el hero-inner de 1440 viewport) para que envuelva natural a 1 LINEA, sin
   <br> ni encoger fuente (regla: menos lineas = mas ancho, no fuente menor). */
.ayc-native.ayc-native [data-id="ct-hero-legal"] { width: 100%; text-align: center; }
.ayc-native.ayc-native [data-id="ct-hero-legal"] p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-legal);
  line-height: 1.45;
  font-weight: 500;
  max-width: 1360px;
  margin: 14px auto 0;
  color: rgba(255,255,255,0.88);
  text-align: center;
}
/* Glifo ⚠ antepuesto al disclaimer del hero (mismo tratamiento que footer/home/
   servicios): \26A0\FE0E = warning sign + VS15 (presentación de TEXTO, monocromo),
   SIEMPRE blanco puro como el resto de disclaimers. El hero ct-hero-sec NO lleva la
   clase ayc-native (solo el root la tiene), por eso la regla compartida
   [data-id$="-hero-sec"]…::before no alcanza este hero → se aplica aquí, scopeado al
   widget, reusando el mismo patrón centralizado (token, sin px literal). */
.ayc-native.ayc-native [data-id="ct-hero-legal"] p::before {
  content: "\26A0\FE0E\00A0";  /* ⚠ + VS15 monocromo + espacio fino */
  color: #fff !important;
  font-family: 'Arial', sans-serif;
}
.ayc-native.ayc-native [data-id="ct-hero-legal"] p img.emoji {
  display: none !important;    /* ocultar twemoji amarillo → 1 solo ⚠ blanco */
}

/* ============================================================
   2) BANDA INTRO — tarjeta blanca flotante, solape REDUCIDO
   (fix: el disclaimer del hero ya no queda recortado)
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-intro-sec"] {
  margin-top: -36px;
  padding: 0 80px;
  /* GAP #2 (color, jun-2026): la banda gris de intro debe ser EL MISMO gris
     que la seccion del form (#efefef = rgb 239,239,239 = --ayc-bg-band), no el
     #F4F5F7 (244,245,247) mas frio/claro previo, para que lea como UNA banda
     gris continua igual que el diseno (crop_contacto_cta.png). */
  background: linear-gradient(to bottom, transparent 0, transparent 36px, var(--ayc-bg-band) 36px, var(--ayc-bg-band) 100%);
  position: relative;
  z-index: 3;
  box-sizing: border-box;
}
.ayc-native.ayc-native [data-id="ct-intro-card"] {
  background: var(--ayc-white);
  border-radius: 20px;
  box-shadow: 0 -6px 32px rgba(0,0,0,0.15), 0 12px 32px rgba(0,0,0,0.08);
  padding: 36px 60px;
  position: relative;
  margin: 0 auto 25px;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}
/* Texto intro — cuerpo 22 gris de marca, centrado */
.ayc-native.ayc-native [data-id="ct-intro-text"] { width: 100%; text-align: center; }
/* [2026-06-24 PDF AJUSTES CT2] "Falta la raya verde del diseño" en el intro card.
   El ::after verde animado vivía solo en el root contacto.css (dequeued en nativo) →
   se porta aquí. El JS (animations.js) ya añade la clase .ayc-line-animate al hacer scroll. */
.ayc-native.ayc-native [data-id="ct-intro-card"] { overflow: hidden; }
.ayc-native.ayc-native [data-id="ct-intro-card"]::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 3px;
  background: linear-gradient(to right, transparent, var(--ayc-green) 20%, var(--ayc-green) 80%, transparent);
  transform-origin: left center;
  /* 2026-06-25 P4: animar EN LA CARGA (keyframes, no depende del JS IntersectionObserver). */
  animation: ayc-ct-greenline 1.1s ease-out 0.45s both;
}
@keyframes ayc-ct-greenline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ayc-native.ayc-native [data-id="ct-intro-card"].ayc-line-animate::after { transform: scaleX(1); }

/* [2026-06-25 CORRECCIÓN — evaluación PDF por página] El CTA "O si prefieres, agenda una consulta"
   (página 10) NO lleva línea verde en el diseño (verificado por píxeles + visual). La línea verde
   SÍ va en: el intro card de Contacto (arriba, página 9) + los 3 CTA de servicio (Ayuda/Accountants/
   Advisors). Aquí se QUITA del ct-cta-sec. */
.ayc-native.ayc-native [data-id="ct-intro-text"] p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-body);
  color: var(--ayc-muted);
  line-height: 1.55;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  max-width: 900px;
}
.ayc-native.ayc-native [data-id="ct-intro-text"] p + p { margin-top: 6px; }

/* ============================================================
   3) SECCION FORMULARIO — fondo gris claro, 2 columnas
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-form-sec"] {
  /* GAP (color): fondo de la banda del form = #efefef (RGB 239,239,239) del
     diseno, no el #F4F5F7 (mas frio/claro) previo. Centralizado en --ayc-bg-band. */
  background: var(--ayc-bg-band);
  padding-top: 20px;
}
/* Form-inner en fila desktop */
@media (min-width: 768px) {
  .ayc-native.ayc-native [data-id="ct-form-inner"] > .e-con-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
  }
  .ayc-native.ayc-native [data-id="ct-form-left"] { width: 42%; flex: 0 0 42%; }
  .ayc-native.ayc-native [data-id="ct-form-right"] { width: 52%; flex: 0 0 52%; }
}
/* Columna izquierda centrada verticalmente */
.ayc-native.ayc-native [data-id="ct-form-left"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
}
.ayc-native.ayc-native [data-id="ct-form-left"] > .e-con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
/* Titulo seccion — escala HERO 56 navy, peso CANONICO 700.
   GAP (type): es el elemento DOMINANTE de la columna izquierda, mucho mayor que
   las labels del form (ratio ~3.4 en el diseno). A --fs-h1 (44) leia chico
   (ratio 2.1). Subido a --fs-hero (56, paso hero de la escala) → ratio ~2.7 vs
   labels 21. Sigue a 2 lineas por el ancho de columna (~628px). Token, NO literal.
   GAP (peso): peso 800 = faux extra-bold sobre la cara 'Futura Bold' (trazos
   sobre-engrosados). Canon de titulos = 700 (la cara Bold @font-face ES 700). */
.ayc-native.ayc-native [data-id="ct-form-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-hero);
  color: var(--ayc-navy);
  line-height: 1.15;
  margin: 0;
}
/* Subtitulo seccion — LEAD diferenciado (mayor que el cuerpo, su propio paso).
   GAP (type): leia 21 = identico a body/labels (jerarquia plana). El diseno lo
   muestra como lead claramente > cuerpo → paso lead de la escala = --fs-cta-sub
   (34). Token, NO literal. */
.ayc-native.ayc-native [data-id="ct-form-sub"] p {
  font-family: var(--ayc-font-body);
  color: var(--ayc-muted);
  font-size: var(--fs-cta-sub);
  line-height: 1.35;
  font-weight: 500;
  margin: 16px 0 0 0;
}

/* Tarjeta blanca del form */
.ayc-native.ayc-native [data-id="ct-form-right"] {
  background: var(--ayc-white);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  padding: 36px;
  align-self: center;
}

/* ---- FORM nativo (Elementor Pro): LABELS EN NEGRITA (fix gap PDF) ---- */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-group > label,
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-label {
  display: block;
  color: var(--ayc-navy);
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-small);
  padding-bottom: 6px;
  margin-bottom: 0;
}
/* Inputs / select / textarea — gris #E9EBEF */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-textual,
.ayc-native.ayc-native [data-id="e1ctform"] input.elementor-field,
.ayc-native.ayc-native [data-id="e1ctform"] textarea.elementor-field,
.ayc-native.ayc-native [data-id="e1ctform"] select.elementor-field {
  width: 100%;
  /* GAP (color): relleno de los campos = #efefef del diseno (= la banda),
     no el #E9EBEF (mas azulado/oscuro) previo. Token --ayc-bg-band. */
  background: var(--ayc-bg-band);
  /* GAP (uniformidad): borde+radio UNIFORMES en input/textarea/select. El
     <select> caía a este radio (6px) y borde (=banda #efefef) mientras los
     input/textarea renderizaban con borde #e0e0e0 y radio 4px (default Elem.).
     Igualamos todos los campos al borde/radio canónico (tokens centralizados). */
  border: 1px solid var(--ayc-field-border);
  border-radius: var(--ayc-field-radius);
  padding: 12px 14px;
  font-size: var(--fs-small);
  line-height: normal;
  color: var(--ayc-navy);
  font-family: var(--ayc-font-body);
  outline: none;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-textual:focus,
.ayc-native.ayc-native [data-id="e1ctform"] select.elementor-field:focus {
  border-color: var(--ayc-green);
  background: #F4F5F7;
  box-shadow: 0 0 0 2px rgba(157,196,26,0.18);
}
.ayc-native.ayc-native [data-id="e1ctform"] textarea.elementor-field {
  resize: vertical;
  min-height: 88px;
}
/* Placeholders gris de marca (UX: se conservan) */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-textual::placeholder {
  color: var(--ayc-muted);
  opacity: 1;
}
/* Select: restaurar flecha nativa del navegador */
.ayc-native.ayc-native [data-id="e1ctform"] .select-caret-down-wrapper { display: none; }
.ayc-native.ayc-native [data-id="e1ctform"] select.elementor-field {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: auto;
  /* Re-afirmar borde/radio UNIFORMES en el select (la apariencia nativa
     menulist puede arrastrar el borde del navegador) → idéntico a input/textarea. */
  border: 1px solid var(--ayc-field-border);
  border-radius: var(--ayc-field-radius);
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-select-wrapper { width: 100%; }

/* Checkbox legal — ITALICA + NAVY (fix gap PDF). El TEXTO legal NO se cambia. */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance label {
  display: inline;
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--ayc-navy);
  cursor: pointer;
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--ayc-font-body);
  padding-bottom: 0;
  margin-bottom: 0;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-acceptance-field {
  width: 15px;
  height: 15px;
  min-height: 15px;
  margin-top: 2px;
  flex: 0 0 15px;
  flex-shrink: 0;
  accent-color: var(--ayc-green);
  padding: 0;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance .elementor-field-subgroup {
  width: 100%;
  display: block;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance .elementor-field-option label {
  flex: 1 1 auto;
  width: auto;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance a {
  color: var(--ayc-navy);
  font-style: italic;
  text-decoration: underline;
  font-weight: 600;
  font-size: var(--fs-small);
}
/* Boton Enviar mensaje — verde de marca, escala boton */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-submit {
  justify-content: flex-start;
  margin-top: 8px;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-submit .elementor-button {
  width: auto;
  flex-basis: auto;
  align-self: flex-start;
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  border: none;
  border-radius: 6px;
  padding: 12px 32px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-submit .elementor-button:hover {
  background: var(--ayc-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(157,196,26,0.4);
}
/* Mensaje exito/error del form */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-message {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-small);
}

/* ============================================================
   4) BANDA CTA — degradado AZUL -> NAVY de marca, boton verde
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-cta-sec"] {
  background-color: var(--ayc-navy);
  background-image: linear-gradient(180deg, var(--ayc-blue) 0%, var(--ayc-navy) 100%);
  padding: 72px 20px;
}
.ayc-native.ayc-native [data-id="ct-cta-inner"] {
  align-items: center;
  text-align: center;
}
/* GAP subtítulo (jun-2026): ensanchar la banda interna del CTA de 1200→1400px
   para que el subtítulo disponga del ancho máximo (la flex vive en .e-con-inner
   de un contenedor boxed, así que el cap se fija ahí). El título mantiene su
   max-width:760px; solo el subtítulo aprovecha el ancho extra. */
.ayc-native.ayc-native [data-id="ct-cta-inner"] > .e-con-inner {
  max-width: 1400px;
}
/* CTA headline — escala seccion 44, blanco */
.ayc-native.ayc-native [data-id="ct-cta-h2"] .elementor-heading-title {
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-cta-title);
  text-align: center;
  line-height: 1.15;
  margin: 0;
  max-width: 760px;
}
/* CTA subtitulo — italica, blanco translucido, centrado.
   GAP (jun-2026): la frase envolvía a 2 líneas LOPSIDED (1134/451) por el cap
   max-width:900px del widget-container. FIX DE ANCHO (regla #7, sin tocar
   --fs-cta-sub=34 ni meter <br>): se quita el cap → el subtítulo usa TODO el
   ancho interno de la banda (ver ct-cta-inner abajo, ensanchado a 1400px). La
   frase a italic 34px mide ~1596px de extensión natural; con ancho de auditoría
   1440 (banda interna ~1365px) NO cabe físicamente en 1 línea a 34px, así que
   el ancho máximo entrega el wrap MÁS ANCHO y balanceado posible. */
.ayc-native.ayc-native [data-id="ct-cta-sub"] { width: 100%; text-align: center; }
.ayc-native.ayc-native [data-id="ct-cta-sub"] .elementor-widget-container {
  text-align: center;
  max-width: none;
  margin: 0 auto;
}
.ayc-native.ayc-native [data-id="ct-cta-sub"] p {
  color: rgba(255,255,255,0.92);
  font-family: var(--ayc-font-body);
  font-style: italic;
  font-size: 24px; /* 2026-06-24/25 PDF AJUSTES CT4: "el texto va un poco más pequeño, mirar el diseño" → el diseño lo muestra en UNA línea; a 30px envolvía a 2 líneas @125% → 24px entra en 1 línea (SOLO Contacto; no toca el token global) */
  line-height: 1.5;
  text-align: center;
  margin: 16px auto 0;
}
/* CTA boton — verde de marca, escala boton 26 */
.ayc-native.ayc-native [data-id="ct-cta-btn"] { text-align: center; width: 100%; margin-top: 28px; }
.ayc-native.ayc-native [data-id="ct-cta-btn"] .elementor-button-wrapper { text-align: center; }
.ayc-native.ayc-native [data-id="ct-cta-btn"] .elementor-button {
  background: var(--ayc-green);
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  border-radius: 8px;
  /* GAP (jun-2026): la pastilla leía 387×58 (ratio 6.68) — alta y angosta vs
     diseño 406×48 (ratio ~8.5). FIX: menos padding vertical (16→11) + más
     horizontal (42→52) → 407×48 (ratio 8.48), wider-&-shorter como el crop.
     Fuente intacta (--fs-h3=26, invariante) y bg #9dc41a. */
  padding: 11px 52px;
  display: inline-flex;
  text-decoration: none;
  border: none;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.ayc-native.ayc-native [data-id="ct-cta-btn"] .elementor-button:hover {
  background: var(--ayc-green-dark);
  color: var(--ayc-white);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(157,196,26,0.55);
}
.ayc-native.ayc-native [data-id="ct-cta-btn"] .elementor-button i {
  margin-right: 8px;
  color: var(--ayc-white);
}

/* ============================================================
   5) SECCION DATOS DE CONTACTO — 2 columnas con divisor, iconos verdes
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-info-sec"] { background: var(--ayc-white); }
.ayc-native.ayc-native [data-id="ct-info-inner"] {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.ayc-native.ayc-native [data-id="ct-info-sec"] > .e-con-inner {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
/* Titulos de columna — card 32 navy */
.ayc-native.ayc-native [data-id="ct-info-left-title"] .elementor-heading-title,
.ayc-native.ayc-native [data-id="ct-info-right-title"] .elementor-heading-title {
  color: var(--ayc-navy);
  font-family: var(--ayc-font-head);
  /* [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;
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin: 0 0 10px 0;
}
@media (min-width: 768px) {
  .ayc-native.ayc-native [data-id="ct-info-inner"] > .e-con-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 50px;
  }
  .ayc-native.ayc-native [data-id="ct-info-left"] { width: 54%; flex: 0 0 54%; }
  .ayc-native.ayc-native [data-id="ct-info-right"] { width: 42%; flex: 0 0 42%; }
  /* Divisor vertical entre columnas (presente en el PDF) */
  .ayc-native.ayc-native [data-id="ct-info-right"] {
    border-left: 1px solid #D1D5DB;
    padding-left: 50px;
  }
}
/* ICON-LIST nativos (datos + horarios) */
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-item,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-item,
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-item > a,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-item > a {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
}
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-icon,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-icon {
  width: 42px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-icon i,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-icon i {
  color: var(--ayc-green);
  font-size: var(--fs-h3);
}
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-icon svg,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-icon svg {
  width: 34px;
  height: 34px;
  /* flex-shrink:0 => el svg NO colapsa a ~18px dentro del cell inline-flex
     (sin esto, flex-shrink:1 reduce el ancho al min-content y el icono
     compuesto calendario+badge se aplasta e ilegible). Cuadrado 34px =
     iconos legibles y uniformes como el diseno (Recurso 2-6). */
  flex-shrink: 0;
  fill: var(--ayc-green);
}
/* Texto de los items — cuerpo 22 navy */
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-text,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-text {
  font-family: var(--ayc-font-body);
  color: var(--ayc-navy);
  font-size: var(--fs-small);
  line-height: 1.55;
  padding-left: 16px;
}
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-text strong,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-text strong {
  color: var(--ayc-navy);
  font-family: var(--ayc-font-head);
  /* [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;
  font-size: var(--fs-body);
}
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-text span,
.ayc-native.ayc-native [data-id="e1cthour"] .elementor-icon-list-text span {
  color: var(--ayc-muted);
  font-style: italic;
  font-size: var(--fs-small);
}
/* Items con link (email / whatsapp): valor navy sin subrayado */
.ayc-native.ayc-native [data-id="e1ctinfo"] .elementor-icon-list-item > a .elementor-icon-list-text span {
  color: var(--ayc-navy);
  text-decoration: none;
}

/* ============================================================
   RESPONSIVE — tablet/movil (desktop >=1025 intacto arriba)
   ============================================================ */
@media (max-width: 1024px) {
  .ayc-native.ayc-native [data-id="ct-hero-sec"] { min-height: 440px; }
  .ayc-native.ayc-native [data-id="ct-hero-title"] p,
  .ayc-native.ayc-native [data-id="ct-hero-title"] p span { font-size: var(--fs-h1); }
  .ayc-native.ayc-native [data-id="ct-form-title"] .elementor-heading-title { font-size: var(--fs-h2-lg); }
  .ayc-native.ayc-native [data-id="ct-cta-h2"] .elementor-heading-title { font-size: var(--fs-h2-lg); }
  .ayc-native.ayc-native [data-id="ct-cta-sub"] p { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="ct-info-left"],
  .ayc-native.ayc-native [data-id="ct-info-right"] { width: 50%; flex: 0 0 50%; }
}

@media (max-width: 767px) {
  .ayc-native.ayc-native [data-id="ct-hero-sec"] { min-height: 360px; background-position: 60% 28%; }
  .ayc-native.ayc-native [data-id="ct-hero-title"] p,
  .ayc-native.ayc-native [data-id="ct-hero-title"] p span { font-size: var(--fs-hero-desc); }
  .ayc-native.ayc-native [data-id="ct-hero-legal"] p { font-size: var(--fs-legal); }
  .ayc-native.ayc-native [data-id="ct-intro-sec"] { padding: 0 24px; margin-top: -28px; }
  .ayc-native.ayc-native [data-id="ct-intro-card"] { padding: 28px 24px; }
  .ayc-native.ayc-native [data-id="ct-intro-text"] p { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="ct-form-inner"] > .e-con-inner { flex-direction: column; gap: 28px; }
  .ayc-native.ayc-native [data-id="ct-form-left"],
  .ayc-native.ayc-native [data-id="ct-form-right"] { width: 100%; flex: 1 1 100%; }
  .ayc-native.ayc-native [data-id="ct-form-title"] .elementor-heading-title { font-size: var(--fs-cta-mob); }
  .ayc-native.ayc-native [data-id="ct-form-sub"] p { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="ct-info-inner"] > .e-con-inner { flex-direction: column; gap: 30px; }
  .ayc-native.ayc-native [data-id="ct-info-left"],
  .ayc-native.ayc-native [data-id="ct-info-right"] { width: 100%; flex: 1 1 100%; }
  .ayc-native.ayc-native [data-id="ct-info-right"] {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #D1D5DB;
    padding-top: 30px;
    margin-top: 10px;
  }
  .ayc-native.ayc-native [data-id="ct-cta-sec"] { padding: 56px 20px; }
  .ayc-native.ayc-native [data-id="ct-cta-h2"] .elementor-heading-title { font-size: var(--fs-hero-desc); }
  .ayc-native.ayc-native [data-id="ct-cta-sub"] p { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id="ct-cta-btn"] .elementor-button { font-size: var(--fs-hdr-btn-sm); padding: 13px 34px; }
}

/* ============================================================
   HERO — encuadre: vence el "center center" (50% 50%) que post-86.css
   inyecta a 0,3,0 sobre el data-id. Doblamos el [data-id] (0,4,0) para
   imponer el encuadre 'center 28%' SIN !important nuevo. Append-only.
   (La foto del EQUIPO AYC mide 2400x660; bajo cover en el frame ~1425x600
   el alto cubre exacto, por lo que el eje vivo es el horizontal-center;
   28% mantiene la fila del equipo bien encuadrada en framings mas altos.)
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-hero-sec"][data-id="ct-hero-sec"] {
  background-position: center 28%;
}

@media (max-width: 480px) {
  .ayc-native.ayc-native [data-id="ct-hero-sec"] { min-height: 300px; }
  .ayc-native.ayc-native [data-id="ct-hero-title"] p,
  .ayc-native.ayc-native [data-id="ct-hero-title"] p span { font-size: var(--fs-h3); }
  .ayc-native.ayc-native [data-id="ct-intro-card"] { border-radius: 12px; padding: 24px 16px; }
  .ayc-native.ayc-native [data-id="ct-form-right"] { padding: 24px; }
  .ayc-native.ayc-native [data-id="ct-cta-h2"] .elementor-heading-title { font-size: var(--fs-h3); }
}

/* ============================================================
   GAP CT-Hero (type): el titular blanco debe ocupar 1 sola linea
   como el diseno (sec_contacto_hero.png @1440). A --fs-hero (64px) la
   linea blanca natural mide ~1681px > 1280px del contenedor y envuelve
   a 2 lineas (3 totales). El recorte de referencia mide el titular hero
   en ~48px efectivo (64 * 1280/1681 ~= 48.7).

   NO tocamos el token global --fs-hero (sigue 64px) porque la CTA final
   "titular 64" esta validada 1:1 y lo comparte. En su lugar definimos un
   token de marca dedicado al titular del HERO de paginas y lo usamos via
   var() (NO px hardcodeado por-data-id). Append-only, scope doblado, sin
   !important (no hay font-size por-data-id en post-86.css que pisar; este
   bloque, a igual especificidad (0,3,1) y mas abajo en el codigo, vence).
   El valor de --fs-hero-title vive en ayc-base.css :root (48px); aqui solo se referencia.
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-hero-title"] p,
.ayc-native.ayc-native [data-id="ct-hero-title"] p span {
  font-size: var(--fs-hero-title);
}

/* ============================================================
   GAP CT-Form (layout): proporcion tarjeta/columna 1:1 al diseno.
   /tmp/sec_contacto_form.png @1440: tarjeta blanca ~509px (~42% del
   area de contenido de 1200px), campos internos ~423px. Borde derecho
   de la tarjeta alineado al limite del contenido (x~1312).
   Live previo: right 52% (624px) -> empezaba ~124px a la izquierda y
   ~115px mas ancha. Reducimos right a 42% (504px card -> campos ~432px)
   y ensanchamos left a 54% para conservar el borde derecho (space-between
   ancla la tarjeta a la derecha; left+gap+right = 648+40+504 = 1192 ~ 1200).
   Append-only, scope doblado (0,3,0). post-86.css NO fija width/flex en
   estas columnas (solo --display/--flex-direction), asi que estas reglas
   vencen sin !important. Mas abajo en el codigo => ganan al bloque L147-148.
   ============================================================ */
@media (min-width: 768px) {
  .ayc-native.ayc-native [data-id="ct-form-left"] { width: 54%; flex: 0 0 54%; }
  .ayc-native.ayc-native [data-id="ct-form-right"] { width: 42%; flex: 0 0 42%; }
}

/* ============================================================
   GAP CT-Form (image): chevron del select "¿Que necesitas?".
   El <select> tiene clase .elementor-field-textual (NO .elementor-field),
   por eso la regla previa L240 (select.elementor-field appearance:menulist)
   no lo alcanzaba: appearance computa 'none' y no hay caret nativo, y el
   wrapper lleva 'remove-before' (Elementor quita su pseudo-caret).
   Forzamos appearance:none explicito + chevron SVG navy (#1e2751) a la
   derecha. Doblamos el [data-id] (0,4,1) para vencer cualquier reset de
   appearance de Elementor sin !important nuevo. Marca: navy.
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] select.elementor-field-textual,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] select.elementor-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--ayc-bg-band);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e2751' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  /* GAP (uniformidad): el <select> recibia borde #E9EBEF / radio 6px de
     post-86.css (.elementor-86 …select, 0,4,1) mientras input/textarea van
     a #e0e0e0 / 4px. Igualamos AQUI (mismo 0,4,1, cargado despues) con los
     tokens canonicos de campo → TODOS los campos coinciden. */
  border: 1px solid var(--ayc-field-border);
  border-radius: var(--ayc-field-radius);
}

/* ============================================================
   GAP CT-Form (select placeholder): el valor por defecto "Tramites
   migratorios" (option value="" del _elementor_data) debe leerse como
   PLACEHOLDER gris-teal (#839794), no como un valor elegido navy. El
   <select> es required y su opcion por defecto tiene value="" → el
   selector :invalid casa SOLO mientras esa opcion (vacia) esta elegida;
   al elegir una opcion real el :invalid deja de casar y vuelve navy.
   Doblamos [data-id] (0,4,2) para vencer el color navy de L243/L631 sin
   !important nuevo. Marca: gris-teal puro del Manual. Append-only.
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] select.elementor-field-textual:invalid {
  color: var(--color-muted-brand);
}

/* ============================================================
   GAP CT-Info (color): los VALORES de Ubicacion (columna izquierda) y
   de los horarios (columna derecha) deben ser NAVY #1e2751 como el
   diseno (/tmp/sec_contacto_info.png: ambas lineas navy, 0px teal),
   igual que los valores de Email y Telefono (que ya son navy porque
   van dentro de un <a>, regla L482-485). Estos spans NO son link, asi
   que heredaban el muted gris-teal #839794 de la regla L475-480.
   Apuntamos a los spans dentro de #ct-info-sec (anade un selector =>
   especificidad (0,4,1) > (0,3,1) de L475, y ademas mas abajo en el
   codigo) => navy SIN tocar font-size (var(--fs-small) 17 OK) NI el
   font-style italic. Append-only, scope doblado, sin !important.
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-info-sec"] [data-id="e1ctinfo"] .elementor-icon-list-text span,
.ayc-native.ayc-native [data-id="ct-info-sec"] [data-id="e1cthour"] .elementor-icon-list-text span {
  color: var(--ayc-navy);
}

/* ============================================================
   GAP CT-Info (image, minor): los 5 iconos deben ser ESTILO LINEA
   /OUTLINE verde (sobre estilo solido), igual que el diseno
   (/tmp/sec_contacto_info.png: sobre fino verde, sin relleno).
   Los glifos Font Awesome son un unico <path> RELLENO; convertirlos a
   fill:none + stroke verde traza la silueta como linea fina. El render
   es 30px de alto sobre un viewBox de 512 => stroke-width ~22 lee como
   ~1.3px (linea fina de marca). Doblamos el [data-id] (0,4,1) para
   vencer el fill solido de L453-458 SIN !important nuevo. Append-only,
   scope doblado. Marca: verde #9dc41a. Sin tocar tamano (30x30 OK).
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctinfo"][data-id="e1ctinfo"] .elementor-icon-list-icon svg,
.ayc-native.ayc-native [data-id="e1cthour"][data-id="e1cthour"] .elementor-icon-list-icon svg,
.ayc-native.ayc-native [data-id="e1ctinfo"][data-id="e1ctinfo"] .elementor-icon-list-icon svg path,
.ayc-native.ayc-native [data-id="e1cthour"][data-id="e1cthour"] .elementor-icon-list-icon svg path {
  fill: none;
  stroke: var(--ayc-green);
  stroke-width: 22;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke; /* mantiene linea ~1px constante */
  paint-order: stroke;
}
/* con non-scaling-stroke el ancho es en px del render: ~1.4px linea fina */
.ayc-native.ayc-native [data-id="e1ctinfo"][data-id="e1ctinfo"] .elementor-icon-list-icon svg path,
.ayc-native.ayc-native [data-id="e1cthour"][data-id="e1cthour"] .elementor-icon-list-icon svg path {
  stroke-width: 1.4px;
}

/* ============================================================
   GAP CT-Info (content, MAJOR): los DOS items de la columna derecha
   (horarios) usan el MISMO glifo calendario (e-far-calendar-alt) en
   _elementor_data => quedan identicos. El diseno los muestra DISTINTOS:
   'Lunes a viernes' = calendario + reloj ; 'Sabados' = calendario +
   WhatsApp. El glifo vive en _elementor_data (no editable aqui), asi que
   diferenciamos via badge compuesto en CSS: un disco verde con reloj
   (item 1) / WhatsApp (item 2) anclado abajo-derecha del calendario.
   La celda .elementor-icon-list-icon ya es position:relative + overflow
   visible (42x30), por lo que el badge ::after se ancla sin overflow.
   nth-child(1)/(2) selecciona cada item. Marca: verde #9dc41a relleno +
   glifo blanco para que el badge LEA distinto sobre el calendario linea.
   Doblamos [data-id] (0,4,1) para asegurar el ancla. Append-only.
   ============================================================ */
/* (Eliminado el badge ::after duplicado: los iconos de horarios YA son reloj/WhatsApp
   nativos en _elementor_data — el ::after pintaba un segundo glifo fantasma.) */

/* ============================================================
   GAP RITMO/ESPACIADO (blocker pageH +347px): compactar el ritmo
   vertical (form + cta + info) para acercar la altura total al PDF
   (~2764px). Todo medido 1:1 contra /tmp/ref_contacto-1.png.
   Append-only, scope doblado. Los paddings de seccion 80/72px vienen
   de Elementor por-data-id; doblamos el [data-id] (0,4,0) para vencer
   sin !important nuevo. Solo RITMO: no se tocan tamanos de fuente.
   ============================================================ */

/* --- FORM: campos mas compactos (alto ~34px vs 46px) ---
   El tema style.css fija 'padding:12px 16px !important' a (0,3,1) sobre
   los input/textarea del form. Vencemos con (0,4,1) + !important (mas
   especifico que el suyo => gana entre !important). */
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] input.elementor-field,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-textual:not(textarea),
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] select.elementor-field {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  /* baja el suelo de min-height:40px de Elementor frontend.css para que el
     campo llegue al ~34px del PDF (pitch ~71px). */
  min-height: 34px !important;
}
/* pitch entre campos ~71px: reduce margin-bottom del field-group + label.
   El label padding-bottom:6px lo fija post-86.css a 'body .elementor-86
   ... > label' (0,4,2)+1elem; vencemos con !important (trivial sobre no-important). */
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group {
  margin-bottom: 8px;
}
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group > label,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-label {
  padding-bottom: 4px !important;
}
/* tarjeta del form: menos aire vertical (PDF ~24px top/bottom) */
.ayc-native.ayc-native [data-id="ct-form-right"][data-id="ct-form-right"] {
  padding-top: 24px;
  padding-bottom: 24px;
}
/* seccion form: padding inferior compacto (PDF ~48px bajo el boton) */
.ayc-native.ayc-native [data-id="ct-form-sec"][data-id="ct-form-sec"] {
  padding-bottom: 48px;
}

/* --- CTA: banda ~390px (PDF) --- */
.ayc-native.ayc-native [data-id="ct-cta-sec"][data-id="ct-cta-sec"] {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* --- intro->form: cerrar el doble respiro (card mb 25 + form pt 20).
   El PDF deja la tarjeta blanca casi pegada al inicio de la banda gris
   del form. Reduce ambos para ajustar la altura total al PDF (~2764). --- */
.ayc-native.ayc-native [data-id="ct-intro-card"][data-id="ct-intro-card"] {
  margin-bottom: 16px;
}
.ayc-native.ayc-native [data-id="ct-form-sec"][data-id="ct-form-sec"] {
  padding-top: 0;
}
/* --- GAP #2 (banda blanca, jun-2026): entre la banda intro (bottom y963) y la
   seccion del form (top y983) aparecia una franja BLANCA ~20px (el body blanco
   asomaba por el GAP de 20px del contenedor flex raiz 'aycnativeroot', que separa
   TODAS sus secciones hijas). El diseno (crop_contacto_cta.png) NO tiene franja:
   la tarjeta blanca se apoya DIRECTO sobre el gris continuo del form. FIX
   localizado (no tocar el gap global del root para no regresionar otros seams):
   subir la seccion del form 20px con margin-top negativo => su banda gris #efefef
   sube hasta tocar el gris #efefef de la banda intro => UNA sola banda gris
   continua, sin franja blanca. (0,4,0) doblando [data-id], carga despues, sin
   !important. --- */
.ayc-native.ayc-native [data-id="ct-form-sec"][data-id="ct-form-sec"] {
  margin-top: -20px;
}

/* --- INFO: banda info+footer compacta (PDF ~763px) --- */
.ayc-native.ayc-native [data-id="ct-info-sec"][data-id="ct-info-sec"] {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ============================================================
   GAP HERO (image): encuadre del EQUIPO AYC. El PDF muestra caras y
   torsos visibles, fuera del degradado navy inferior. 50% 28% deja al
   equipo bajo y oscurecido. Subimos a 50% 40% (NO se toca el archivo de
   imagen, solo el encuadre via background-position). Doblamos [data-id]
   (0,4,0) para vencer el 'center 28%' previo (L538) y el 50% 50% que
   post-86.css inyecta a 0,3,0, sin !important nuevo. Mas abajo => gana.
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-hero-sec"][data-id="ct-hero-sec"][data-id="ct-hero-sec"] {
  /* [2026-08-27] FOTO REAL: ct-hero-ai.jpg se sobrescribió IN-PLACE (mismo nombre →
     cero cambios de referencia en _elementor_data ni en post-86.css) con IMG_3814
     redimensionada a 2000px de ancho: equipo AYC real. Encuadre 40% → 55%: la foto
     nueva tiene a las personas más abajo que la IA anterior.
     .bak: uploads/ayc-photos/ct-hero-ai.jpg.pre-fotos-reales-20260827.bak */
  background-position: center 55%;
}

/* ============================================================
   GAP CT-Info (image, MAJOR): Telefono y Ubicacion ahora usan
   iconos SVG de LINEA propios (selected_icon library:"svg" en
   _elementor_data, attachments 101/102) -> el render ya NO trae
   la clase solida e-fas-phone / e-fas-map-marker-alt (la causa del
   gap) y dibuja un solo trazo fino, como envelope/clock (far) y el
   PDF. Estos SVG tienen path Y circle (el pin). El bloque previo
   L639-655 solo afina 'svg path' a stroke 1.4px; el <circle> del pin
   heredaba stroke-width:22 del 'svg' (L645) => leia como disco solido.
   Extendemos el afinado a CUALQUIER trazo del icono (path/circle/
   line/polyline/rect/polygon/ellipse) para mantener la linea ~1.4px
   verde consistente. Doblamos [data-id] (0,4,1) como el resto.
   Marca: verde #9dc41a. Append-only, scope doblado, sin !important.
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctinfo"][data-id="e1ctinfo"] .elementor-icon-list-icon svg :is(path,circle,line,polyline,rect,polygon,ellipse),
.ayc-native.ayc-native [data-id="e1cthour"][data-id="e1cthour"] .elementor-icon-list-icon svg :is(path,circle,line,polyline,rect,polygon,ellipse) {
  fill: none;
  stroke: var(--ayc-green);
  stroke-width: 1.4px;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ============================================================
   GAP CT-Form (type, MAJOR): la LINEA LEGAL del checkbox debe caber
   en UNA sola linea dentro de la card (~432px), como el diseno
   (/tmp/sec_contacto_form.png @1440: la frase completa 'He leido y
   acepto los Terminos y Condiciones y la Politica de Privacidad' es
   fine-print en 1 sola linea). A --fs-small (17px) la frase mide
   ~554px y ENVUELVE a 2 lineas (medido live: w=402, h=51, 2 lineas,
   lh 25.5px). EXCEPCION fine-print: bajamos SOLO esta linea legal a
   13px (no es un tamano de cuerpo; es letra menuda legal del diseno).
   Mantiene navy + italica + Futura Medium (uniforme). El bloque previo
   L253-264 fija font-size:var(--fs-small) a (0,3,1); este, mas abajo y
   a igual especificidad (0,3,1), vence sin !important. post-86.css NO
   fija font-size en la acceptance label (verificado). Append-only.
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance label {
  /* GAP (type): paso fine-print de la escala. NO --fs-11 (11 esta reservado al
     badge del checklist de servicios, sub-escala/fuera del floor legal). El crop
     del diseno mide la frase legal a ~13px cap-block EN UNA SOLA LINEA dentro de
     la card (~432px). A --fs-legal (14) la frase mide ~456px y ENVUELVE a 2
     lineas; el paso de la escala que CABE en 1 linea (regla del proyecto: 1 linea
     natural sin <br> ni encoger por debajo de la escala) es --fs-13 (token base
     valido, mismo que el fine-print del hero de FAQ). Mantiene navy + italica +
     Futura Medium. */
  font-size: var(--fs-13);
  line-height: 1.4;
}

/* GAP CT-Form (type, MAJOR): los ENLACES Terminos/Politica deben ser
   UNIFORMES con el resto de la frase legal (diseno: italica navy SIN
   subrayado y SIN bold). Live previo: subrayados + font-weight 600 +
   17px (rompian la uniformidad). Igualamos: sin subrayado, peso 500
   (= resto de la linea) y 13px (= fine-print de la linea legal). El
   bloque previo L283-289 fija underline/600/var(--fs-small) a (0,3,1);
   este, mas abajo y a (0,3,1), vence sin !important. */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance a {
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-13);
}

/* ============================================================
   GAP CT-Form (type, minor): los LABELS del form ('Nombre completo',
   'Correo electronico', 'Telefono', '¿Que necesitas?', 'Cuentanos tu
   caso') deben ser peso MEDIUM (Futura Medium ~500) navy — trazos
   FINOS en el recorte (/tmp/zoom_fields.png), NO bold. Live previo:
   font-weight 700 con familia 'Futura Bold' (verificado fw=700) =>
   se veian claramente mas gruesos que el diseno. Pasamos a Futura
   Medium (--ayc-font-body) peso 500 conservando color navy y tamano.
   El bloque previo L194-203 fija 700 + --ayc-font-head a (0,3,1);
   este, mas abajo y a (0,3,1), vence sin !important. post-86.css solo
   fija color/family-global a la label (sin peso por-data-id), no pisa.
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-group > label,
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-label {
  font-family: var(--ayc-font-body);
  font-weight: 500;
}

/* ============================================================
   GAP CT-Info: divisor vertical entre columnas debe ser NAVY
   (#1e2751 token), no el gris claro #D1D5DB previo (L426).
   Override append-only, especificidad doblada
   (.elementor-element.elementor-element) para vencer a la regla
   original sin tocarla. Solo @min-width:768px (layout 2 columnas);
   en mobile las columnas se apilan y el border-left no aplica.
   ============================================================ */
@media (min-width: 768px) {
  .ayc-native.ayc-native .elementor-element.elementor-element[data-id="ct-info-right"] {
    border-left: 1px solid #1e2751;
  }
}

/* ============================================================
   GAP CT-Form (color, FONDO BANDA + RELLENO CAMPOS): post-86.css fija
   el fondo de la seccion a (0,4,0) (lleva :not(.elementor-motion-...))
   y el de los campos a (0,6,0) (.elementor-86 .elementor-element
   .elementor-element-e1ctform .elementor-field-group .elementor-field
   :not(.elementor-select-wrapper)) -> ganaban a las reglas base de este
   archivo (0,3,0 / 0,4,1). Las igualamos/superamos doblando el [data-id]
   y replicando la cadena .elementor-field-group .elementor-field; como
   contacto.css carga DESPUES de post-86.css, a igual especificidad VENCE
   sin !important. Color = #efefef del diseno via --ayc-bg-band.
   ============================================================ */
/* Fondo de la banda del form: (0,4,0) >= post-86 (0,4,0) -> gana por orden */
.ayc-native.ayc-native [data-id="ct-form-sec"][data-id="ct-form-sec"] {
  background: var(--ayc-bg-band);
}
/* Relleno de los campos: (0,6,1) > post-86 (0,6,0) */
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group input.elementor-field,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group textarea.elementor-field,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group .elementor-field-textual {
  background-color: var(--ayc-bg-band);
  border-color: var(--ayc-bg-band);
}
/* GAP (uniformidad select): style.css pinta input/textarea con borde #e0e0e0
   (var --ayc-field-border) via '.elementor-form .elementor-field-group input,
   …textarea' — pero NO incluye <select> en la lista de tipos → el select caia
   al borde #efefef de la regla de arriba y se veia distinto. Igualamos el
   <select> al MISMO borde/radio canonicos que input/textarea. Misma cadena
   (0,6,0/0,6,1) que la regla de arriba + cargada despues → gana. Solo borde,
   se conserva el fondo banda y el chevron navy. */
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group .elementor-select-wrapper select,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group select.elementor-field-textual,
.ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-group select.elementor-field {
  border: 1px solid var(--ayc-field-border);
  border-radius: var(--ayc-field-radius);
}

/* ============================================================
   GAP CT-Form (acceptance, 1 LINEA): a 13px la frase legal cabe NATURAL en
   1 linea dentro de la card (~432px). Aseguramos que el field-group de
   'terms' ocupe el ancho COMPLETO de la fila (flex 1 1 100%) y que la fila
   checkbox+texto no envuelva el bloque (option en fila, sin wrap). No se
   fuerza nowrap en el TEXTO (a 13px ya entra; si en algun ancho menor no
   cupiera, envolveria natural, nunca se desborda).
   ============================================================ */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance {
  flex: 1 1 100%;
  width: 100%;
}
/* Aire de ancho SOLO para esta linea fine-print (regla del proyecto: mas
   ancho, no menos fuente): la frase a 13px mide ~423px; el ancho disponible
   del label era ~402px (campo 432 − checkbox 15 − gap 8 − caja). Reclamamos
   ~24px estrechando el gap checkbox↔texto (8→4) y dando a la fila un margen
   negativo de 10px a cada lado (dentro del padding 36px de la card -> SIN
   desbordar) -> el label dispone de ~426px y la frase cabe en 1 LINEA. */
.ayc-native.ayc-native [data-id="e1ctform"] .elementor-field-type-acceptance .elementor-field-option {
  gap: 4px;
  margin-left: -10px;
  margin-right: -10px;
}

/* ============================================================
   RESPONSIVE FIX — FORM a 1 COLUMNA en TODO el rango TABLET (<=1024).
   Problema: el form (.e-con-inner) se queda en fila desde 768px (reglas
   @min-width:768px de L168/L655). A ~820-900px la tarjeta del form cae a
   ~290px → campos angostos (~220px) y el boton "Enviar mensaje" + la linea
   legal envuelven feo. El diseno pide "campos a ancho completo, usable".
   FIX: apilamos la columna izquierda (texto) sobre la tarjeta del form a 1
   col en TODO el tablet, dando a ambas el ancho COMPLETO. Las reglas
   @min-width:768px (row + width 54/42%) viven MAS ABAJO en el archivo, asi
   que aqui DOBLAMOS el [data-id] (0,4,1/0,4,0) para vencerlas sin !important
   y sin tocar ninguna regla desktop. Solo dentro de @media (max-width:1024px)
   → desktop (>=1025) intacto, byte-identico. La capa <=767 ya apilaba; aqui
   cubrimos la franja 768-1024 que faltaba. Append-only.
   ============================================================ */
@media (max-width: 1024px) {
  .ayc-native.ayc-native [data-id="ct-form-inner"][data-id="ct-form-inner"] > .e-con-inner {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 28px;
  }
  .ayc-native.ayc-native [data-id="ct-form-left"][data-id="ct-form-left"],
  .ayc-native.ayc-native [data-id="ct-form-right"][data-id="ct-form-right"] {
    width: 100%;
    flex: 1 1 100%;
  }
  /* la tarjeta del form ocupa el ancho completo (no se autocentra angosta) */
  .ayc-native.ayc-native [data-id="ct-form-right"][data-id="ct-form-right"] {
    align-self: stretch;
  }
  /* Boton "Enviar mensaje": full-width en tablet/movil → cabe en 1 linea
     (la pastilla a ancho de tarjeta deja sitio de sobra al texto) y se lee
     como CTA intencional. No se toca su font-size (token, invariante). */
  .ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-type-submit {
    justify-content: stretch;
  }
  .ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-type-submit .elementor-button {
    width: 100%;
    flex-basis: 100%;
    align-self: stretch;
    justify-content: center;
  }
}

/* ============================================================
   RESPONSIVE FIX — boton "Enviar mensaje" en 1 LINEA en MOVIL.
   En la card angosta (<=767px, ~207px de contenido) la pastilla full-width
   mide ~207px pero el padding lateral desktop (32px x2 = 64px) deja solo
   ~143px al texto, que necesita ~171px → envuelve a 2 lineas. FIX: reducir
   SOLO el padding lateral (32→16px) y forzar nowrap para que la frase entre
   completa en 1 linea (text 171 + 32 = 203 <= 207). NO se toca el font-size
   (--fs-hdr-btn-sm, token, invariante). Solo @media (max-width:767px) →
   desktop intacto; el rango tablet (>=768) ya tiene boton ancho de sobra.
   Doblamos el [data-id] (0,4,1) para vencer el padding por-data-id sin
   !important. Append-only.
   ============================================================ */
@media (max-width: 767px) {
  .ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-type-submit .elementor-button {
    padding-left: 16px;
    padding-right: 16px;
    white-space: nowrap;
  }
  /* el <span.elementor-button-text> trae white-space:normal propio (Elementor)
     que ignora el nowrap del boton → forzamos nowrap EN el span para que la
     frase no parta. */
  .ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-type-submit .elementor-button .elementor-button-text {
    white-space: nowrap;
  }
}

/* En el movil mas estrecho (<=480px) la card del form baja su padding interno
   a 16px (era 24px) para dar al boton "Enviar mensaje" el ancho que su texto
   necesita en 1 linea; el padding lateral del boton baja a 10px. Sigue siendo
   tactil y legible; NO se toca el font-size. Solo @media (max-width:480px). */
@media (max-width: 480px) {
  .ayc-native.ayc-native [data-id="ct-form-right"][data-id="ct-form-right"] {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ayc-native.ayc-native [data-id="e1ctform"][data-id="e1ctform"] .elementor-field-type-submit .elementor-button {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* RESPONSIVE FIX (jun-2026): en móvil el form quedaba ~255px (columnas ct-form-left/right
   sin estirar dentro de los 375 del inner → align-items:center las encogía), desperdiciando
   ~1/3 del ancho. Se estiran a ancho completo. SOLO ≤767; desktop ≥1025 intacto. */
@media (max-width: 767px) {
  /* el ct-form-inner tenia 60px de padding lateral (come 120px del ancho) -> reducir a 16 */
  .ayc-native.ayc-native [data-id="ct-form-inner"] { padding-left: 16px !important; padding-right: 16px !important; }
  .ayc-native.ayc-native [data-id="ct-form-inner"] > .e-con-inner { align-items: stretch !important; }
  .ayc-native.ayc-native [data-id="ct-form-left"],
  .ayc-native.ayc-native [data-id="ct-form-right"] { width: 100% !important; max-width: 100% !important; }
}

/* ============================================================================
   FORM ZOHO en CONTACTO (#ctzohoform / .ayc-ct-zoho) — integración CRM Zoho con
   el ESTILO del form local de Contacto (2026-06-23). animations.js intercepta
   form[name^="WebToLeads"] → iframe oculto + modal "¡Gracias por contactarnos!"
   (mismo patrón que el Home, ya cargado site-wide).
   ⚠ DESTINO: usa por ahora el rid del WebForm de Advisors. Para que los leads de
   Contacto caigan en su propio Lead Source, reemplazar el rid del <script> en el
   widget ctzohoform por el del WebForm dedicado de Contacto (1 línea).
   ============================================================================ */
.ayc-native .ayc-ct-zoho,
.ayc-native .ayc-ct-zoho .ayc-zoho-material-form { width: 100%; }
.ayc-native .ayc-ct-zoho form { width: 100%; max-width: 100%; }

/* ocultar filas que no van (Lead Source + botón reset) */
.ayc-native .ayc-ct-zoho .zcwf_row:has(#Lead_Source),
.ayc-native .ayc-ct-zoho .zcwf_row.wfrm_fld_dpNn { display: none !important; }
.ayc-native .ayc-ct-zoho input[type="reset"],
.ayc-native .ayc-ct-zoho .zcwf_button[type="reset"] { display: none !important; }

/* cada campo en columna (label arriba), como el form local */
.ayc-native .ayc-ct-zoho .zcwf_row { display: flex !important; flex-direction: column !important; margin: 0 0 16px !important; }
.ayc-native .ayc-ct-zoho .zcwf_col_lab,
.ayc-native .ayc-ct-zoho .zcwf_col_fld { width: 100% !important; padding: 0 !important; margin: 0 !important; float: none !important; }
.ayc-native .ayc-ct-zoho .zcwf_col_lab { margin-bottom: 6px !important; }
.ayc-native .ayc-ct-zoho .zcwf_col_lab,
.ayc-native .ayc-ct-zoho .zcwf_col_lab label {
  /* [R3 #1] !important: Zoho fuerza los labels SIN <label> hijo (Nombre/Correo,
     texto directo en .zcwf_col_lab) a 12px → salían pequeños vs los demás (21px).
     Forzamos a todos a var(--fs-small)=21px navy bold para que sean uniformes. */
  color: var(--ayc-navy) !important; font-family: var(--ayc-font-head) !important;
  font-weight: 700 !important; font-size: var(--fs-small) !important;
}
/* inputs / select / textarea = look local (#efefef + foco verde) */
.ayc-native .ayc-ct-zoho .zcwf_col_fld input[type="text"],
.ayc-native .ayc-ct-zoho .zcwf_col_fld input[type="email"],
.ayc-native .ayc-ct-zoho .zcwf_col_fld input[type="tel"],
.ayc-native .ayc-ct-zoho .zcwf_col_fld select,
.ayc-native .ayc-ct-zoho .zcwf_col_fld textarea {
  width: 100% !important; background: var(--ayc-bg-band); border: 1px solid var(--ayc-field-border);
  border-radius: var(--ayc-field-radius); padding: 12px 14px; font-size: var(--fs-small);
  color: var(--ayc-navy); font-family: var(--ayc-font-body); box-sizing: border-box; box-shadow: none; outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.ayc-native .ayc-ct-zoho .zcwf_col_fld input:focus,
.ayc-native .ayc-ct-zoho .zcwf_col_fld select:focus,
.ayc-native .ayc-ct-zoho .zcwf_col_fld textarea:focus {
  border-color: var(--ayc-green); background: #F4F5F7; box-shadow: 0 0 0 2px rgba(157,196,26,0.18);
}
.ayc-native .ayc-ct-zoho .zcwf_col_fld textarea { resize: vertical; min-height: 88px; }
.ayc-native .ayc-ct-zoho .zcwf_col_fld input::placeholder,
.ayc-native .ayc-ct-zoho .zcwf_col_fld textarea::placeholder { color: var(--ayc-muted); opacity: 1; }
/* asterisco de obligatorio: rojo Zoho → verde de marca */
.ayc-native .ayc-ct-zoho .zcwf_col_lab span,
.ayc-native .ayc-ct-zoho .wfrm_red,
.ayc-native .ayc-ct-zoho .zcwf_col_lab .ptlist { color: var(--ayc-green) !important; }
/* botón Enviar = verde de marca, escala botón */
.ayc-native .ayc-ct-zoho input.formsubmit,
.ayc-native .ayc-ct-zoho .formsubmit.zcwf_button,
.ayc-native .ayc-ct-zoho input[type="submit"] {
  background: var(--ayc-green) !important; color: var(--ayc-white) !important; border: none !important;
  font-family: var(--ayc-font-head) !important; font-weight: 700 !important; font-size: var(--fs-h3) !important;
  border-radius: 6px !important; padding: 12px 32px !important; cursor: pointer !important;
  width: auto !important; min-width: 170px !important; white-space: nowrap !important;
  text-overflow: clip !important; overflow: visible !important; text-indent: 0 !important;
  margin-top: 8px !important; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ayc-native .ayc-ct-zoho input.formsubmit:hover,
.ayc-native .ayc-ct-zoho .formsubmit.zcwf_button:hover,
.ayc-native .ayc-ct-zoho input[type="submit"]:hover {
  background: var(--ayc-green-dark) !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(157,196,26,0.4);
}
/* checkbox términos */
.ayc-native .ayc-ct-zoho input[type="checkbox"] { accent-color: var(--ayc-green); width: 15px; height: 15px; }

/* ============================================================
   GAP #2 (banda blanca HERO→INTRO, ronda 2 jun-2026): el auditor mide una
   franja BLANCA rgb(255,255,255) de EXACTAMENTE 20px (y800–y819) ENTRE el
   fondo del hero (termina y800) y donde arranca el gris de la banda intro.
   CAUSA REAL (no era el seam intro-card↔form, que ya está gris continuo):
   ct-intro-sec tiene margin-top:-36px PERO el gap flex del root (20px) lo
   neutraliza a un solape NETO de solo 16px sobre el hero (introSec.top y784,
   hero.bottom y800 → 16px). El gradiente de fondo, en cambio, deja TRANSPARENTE
   los primeros 36px (y784→y820) → de y800 a y819 la zona transparente queda
   DEBAJO del hero, sobre el body blanco → 20px de blanco. El diseño
   (crop_contacto_introform.png) NO tiene franja: la tarjeta se apoya sobre el
   gris continuo que sube hasta el hero. FIX centralizado, append-only, sin
   <br> ni !important: reducir el tramo transparente del gradiente de 36px a
   16px (= el solape NETO real con el hero) → el gris #efefef arranca EXACTO en
   el borde inferior del hero (y800) y elimina los 20px de blanco. La tarjeta
   sigue solapando el hero en sus 16px superiores (esquinas redondeadas sobre la
   foto, como el diseño). Doblamos el [data-id] (0,4,0) y cargamos al final →
   vence al gradiente base de L133 por orden, igual especificidad.
   ============================================================ */
.ayc-native.ayc-native [data-id="ct-intro-sec"][data-id="ct-intro-sec"] {
  background: linear-gradient(to bottom,
    transparent 0, transparent 16px,
    var(--ayc-bg-band) 16px, var(--ayc-bg-band) 100%);
}