/* ============================================================
   AYC — PREGUNTAS FRECUENTES / FAQ (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 preguntas-frecuentes.css cuando
   la pagina 90 esta en ayc_native_page_ids().
   Escala compacta de marca:
     hero H1 64 · subtitulo/boton 26 · small 17 ·
     grupo H2 44 · pregunta H3 32 · respuesta 22.
   Colores = tokens del Kit / ayc-native.css. Tipografia = Futura (Bold/Medium).
   Estructura: 3 secciones -> faq-hero-sec, faq-list-sec (16 preguntas en 4
   grupos), faq-cta-sec. Lista abierta (NO acordeon).
   Filtro azul del hero recreado como ::before (Contacto pattern):
     linear-gradient azul->navy + opacity:1 (vence el opacity:0.5 que
     Elementor pone al ::before del background_overlay) + z-index:0.
   ============================================================ */

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

/* ============================================================
   1) HERO — foto con FILTRO AZUL de marca + titular a la izquierda
   ============================================================ */
/* Hero: .elementor-element doblada para ganar al post-90.css generado
   (background-position/min-height) sin !important. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-hero-sec"] {
  position: relative;
  min-height: 620px;
  background-size: cover;
  background-position: center 30%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 60px;
  overflow: hidden;
}
/* Filtro azul de marca: azul arriba -> navy abajo (legibilidad), deja ver la foto */
.ayc-native.ayc-native [data-id="faq-hero-sec"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,73,116,0.40) 0%, rgba(30,39,81,0.60) 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="faq-hero-sec"] > .e-con-inner,
.ayc-native.ayc-native [data-id="faq-hero-inner"] { position: relative; z-index: 1; }

.ayc-native.ayc-native [data-id="faq-hero-inner"] {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
}
.ayc-native.ayc-native [data-id="faq-hero-inner"] > .e-con-inner {
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  max-width: 1280px;
}

/* Titular hero — escala hero 64, blanco, alineado a la izquierda */
.ayc-native.ayc-native [data-id="faq-hero-title"] .elementor-heading-title {
  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-hero);
  line-height: 1.12;
  color: var(--ayc-white);
  text-align: left;
  margin: 0;
  max-width: 980px;
  letter-spacing: -0.5px;
}

/* Subtitulo hero — el PDF lo quiere ~32 (medido 1:1, ratio 1.30 vs 26); usa token h2.
   Doblo [data-id] para ganar a .ayc-native.ayc-native h2{font-family:head} de ayc-native.css
   y mantener Futura MEDIUM (cuerpo) en el subtítulo. */
.ayc-native.ayc-native [data-id="faq-hero-sub"][data-id="faq-hero-sub"] .elementor-heading-title {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-hero-desc);   /* TOKEN HERO ESTÁNDAR (34) — igual que el subtítulo de hero de TODA página (servicios-shared $="-hero-sec"). Antes --fs-h2 (tamaño propio inconsistente). */
  line-height: 1.4;
  color: rgba(255,255,255,0.96);
  text-align: left;
  margin: 14px 0 0 0;
  max-width: 820px;
}

/* Disclaimer legal del hero — small 17, blanco translucido (texto legal: NO se cambia) */
.ayc-native.ayc-native [data-id="faq-hero-legal"] { margin-top: 10px; }
.ayc-native.ayc-native [data-id="faq-hero-legal"] p {
  font-family: var(--ayc-font-body);
  font-size: var(--fs-legal);   /* TOKEN LEGAL ESTÁNDAR (14) — igual que el disclaimer de hero compartido. Antes --fs-small (21, tamaño propio inconsistente). */
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255,255,255,0.84);
  margin: 0;
  max-width: 1100px;
  text-align: left;
}

/* ============================================================
   2) LISTA FAQ — fondo blanco, 4 grupos H2 + 16 preguntas abiertas
   ============================================================ */
.ayc-native.ayc-native [data-id="faq-list-sec"] {
  background-color: var(--ayc-white);
  padding-top: 80px;
  padding-bottom: 80px;
}
.ayc-native.ayc-native [data-id="faq-list-inner"] {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.ayc-native.ayc-native [data-id="faq-list-inner"] > .e-con-inner {
  max-width: 1080px;
  width: 100%;
  gap: 60px;
}

/* Titulo de grupo (H2) — tamaño del PDF de FAQ: 38px (entre card 32 y sección 44;
   medido 1:1 contra el diseño). Es el header de grupo de la lista, más grande que
   pregunta/respuesta para dar jerarquía como en el PDF. */
.ayc-native.ayc-native [data-id^="faq-grp-"][data-id$="-title"] .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;   /* [2026-08-24] 800 -> 700: Futura Bold ES 700; pedir 800 sintetiza un faux-bold distorsionado */
  font-size: var(--fs-faq-grp);
  line-height: 1.2;
  color: var(--ayc-navy);
  text-align: left;
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
}

