/* ===== QX · q-cta-final ===== */
.q-ctaFinal{
  --q-blue-950:#003a5c; 
  --q-blue-900:#004C78;
  --q-blue-800:#3286AB;
  --q-ink-800:#243849;
  --q-bg-alt:#F2F6F9;
  --q-radius:24px;
  --q-shadow:0 1px 1px rgba(2,10,20,.06), 0 8px 22px rgba(2,10,20,.10);

  padding-block: clamp(32px,6vw,72px);
}
/* .q-ctaFinal .q-ctaFinal__inner{ max-width:1120px; margin:0 auto; padding:0 16px; } */

/* === Ancho del CTA igual al de las 3 cards === */
.q-ctaFinal{
  /* usa los mismos valores que en q-serv */
  --pad-x: 16px;                          /* padding lateral del inner */
  --card-w: clamp(300px, 31vw, 360px);    /* igual que --q-card-w en q-serv */
  --gap:    clamp(16px, 2.5vw, 28px);     /* igual que --q-gap en q-serv */

  /* 3 columnas + 2 separaciones + paddings laterales */
  --wrap-max: calc(3 * var(--card-w) + 2 * var(--gap) + 2 * var(--pad-x));
}

.q-ctaFinal__inner{
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}


/* Fondos de sección */
.q-ctaFinal.bg-none{ background:transparent; }
.q-ctaFinal.bg-alt{ background:var(--q-bg-alt); }
.q-ctaFinal.bg-gray{ background:#E9EEF2; }
.q-ctaFinal.bg-hero{ background:var(--q-blue-900); color:#fff; }

.q-ctaFinal__box{
  background-color: transparent;
  /* background:#fff; border-radius:var(--q-radius); box-shadow:var(--q-shadow);
  padding: clamp(20px,3.2vw,40px); */
}
.q-ctaFinal.bg-hero .q-ctaFinal__box{
  background:rgba(255,255,255,.08);
  color:#fff;
  backdrop-filter:saturate(1.1) blur(4px);
}

/* Layout: desktop dos columnas; mobile apilado */
.q-ctaFinal__grid{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; }
@media (min-width:900px){
  .q-ctaFinal__grid{ grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(16px,4vw,48px); }
}

/* Alineación opcional por field */
.q-ctaFinal.align-center .q-ctaFinal__copy{ text-align:center; }
@media (min-width:900px){
  .q-ctaFinal.align-center .q-ctaFinal__cta{ justify-content:center; }
}

/* Tipografía */
.q-ctaFinal__title{
  margin:0 0 8px;
  font-weight:800;
  /* font-size: clamp(22px,3.2vw,36px); */
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  line-height:1.15;
  color:var(--q-blue-900);
}
.q-ctaFinal.bg-hero .q-ctaFinal__title{ color:#fff; }

.q-ctaFinal__sub{
  margin:0;
  font-size: clamp(14px,1.25vw,18px);
  line-height:1.6;
  color:var(--q-ink-800);
}
.q-ctaFinal.bg-hero .q-ctaFinal__sub{ color:rgba(255,255,255,.9); }

/* CTA */
.q-ctaFinal__cta{ display:flex; justify-content:center; }
@media (min-width:900px){ .q-ctaFinal__cta{ justify-content:end; } }

.q-ctaFinal__btn{
      font:700 1em/1 var(--q-font, "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif);

  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 24px !important; border-radius:3px !important;
  background:var(--q-blue-950) !important; color:#fff !important; text-decoration:none; 
  box-shadow:0 10px 20px rgba(0,0,0,.12); 
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.q-ctaFinal__btn:hover{ color:#fff !important; border-radius:3px !important;   font:700 1em/1 var(--q-font, "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
 background:var(--q-blue-950) !important; transform:translateY(-1px); box-shadow:0 14px 24px rgba(0,0,0,.16); text-decoration: none; }
.q-ctaFinal__chev{ font-size:1.2em; line-height:1; }



/* === Ensanchar la sección que contiene el CTA (solo esa) === */
/* Requiere navegadores modernos (soportan :has) */
.dnd-section:has(.q-ctaFinal) {
  overflow: visible;                /* por si hay sombras fuera */
}

/* Algunos temas usan .row-fluid como wrapper centrado */
.dnd-section:has(.q-ctaFinal) > .row-fluid {
  max-width: none !important;       /* quitar tope pequeño */
}

/* Ancho del inner del CTA = ancho visual de las 3 cards */
.q-ctaFinal{
  --pad-x: 16px;                               /* mismo padding lateral */
  --card-w: clamp(300px, 31vw, 360px);         /* igual que q-serv */
  --gap:    clamp(16px, 2.5vw, 28px);          /* igual que q-serv */
  --wrap-max: calc(3 * var(--card-w) + 2 * var(--gap) + 2 * var(--pad-x));
}

/* Si el wrapper padre aún centra y limita, salte con márgenes negativos */
.q-ctaFinal__inner{
  max-width: var(--wrap-max);                  /* mismo ancho que cards */
  width: var(--wrap-max);
  margin-inline: auto;
}

/* Fallback: si el contenedor sigue siendo más chico, rompe al viewport
   (alineado y con límites para no tocar bordes) */
@supports not (selector(:has(*))) {
  .q-ctaFinal__inner{
    max-width: min(var(--wrap-max), 100vw - 2*var(--pad-x));
    width: min(var(--wrap-max), 100vw - 2*var(--pad-x));
    margin-inline: auto;
  }
}



/* Quita el tope del wrapper de esa sección */
.q-width-xl > .row-fluid,
.q-width-xl > .content-wrapper,
.q-width-xl > .container {
  max-width: none !important;
}

/* El inner del CTA toma el mismo ancho que las 3 cards */
.q-width-xl .q-ctaFinal__inner{
  max-width: var(--wrap-max);
  width: var(--wrap-max);
  margin-inline:auto;
}


/* ===== q-cta-final · Responsive patch ===== */

/* 1) El inner nunca debe exceder el viewport */
.q-ctaFinal__inner{
  /* usa el ancho visual de las 3 cards (si existe) pero
     NUNCA más que el viewport */
  max-width: min(var(--wrap-max, 1120px), 100vw - 2*var(--pad-x, 16px));
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x, 16px);
}

/* 2) Tablet (≤1024): reduce paddings y tipografías ligeramente */
@media (max-width: 1024px){
  .q-ctaFinal{ --pad-x: 20px; }
  .q-ctaFinal__box{ padding: clamp(18px, 4vw, 36px); }
  .q-ctaFinal__title{ font-size: clamp(22px, 4.8vw, 34px); }
  .q-ctaFinal__sub{ font-size: clamp(14px, 2.2vw, 18px); }
}

/* 3) Breakpoint principal (≤900): apilar y centrar todo */
@media (max-width: 900px){
  .q-ctaFinal__grid{
    grid-template-columns: 1fr;      /* una columna */
    row-gap: 16px;
  }
  .q-ctaFinal__copy{ text-align: center; }
  .q-ctaFinal__cta{ justify-content: center; }
}

/* 4) Móvil (≤640): bordes más suaves y botón cómodo */
@media (max-width: 640px){
  .q-ctaFinal{ --pad-x: 16px; }
  .q-ctaFinal__box{ border-radius: 18px; }
  .q-ctaFinal__btn{
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* 5) Móvil chico (≤420): baja un poco el tamaño del H y body */
@media (max-width: 420px){
  .q-ctaFinal__title{ font-size: clamp(20px, 6.6vw, 28px); }
  .q-ctaFinal__sub{ font-size: clamp(13px, 3.6vw, 16px); }
}