/* Container de lista por grupo — columna, separadores los pone .faq-item */
.ayc-native.ayc-native .faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* Item FAQ — columna pregunta/respuesta + badge numerico via ::before.
   padding-left 58px = 36px badge + 22px gap; separador 1px inferior. */
.ayc-native.ayc-native .faq-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 22px 0 22px 58px;
  border-bottom: 1px solid #E5E7EB;
  max-width: 100%;
  min-width: 0;
}
.ayc-native.ayc-native .faq-item:first-child { padding-top: 14px; }
.ayc-native.ayc-native .faq-item:last-child { border-bottom: none; }
.ayc-native.ayc-native .faq-item > .elementor-widget { margin: 0; width: 100%; }

/* Badge numerico — circulo verde via ::before del container .faq-item */
.ayc-native.ayc-native .faq-item::before {
  position: absolute;
  left: 0;
  top: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ayc-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(157,196,26,0.25);
  font-family: var(--ayc-font-head);
  font-weight: 700;   /* [2026-08-24] 800 -> 700 (faux-bold) */
  font-size: var(--fs-nav-sub);   /* 16px — numeral del badge verde */
  color: var(--ayc-white);
  line-height: 1;
  letter-spacing: -0.2px;
}
.ayc-native.ayc-native .faq-item:first-child::before { top: 16px; }
/* [2026-08-24] NUMERACIÓN POR CONTADOR CSS.
   Antes: 16 reglas .e1-faq-nN con content:"N" hardcodeado → cualquier pregunta
   añadida por el cliente salía con el círculo verde VACÍO (fallo silencioso).
   Ahora el contador reinicia en cada .faq-list, así cada grupo empieza en 1 y
   nunca aparece un número de 2-3 cifras apretado en el círculo de 36px.
   Las clases e1-faq-nN del _elementor_data quedan inertes (no estorban). */
.ayc-native.ayc-native .faq-list { counter-reset: aycfaq; }
.ayc-native.ayc-native .faq-item { counter-increment: aycfaq; }
.ayc-native.ayc-native .faq-item::before { content: counter(aycfaq); }

/* Pregunta (widget heading nativo, H3) — lista compacta del PDF: pregunta = cuerpo (22) navy bold */
.ayc-native.ayc-native .faq-q .elementor-heading-title {
  font-family: var(--ayc-font-head);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.32;
  color: var(--ayc-navy);
  margin: 0;
  padding: 0;
  letter-spacing: normal;
  text-align: left;
}

/* Respuesta (widget text-editor nativo) — escala respuesta 22 gris-teal #5F726F */
.ayc-native.ayc-native .faq-a p {
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ayc-muted);
  margin: 0;
  padding: 0;
  text-align: left;
}
/* Negrita dentro de la respuesta (p.ej. "No emitimos asesoria legal.") -> gris-teal muted
   como el cuerpo, igual que el diseno (rgb(130,147,149) = #839794). Gap color cerrado. */
.ayc-native.ayc-native .faq-a strong {
  color: var(--ayc-muted);
  font-weight: 700;
}

/* ============================================================
   3) BANDA CTA — degradado AZUL -> NAVY de marca, boton verde
   ============================================================ */
/* CTA: gana al post-90.css generado (su selector :not() suma una clase extra,
   asi que reforzamos la especificidad con .elementor-element doblada — sin !important). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-cta-sec"] {
  background-color: var(--ayc-navy);
  background-image: linear-gradient(180deg, var(--ayc-blue) 0%, var(--ayc-navy) 100%);
  padding: 90px 20px;
}
.ayc-native.ayc-native [data-id="faq-cta-inner"] {
  max-width: 1080px;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}
.ayc-native.ayc-native [data-id="faq-cta-inner"] > .e-con-inner {
  align-items: center;
  text-align: center;
  max-width: 1080px;
  width: 100%;
}
/* CTA headline — gran titular del PDF (~escala hero 64), blanco. La lista es compacta
   pero la banda CTA es un llamado grande, como en el diseño. */
.ayc-native.ayc-native [data-id="faq-cta-h2"] .elementor-heading-title {
  color: var(--ayc-white);
  font-family: var(--ayc-font-head);
  font-weight: 700;              /* RONDA 8: 800→700 (Futura Bold es 700; 800 = faux-bold) */
  font-size: var(--fs-cta-title); /* RONDA 8: ESTÁNDAR CTA (38), antes --fs-hero(56). Unifica con los CTA de servicio. */
  text-align: center;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.5px;
}
/* CTA subtitulo — ESTÁNDAR CTA --fs-cta-sub (34), blanco translucido, centrado */
.ayc-native.ayc-native [data-id="faq-cta-sub"] .elementor-heading-title {
  color: var(--ayc-white);
  font-family: var(--ayc-font-body);
  font-weight: 500;
  font-size: var(--fs-cta-sub);  /* RONDA 8: 26→34 (--fs-cta-sub), estándar CTA */
  text-align: center;
  line-height: 1.4;
  margin: 14px 0 0 0;
  opacity: 0.92;
}
/* CTA boton — verde de marca, escala boton 26 */
.ayc-native.ayc-native [data-id="faq-cta-btn"] {
  text-align: center;
  width: 100%;
  margin-top: 28px;
}
.ayc-native.ayc-native [data-id="faq-cta-btn"] .elementor-button-wrapper { text-align: center; }
.ayc-native.ayc-native [data-id="faq-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);
  padding: 16px 42px;
  border-radius: 8px;
  border: none;
  display: inline-flex;
  text-decoration: none;
  letter-spacing: normal;
  box-shadow: 0 6px 18px rgba(157,196,26,0.35);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.ayc-native.ayc-native [data-id="faq-cta-btn"] .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(157,196,26,0.45);
  background-color: var(--ayc-green-dark);
  color: var(--ayc-white);
}
.ayc-native.ayc-native [data-id="faq-cta-btn"] .elementor-button-text { color: var(--ayc-white); }

/* ============================================================
   RESPONSIVE — tablet/movil (desktop >=1025 intacto arriba)
   ============================================================ */
@media (max-width: 1024px) {
  .ayc-native.ayc-native [data-id="faq-list-inner"] > .e-con-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
  .ayc-native.ayc-native [data-id="faq-hero-title"] .elementor-heading-title { font-size: var(--fs-h1); }
  .ayc-native.ayc-native [data-id="faq-hero-sub"] .elementor-heading-title { font-size: var(--fs-footer-sm); }
  .ayc-native.ayc-native [data-id^="faq-grp-"][data-id$="-title"] .elementor-heading-title { font-size: var(--fs-h2-xl); }
  .ayc-native.ayc-native .faq-q .elementor-heading-title { font-size: var(--fs-hdr-btn-sm); }
  .ayc-native.ayc-native .faq-a p { font-size: var(--fs-nav-sub); }
  .ayc-native.ayc-native [data-id="faq-cta-h2"] .elementor-heading-title { font-size: var(--fs-h2-lg); }
  .ayc-native.ayc-native [data-id="faq-cta-sub"] .elementor-heading-title { font-size: var(--fs-hdr-btn-sm); }
}

@media (max-width: 767px) {
  .ayc-native.ayc-native [data-id="faq-hero-sec"] {
    min-height: 420px;
    padding-bottom: 32px;
    background-position: 60% 30%;
  }
  .ayc-native.ayc-native [data-id="faq-hero-inner"] > .e-con-inner {
    padding-left: 22px;
    padding-right: 22px;
  }
  .ayc-native.ayc-native [data-id="faq-hero-title"] .elementor-heading-title { font-size: var(--fs-hero-desc); }
  .ayc-native.ayc-native [data-id="faq-hero-sub"] .elementor-heading-title { font-size: var(--fs-nav-legacy); }
  .ayc-native.ayc-native [data-id="faq-hero-legal"] p { font-size: var(--fs-13); }
  .ayc-native.ayc-native [data-id="faq-list-sec"] { padding-top: 50px; padding-bottom: 50px; }
  .ayc-native.ayc-native [data-id="faq-list-inner"] > .e-con-inner {
    padding-left: 18px;
    padding-right: 18px;
    gap: 40px;
  }
  .ayc-native.ayc-native [data-id^="faq-grp-"][data-id$="-title"] .elementor-heading-title { font-size: var(--fs-h3); }
  .ayc-native.ayc-native .faq-item { gap: 6px; padding: 18px 0 18px 44px; }
  .ayc-native.ayc-native .faq-item:first-child { padding-top: 14px; }
  .ayc-native.ayc-native .faq-item::before { width: 30px; height: 30px; font-size: var(--fs-legal); top: 20px; }
  .ayc-native.ayc-native .faq-item:first-child::before { top: 16px; }
  .ayc-native.ayc-native .faq-q .elementor-heading-title { font-size: var(--fs-body); }
  .ayc-native.ayc-native .faq-a p { font-size: var(--fs-nav-legacy); }
  .ayc-native.ayc-native [data-id="faq-cta-sec"] { padding-top: 60px; padding-bottom: 60px; }
  .ayc-native.ayc-native [data-id="faq-cta-h2"] .elementor-heading-title { font-size: var(--fs-section); }
  .ayc-native.ayc-native [data-id="faq-cta-sub"] .elementor-heading-title { font-size: var(--fs-19); }
  .ayc-native.ayc-native [data-id="faq-cta-btn"] .elementor-button { font-size: var(--fs-hdr-btn-sm); padding: 13px 34px; }
}

@media (max-width: 480px) {
  .ayc-native.ayc-native [data-id="faq-hero-sec"] { min-height: 360px; }
  .ayc-native.ayc-native [data-id="faq-hero-title"] .elementor-heading-title { font-size: var(--fs-h3); }
  .ayc-native.ayc-native [data-id="faq-cta-h2"] .elementor-heading-title { font-size: var(--fs-h2-xl); }
}

/* ============================================================
   GAP-FIXES FAQ-HERO (append-only, scope .ayc-native.ayc-native).
   Ground truth = /tmp/sec_faq_hero.png (crop 1440x620 del hero).
   Cierra: H1 a 2 lineas, sin disclaimer en el hero, texto al pie,
   foto del equipo legible arriba (overlay top mas claro).
   Tokens var(--fs-*), sin px hardcodeado en tipografia.
   ============================================================ */

/* HERO FAQ — alineado a los TOKENS de la BASE (jun-2026, pedido cliente: consistencia,
   NO tamaños propios). Título = --fs-page-hero (56, responsive 56/46/32) como el hero de
   TODA página; subtítulo = --fs-hero-desc (34/27/21). max-width 960 → envuelve a 2 líneas
   natural a 56px (sin <br>). .elementor-element doblada gana a la base y post-90.css. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-hero-title"] .elementor-heading-title {
  font-size: var(--fs-page-hero);
  max-width: 960px;
}
.ayc-native.ayc-native .elementor-element.elementor-element.elementor-element[data-id="faq-hero-sub"] .elementor-heading-title {
  font-size: var(--fs-hero-desc);
}

/* (G1) spacing — el bloque texto debe PEGARSE al pie (diseno: ~9px bajo el
   subtitulo en la seccion de 620px). El padding-bottom:60px lo subia ~50px.
   60 -> 10. .elementor-element doblada gana a la regla base (linea 32). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-hero-sec"] {
  padding-bottom: 10px;
}

/* (G4) spacing — borde izquierdo del texto 133->115px (diseno: ~115px en lienzo
   1440). El padding-left:60px del .e-con boxed lo empujaba 18px de mas. 60 -> 42
   (margin auto 73 + 42 = 115). Solo el lado izq; derecho intacto. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-hero-inner"] {
  padding-left: 42px;
}

/* (2) OBSOLETO — RONDA 7 REVIERTE esto: el PDF (pdf_hero_disc2.png) SÍ muestra el
   disclaimer al pie del hero. El bloque RONDA 7 (más abajo) lo re-activa con
   display:block + centrado + ⚠. Se deja la regla anulada (display previo) para que
   la de RONDA 7 gane por orden de cascada; documentado para evitar reintroducir el
   display:none. (No se borra: histórico de la decisión.) */
.ayc-native.ayc-native [data-id="faq-hero-legal"] {
  /* display:none retirado — ver RONDA 7 (disclaimer del hero VISIBLE) */
}

/* (3) MAJOR layout — bloque de texto al pie (flex-end ya activo en el hero y en
   el inner); reforzado para que H1(2 lineas)+subtitulo queden abajo-izquierda y
   la foto del EQUIPO AYC se lea arriba. No se toca background-image. */
.ayc-native.ayc-native [data-id="faq-hero-inner"] > .e-con-inner {
  justify-content: flex-end;
}

/* (4) MINOR color — aclarar el tope del filtro azul (0.40 -> 0.20) para que el
   equipo se vea mas brillante arriba como en la referencia; se mantiene el navy
   abajo para legibilidad del texto. !important permitido en gotcha 5c (overlay). */
.ayc-native.ayc-native [data-id="faq-hero-sec"]::before {
  /* Filtro azul de marca CANÓNICO (unificado 2026-06-23) — top subido 0.20→0.46. */
  background: linear-gradient(180deg, rgba(0,73,116,0.50) 0%, rgba(30,39,81,0.70) 100%) !important;
}

/* (5) MAJOR type — subtitulo del hero a escala h2 (32, token centralizado mas
   cercano a los ~34px medidos en /tmp/sec_faq_hero.png) en vez de h3 (26).
   .elementor-element doblada (0,4,1) para ganar a la regla base (linea 79) y al
   post-90.css. NO hardcode px; var(--fs-h2). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-hero-sub"] .elementor-heading-title {
  font-size: var(--fs-hero-desc);   /* alineado al TOKEN HERO ESTÁNDAR (34); antes --fs-h2 inconsistente */
  /* (6) MINOR type — reafirma Futura Medium (cuerpo). La legacy style.css declara
     `.elementor-widget-heading .elementor-heading-title{font-family:"Futura Bold"...!important}`
     (gotcha 7c: !important vence a no-important sin importar especificidad), por lo
     que esta regla requiere !important para que prevalezca el cuerpo. Weight 500 intacto. */
  font-family: var(--ayc-font-body) !important;
}

/* ============================================================
   GAP-FIXES FAQ RITMO/ESPACIADO (append-only, scope .ayc-native.ayc-native).
   Barrido de spacing: acerca la altura total al PDF (ref /tmp/ref_faq-1.png).
   NO toca tamaños de fuente (38/22/17/64/32 validados). .elementor-element
   doblada donde post-90.css puede pisar paddings de sección. 0 overflow.
   ============================================================ */

/* (A) faq-list-sec — padding vertical 80 -> 60 (hero-bottom -> primer header ~69 PDF).
   Doblo .elementor-element para ganar al post-90.css de paddings de sección. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-list-sec"] {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* (B) faq-list-inner inter-grupo — gap 60 -> 36 (texto->texto ~73px PDF en vez de ~102 live).
   Cierra el grueso del exceso (~+184px) de la sección lista. */
.ayc-native.ayc-native [data-id="faq-list-inner"] > .e-con-inner {
  gap: 36px;
}

/* (C) .faq-item — padding vertical 22 -> 16 para apretar el pitch por-fila
   (item respuesta 2-lineas ~99-104px PDF vs ~131px live). Mantiene 17px respuesta. */
.ayc-native.ayc-native .faq-item {
  padding-top: 16px;
  padding-bottom: 16px;
}
/* badge re-centrado al nuevo padding-top (era top:24 para padding 22) */
.ayc-native.ayc-native .faq-item::before { top: 18px; }
.ayc-native.ayc-native .faq-item:first-child::before { top: 12px; }

/* (D) faq-cta-sec — banda azul ~279px PDF vs 451px live (~+172).
   padding 90 -> 55, y aprieta sub->boton (margin-top 28 -> 24). Doblo .elementor-element. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-cta-sec"] {
  padding-top: 55px;
  padding-bottom: 55px;
}
.ayc-native.ayc-native [data-id="faq-cta-btn"] {
  margin-top: 22px;
}

/* ============================================================
   GAP-FIXES FAQ POLISH RONDA 7 (append-only, scope .ayc-native.ayc-native).
   Ground truth = /tmp/polish/7/{pdf_hero_disc2,pdf_btn,pdf_cta}.png @1440.
   Cierra 4 gaps cosméticos: (1) disclaimer del hero VISIBLE + centrado + ⚠;
   (2) botón CTA "Agenda una consulta" (texto ya en _elementor_data); (3) píldora
   CTA más ajustada; (4) ritmo interno del CTA (gaps + top-weighted).
   Tipografía con tokens var(--fs-*) (sin px literal). 0 overflow.
   ============================================================ */

/* (1) HERO DISCLAIMER — el diseño (pdf_hero_disc2.png) SÍ muestra el disclaimer
   al pie del hero: 1 línea, full-width CENTRADO, gris claro, con ⚠ antepuesto.
   Antes estaba display:none (round previo lo ocultó por error). Se reactiva con
   el patrón del disclaimer del hero compartido (servicios-shared L135): centrado,
   ⚠ vía ::before monocromo blanco, Futura Medium (invariante 2-fuentes), --fs-legal.
   El texto correcto ya se reemplazó en _elementor_data (frase estándar = footer). */
.ayc-native.ayc-native [data-id="faq-hero-legal"] {
  display: block;
  width: 100%;
  align-self: stretch;       /* el inner es flex-start → estira a ancho completo */
  margin-top: 16px;
}
.ayc-native.ayc-native [data-id="faq-hero-legal"] p {
  font-family: var(--ayc-font-body);
  font-weight: 400;
  font-size: var(--fs-legal); /* 14px — token legal centralizado */
  line-height: 1.5;
  color: #d9dee8;             /* gris claro de marca, igual que el disclaimer compartido */
  max-width: none;            /* ancho completo de la banda → cabe en 1 línea */
  text-align: center;         /* PDF: disclaimer CENTRADO al pie del hero */
  margin: 0;
  /* La frase (~1289px @14px) es MÁS ANCHA que la columna boxed del hero (1178px),
     pero MENOR que el lienzo 1440. Patrón del disclaimer compartido (servicios-shared
     L150): convertir el <p> en caja del ancho de su contenido y centrarla sobre el eje
     del hero (left:50% + translateX(-50%)) → 1 sola línea CENTRADA respecto a la banda,
     sin pegarse al borde y sin overflow. El padding-left:42px del inner no la descentra. */
  white-space: nowrap;
  width: max-content;
  position: relative;
  /* el widget (offsetParent) arranca a 42px (padding-left del .e-con outer) y llega al
     borde derecho de la banda. Con left:50% el eje cae ~21px a la derecha del centro de
     la banda → borde-izq medido 28px (objetivo 37 = (1425-1351)/2). Compenso +9px para
     centrar sobre la BANDA (verificado: gap-izq≈gap-der). */
  left: calc(50% + 9px);
  transform: translateX(-50%);
}
/* ocultar el emoji core de WordPress y pintar ⚠ monocromo (presentación texto) */
.ayc-native.ayc-native [data-id="faq-hero-legal"] p img.emoji { display: none; }
.ayc-native.ayc-native [data-id="faq-hero-legal"] p::before {
  content: "\26A0\FE0E ";
  font-family: var(--ayc-font-body);
  color: #fff;               /* cliente: ⚠ siempre blanco puro */
  margin-right: 4px;
}

/* (2) CTA píldora más ajustada — el diseño (pdf_btn.png/pdf_cta.png) muestra una
   píldora ceñida (PDF box 76px @0.491 ≈ 37px alto). El live a 16px arriba/abajo
   daba ~58px. Bajo el padding vertical a 9px → caja ~44-46px, píldora ceñida pero
   legible (texto var(--fs-h3)=26 intacto; el cliente prefiere botones generosos →
   no toco la fuente, solo el padding). .elementor-element doblada (0,4,1) gana a
   la regla base (L284) y a post-90.css. */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-cta-btn"] .elementor-button {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* (3) CTA ritmo interno — el diseño (pdf_cta.png) es TOP-WEIGHTED con gaps internos
   mayores: título→subtítulo ~54px, subtítulo→botón ~59px, más aire arriba que abajo.
   Subo gaps y desplazo el bloque hacia arriba (más padding-top, menos padding-bottom).
   Tokens donde aplica; márgenes/paddings son geometría (no tipografía → px válido). */
.ayc-native.ayc-native .elementor-element.elementor-element[data-id="faq-cta-sec"] {
  padding-top: 70px;
  padding-bottom: 40px;
}
.ayc-native.ayc-native [data-id="faq-cta-sub"] .elementor-heading-title {
  margin-top: 32px;          /* título→subtítulo (era 14) */
}
.ayc-native.ayc-native [data-id="faq-cta-btn"] {
  margin-top: 38px;          /* subtítulo→botón (era 22) */
}

/* ============================================================
   RESPONSIVE FIX — HERO DISCLAIMER (append-only, AL FINAL para ganar
   en cascada a RONDA 7 que lo fija nowrap/max-content/translate).
   Scope .ayc-native.ayc-native, SOLO dentro de @media ≤1024 → DESKTOP intacto.
   Problema: en desktop el disclaimer es 1 línea CENTRADA con
   white-space:nowrap + width:max-content (1351px) + left:50% + translateX(-50%).
   En ≤1024 esa caja de 1351px se SALE del viewport por ambos lados y el texto
   queda RECORTADO/oculto (clip por overflow:hidden del hero). Aquí lo REFLUYO:
   wrap normal, ancho de columna, alineado al texto del hero (izquierda), sin
   translate → TODO el texto legal visible y legible. NO toca tamaños de fuente
   (siguen viniendo de los tokens en los @media de arriba). 0 overflow.
   ============================================================ */
@media (max-width: 1024px) {
  .ayc-native.ayc-native [data-id="faq-hero-legal"] p {
    white-space: normal;        /* deja envolver a varias líneas */
    width: auto;                /* anula width:max-content (1351px) */
    max-width: 100%;            /* no excede la columna del hero */
    left: auto;                 /* anula left:calc(50% + 9px) */
    transform: none;            /* anula translateX(-50%) */
    position: static;           /* vuelve al flujo normal */
    text-align: left;           /* alineado con H1/subtítulo del hero */
    margin-left: 0;
    margin-right: 0;
  }
}


/* ============================================================================
   [2026-08-27] ACORDEÓN EN MÓVIL
   La página pasó de 10 a 29 preguntas (se añadieron las 19 del docx de AYC ADV).
   En desktop sigue siendo LISTA ABIERTA, como el diseño. En móvil, 29 respuestas
   desplegadas hacen el scroll inmanejable → se colapsan y cada pregunta despliega
   la suya.
   El JS ya existía (`initFaqAccordion` en animations.js alterna `.is-open` sobre
   `.faq-item` al pulsar `.faq-q`), pero su CSS vivía en `responsive.css`, que está
   DEQUEUED en las páginas nativas → el acordeón no hacía nada. Esto lo revive.
   ========================================================================== */
@media (max-width: 1024px) {
  /* [2026-08-27] Breakpoint a 1024, no 767: en tablet (768) la página medía
     11601px con todo desplegado, MÁS que en desktop. Es además el breakpoint que
     usaba el acordeón original en responsive.css antes de quedar dequeued. */
  .ayc-native.ayc-native .faq-q {
    cursor: pointer;
    position: relative;
    padding-right: 34px;   /* hueco para el chevron */
    user-select: none;
  }
  /* Chevron indicador */
  .ayc-native.ayc-native .faq-q::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 0.45em;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ayc-green);
    border-bottom: 2px solid var(--ayc-green);
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  .ayc-native.ayc-native .faq-item.is-open .faq-q::after {
    transform: rotate(-135deg);
  }

  /* Respuesta colapsada por defecto. max-height generoso: la respuesta de
     Advance Parole tiene 4 párrafos y no debe recortarse al abrir. */
  .ayc-native.ayc-native .faq-a {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
    margin-top: 0;
  }
  .ayc-native.ayc-native .faq-item.is-open .faq-a {
    max-height: 200em;
    opacity: 1;
    margin-top: 8px;
  }

  /* Ítems más compactos al estar colapsados */
  .ayc-native.ayc-native .faq-item {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* [2026-08-27] BUG RESPONSIVE PREEXISTENTE: los paddings de escritorio se
     acumulaban en móvil y dejaban el texto en 138px de ancho sobre una pantalla
     de 390. Cadena medida: root 16 + faq-list-inner 60+60 (valor de _elementor_data,
     sin override móvil) + e-con-inner 18+18 + faq-grp 10+10 + badge 44.
     Se anulan los laterales en móvil: el gutter ya lo da el root (16px). */
  .ayc-native.ayc-native [data-id="faq-list-inner"],
  .ayc-native.ayc-native [data-id="faq-list-inner"] > .e-con-inner,
  .ayc-native.ayc-native [data-id^="faq-grp-"],
  .ayc-native.ayc-native [data-id^="faq-grp-"] > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* El hueco del badge baja de 44 a 38 (círculo de 28px + 10 de aire). */
  .ayc-native.ayc-native .faq-item { padding-left: 38px; }

  @media (prefers-reduced-motion: reduce) {
    .ayc-native.ayc-native .faq-a,
    .ayc-native.ayc-native .faq-q::after { transition: none; }
  }
}