/* ==========================================================================
   IA generativa para iglesias (Recursos Worship IA / RW AI) — Landing 2026
   Se carga después de css/styles.css y css/nav.css (mismo sistema que la home:
   tokens, botones, chips, revelado con desenfoque, tema claro/oscuro) y añade
   solo lo propio de esta página (prefijo ia-). Todo plano: sin sombras, glows
   ni degradados (el único degradado es el .text-gradient del titular).
   Textos: recursosworship.com/ia-generativa-para-iglesias/.
   Material: captura real «Nuevo diseño» (assets/ia-generativa/IA-para-iglesias.webp),
   animación real de RW Titler (RW-Titler-Software-de-titulos-en-la-nube.webp) y
   la captura de Apps que ya usan los planes (assets/img/products/apps.webp).
   --------------------------------------------------------------------------
   1. Tokens
   2. Hero
   3. Demo (maqueta de la pantalla «Nuevo diseño»)
   4. Diseño generado (lo comparten la demo y «Para cada área»)
   5. Una misma aplicación + beneficios
   6. Cómo funciona + captura que se expande
   7. Apps
   8. En vivo: RW Titler
   9. Para cada área
   10. Créditos y planes
   11. CTA final
   12. Responsive
   13. Movimiento reducido
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
.ia-page {
  --ia-overlap: clamp(150px, 16vw, 300px);   /* cuánto se superpone la demo al hero */
  /* Colores de la interfaz real (muestreados de la captura de RW AI) */
  --ia-ui: #0f0f0f;
  --ia-ui-side: #0a0a0a;
  --ia-ui-2: #181818;
  --ia-ui-3: #232323;
  --ia-ui-line: rgba(255, 255, 255, 0.08);
  --ia-ui-ink: #f2f2f3;
  --ia-ui-muted: #8f8f96;
  --ia-pick: #8b6bff;                        /* selección y capas */
  --ia-new: #9b3fd8;                         /* botón «Nuevo diseño» (plano) */
}
.ia-page section[id] { scroll-margin-top: 96px; }

/* 2. Hero -------------------------------------------------------------------- */
.ia-hero {
  min-height: 0;
  padding: clamp(136px, 16vh, 176px) 0 calc(var(--ia-overlap) + clamp(56px, 6vw, 96px));
}
.ia-badge { padding-left: 6px; }
.ia-badge-ico { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 999px; background: var(--accent); color: #fff; }
.ia-badge-ico svg { width: 13px; height: 13px; fill: currentColor; }

/* 3. Demo -------------------------------------------------------------------- */
.ia-stage { position: relative; z-index: 3; margin-top: calc(var(--ia-overlap) * -1); }
.ia-mock { position: relative; max-width: 1240px; margin-inline: auto; }
.ia-app {
  position: relative;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  isolation: isolate;
  background: var(--ia-ui);
  color: var(--ia-ui-ink);
  font-size: 13px;
  line-height: 1.3;
  container-type: inline-size;
}
/* Borde fino por encima de todo (plano, sin sombra) */
.ia-app::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); pointer-events: none; }
.ia-app svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ia-bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 14px 0 16px; background: var(--ia-ui-side); border-bottom: 1px solid var(--ia-ui-line); }
.ia-dots { display: flex; gap: 6px; flex: none; }
.ia-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ia-dots i:nth-child(2) { background: #febc2e; }
.ia-dots i:nth-child(3) { background: #28c840; }
.ia-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.ia-app .ia-brand svg, .ia-mini .ia-brand svg { width: 15px; height: 15px; fill: #8fe8ff; stroke: none; }
.ia-avatar { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--ia-pick); color: #fff; font-size: 11px; font-weight: 700; }

.ia-app-body { display: grid; grid-template-columns: 196px minmax(0, 1fr) minmax(0, 300px); height: clamp(460px, 42vw, 580px); }

/* Barra lateral (como la app real) */
.ia-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--ia-ui-side); border-right: 1px solid var(--ia-ui-line); overflow: hidden; }
.ia-new { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 8px; padding: 0 12px; border-radius: 10px; background: var(--ia-new); color: #fff; font-weight: 650; white-space: nowrap; }
.ia-new svg { width: 17px; height: 17px; }
.ia-side-label { margin: 10px 0 4px; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ia-ui-muted); }
.ia-side-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; color: #cfcfd4; font-weight: 500; white-space: nowrap; }
.ia-side-item svg, .ia-side-item img { width: 17px; height: 17px; flex: none; }
.ia-side-item svg { color: var(--ia-ui-muted); }
.ia-side-item.is-active { background: #161616; color: #fff; }
.ia-side-item.is-active svg { color: #fff; }

/* Compositor: «¿Qué vas a crear hoy?» */
/* Columna explícita minmax(0, 1fr): sin ella, los ejemplos (nowrap) ensancharían la columna implícita */
.ia-compose { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 12px; min-width: 0; padding: 24px clamp(16px, 3cqw, 40px); text-align: center; }
.ia-compose > * { max-width: 100%; }
.ia-q { font-size: clamp(22px, 2.7cqw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; }
.ia-q-sub { color: var(--ia-ui-muted); font-size: 13.5px; }
.ia-credits { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px 0 9px; border-radius: 999px; background: #050505; box-shadow: inset 0 0 0 1px var(--ia-ui-line); color: #d6d6db; font-size: 12px; font-weight: 560; }
.ia-coin { width: 14px; height: 14px; border-radius: 999px; background: #f5b301; box-shadow: inset 0 0 0 2px #d79a00; }
.ia-box { display: grid; gap: 12px; width: min(100%, 600px); margin-top: 6px; padding: 14px; border-radius: 18px; background: var(--ia-ui-2); box-shadow: inset 0 0 0 1px var(--ia-ui-line); text-align: left; transition: box-shadow 0.3s var(--ease-ui); }
.ia-box.is-focus { box-shadow: inset 0 0 0 1px rgba(139, 107, 255, 0.55); }
.ia-input { position: relative; min-height: 42px; font-size: 15px; line-height: 1.4; color: var(--ia-ui-ink); }
.ia-typed { white-space: pre-wrap; }
.ia-ph { color: #6c6c73; }
.ia-input.has-text .ia-ph { display: none; }
.ia-caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--ia-ui-ink); animation: caretBlink 1s steps(1) infinite; }
.ia-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ia-opt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #c9c9cf; font-size: 12px; font-weight: 560; white-space: nowrap; }
.ia-opt svg { width: 14px; height: 14px; }
.ia-opt .ia-chev { width: 10px; height: 10px; stroke-width: 1.5; color: var(--ia-ui-muted); }
.ia-opt-icon { width: 30px; padding: 0; justify-content: center; }
.ia-opt.is-on { background: #050505; color: #fff; box-shadow: inset 0 0 0 1px var(--ia-ui-line); }
.ia-opt b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Glifo de proporción del formato elegido */
.ia-ratio { display: inline-block; flex: none; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; transition: width 0.4s var(--ease-quint), height 0.4s var(--ease-quint); }
.ia-ratio[data-fmt="9:16"] { width: 8px; height: 14px; border-radius: 2px; }
.ia-ratio[data-fmt="16:9"] { width: 16px; height: 10px; border-radius: 2px; }
.ia-send { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; flex: none; border-radius: 999px; background: #fff; color: #111; transition: transform var(--t-ui) var(--ease-ui), background-color var(--t-ui); }
.ia-send svg { width: 17px; height: 17px; stroke-width: 2.2; }
.ia-send:hover { background: #e8e8ec; }
.ia-send.is-press { transform: scale(0.86); }
.ia-examples { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; max-width: min(100%, 600px); margin-top: 4px; font-size: 12px; color: var(--ia-ui-muted); }
.ia-chips { display: contents; }
.ia-chip { max-width: 260px; height: 30px; padding: 0 12px; border-radius: 999px; background: #1b172f; color: #d9d4ee; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color var(--t-ui), color var(--t-ui); }
.ia-chip:hover { background: #2a2350; color: #fff; }
.ia-chip[aria-pressed="true"] { background: rgba(139, 107, 255, 0.32); color: #fff; }

/* Vista previa del resultado */
.ia-result { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-width: 0; min-height: 0; padding: 14px; background: var(--ia-ui-side); border-left: 1px solid var(--ia-ui-line); }
.ia-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.ia-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(52, 199, 89, 0.14); color: #6ee7a0; font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: background-color 0.3s, color 0.3s; }
.ia-status i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.ia-status.is-busy { background: rgba(255, 255, 255, 0.08); color: var(--ia-ui-muted); }
.ia-status.is-busy i { animation: iaPulse 0.9s ease-in-out infinite alternate; }
@keyframes iaPulse { from { opacity: 0.3; } to { opacity: 1; } }
.ia-canvas { position: relative; display: grid; place-items: center; min-height: 0; border-radius: 12px; background: #141414; container-type: size; overflow: hidden; }
.ia-canvas .ia-design { --fit: 84; }
.ia-progress { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.ia-progress i { display: block; width: 100%; height: 100%; background: var(--ia-pick); transform: scaleX(0); transform-origin: left; }
.ia-canvas.is-loading .ia-progress { opacity: 1; }
.ia-canvas.is-loading .ia-progress i { transform: scaleX(1); transition: transform var(--gen, 1.3s) var(--ease-ui); }
.ia-canvas.is-loading .ia-design { opacity: 0.18; filter: blur(10px); transform: scale(0.97); }
.ia-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-layers li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--ia-ui-muted); font-size: 11.5px; font-weight: 560; transition: background-color 0.35s var(--ease-quint), color 0.35s var(--ease-quint); }
.ia-layers li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; border: 1.5px solid currentColor; }
.ia-layers li.is-on { background: rgba(139, 107, 255, 0.16); color: #d8ceff; }

/* Notas flotantes (fijas, sin vaivén) */
.ia-note { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 999px; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ia-note-left { left: clamp(24px, 4%, 56px); bottom: -20px; }
.ia-note-right { right: -20px; top: clamp(96px, 13%, 132px); }   /* sobre la zona vacía del lienzo, sin tapar el diseño */
.ia-note svg { width: 16px; height: 16px; fill: none; stroke: var(--accent-fg); stroke-width: 1.5; }
.ia-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }

/* Maqueta estrecha: sin barra lateral; la vista previa pasa debajo */
@container (max-width: 980px) {
  .ia-app-body { grid-template-columns: 168px minmax(0, 1fr) minmax(0, 250px); }
  .ia-opt-x { display: none; }
}
@container (max-width: 760px) {
  .ia-dots { display: none; }
  .ia-app-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ia-side { display: none; }
  .ia-compose { padding: 22px 14px 18px; }
  .ia-result { grid-template-rows: auto 240px auto; border-left: 0; border-top: 1px solid var(--ia-ui-line); }
}
@container (max-width: 460px) {
  .ia-q { font-size: 22px; }
  .ia-credits { display: none; }
  .ia-box { padding: 12px; border-radius: 16px; }
  .ia-input { font-size: 14px; min-height: 60px; }
  .ia-chip { max-width: 100%; }
  .ia-result { grid-template-rows: auto 220px auto; }
}

/* 4. Diseño generado ------------------------------------------------------------
   Pieza tipográfica plana (color sólido + forma + texto) con proporción animada.
   El tamaño sale del contenedor (.ia-canvas / .ia-mini-stage, container-type: size). */
@property --ia-ar { syntax: "<number>"; inherits: true; initial-value: 1; }
.ia-design {
  --ia-ar: 1;
  --fit: 86;
  position: relative;
  width: min(calc(var(--fit) * 1cqw), calc(var(--fit) * 1cqh * var(--ia-ar)));
  aspect-ratio: var(--ia-ar);
  border-radius: 6px;
  background: var(--c, #3b1d9a);
  color: var(--ink, #fff);
  overflow: hidden;
  container-type: size;
  transition: --ia-ar 0.8s var(--ease-quint), background-color 0.6s var(--ease-quint), opacity 0.5s var(--ease-quint), filter 0.5s var(--ease-quint), transform 0.6s var(--ease-quint);
}
/* El texto se mide con el propio diseño (cqmin), no con el lienzo */
.ia-copy { position: absolute; inset: 9cqmin 8cqmin; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3cqmin; }
.ia-design[data-style="center"] .ia-copy { justify-content: center; align-items: center; text-align: center; }
.ia-design[data-style="base"] .ia-copy { align-items: center; text-align: center; }
.ia-copy > * { position: relative; display: block; max-width: 100%; }
.ia-l { outline: 1.5px dashed transparent; outline-offset: 3px; transition: outline-color 0.35s var(--ease-quint); transition-delay: calc(var(--k, 0) * 0.14s); }
.ia-copy small { font-size: max(6px, 5cqmin); font-weight: 650; letter-spacing: 0.16em; opacity: 0.86; }
.ia-copy strong { font-size: 17cqmin; font-weight: 750; line-height: 0.92; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.ia-copy span { font-size: max(6px, 4.6cqmin); font-weight: 600; letter-spacing: 0.07em; opacity: 0.86; }
/* En 16:9 la medida corta es la altura: textos secundarios algo mayores */
.ia-design[data-fmt="16:9"] .ia-copy { gap: 4cqmin; }
.ia-design[data-fmt="16:9"] .ia-copy small { font-size: max(6px, 6.4cqmin); }
.ia-design[data-fmt="16:9"] .ia-copy span { font-size: max(6px, 6cqmin); }
/* Forma decorativa: círculo, anillo, cruz o barra */
.ia-shape { position: absolute; z-index: 0; }
.ia-design[data-shape="circle"] .ia-shape { width: 70cqmin; aspect-ratio: 1; top: -20cqmin; right: -18cqmin; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.ia-design[data-shape="ring"] .ia-shape { width: 74cqmin; aspect-ratio: 1; left: 50%; top: 50%; margin: -37cqmin 0 0 -37cqmin; border-radius: 999px; border: 1.4cqmin solid rgba(255, 255, 255, 0.16); }
.ia-design[data-shape="bar"] .ia-shape { left: 8cqmin; top: 9cqmin; width: 18cqmin; height: 2.4cqmin; border-radius: 2px; background: currentColor; opacity: 0.85; }
.ia-design[data-shape="cross"] .ia-shape { left: 50%; top: 14%; width: 3.2cqmin; height: 46%; margin-left: -1.6cqmin; border-radius: 2px; background: rgba(255, 214, 153, 0.9); }
.ia-design[data-shape="cross"] .ia-shape::before { content: ""; position: absolute; left: 50%; top: 26%; width: 26cqmin; height: 3.2cqmin; margin-left: -13cqmin; border-radius: 2px; background: inherit; }
/* «Separar en capas IA»: cada capa se marca una tras otra */
.ia-design.is-layers .ia-l { outline-color: rgba(255, 255, 255, 0.9); }
.ia-design.is-layers { box-shadow: inset 0 0 0 1.5px var(--ia-pick); }
.ia-design.is-wait { opacity: 0.22; filter: blur(8px); }
.ia-design.is-in { animation: iaDesignIn 0.7s var(--ease-quint) both; }
@keyframes iaDesignIn { from { opacity: 0; filter: blur(10px); transform: scale(0.97); } to { opacity: 1; filter: none; transform: none; } }

/* 5. Una misma aplicación + beneficios ------------------------------------------- */
.ia-works { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.ia-ws { width: 20px; height: 20px; fill: none; stroke: #b9a5ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ia-panel { background: var(--panel); border-radius: var(--r-hero) var(--r-hero) 0 0; padding: clamp(72px, 8vw, 128px) 0 clamp(24px, 3vw, 48px); }
.ia-statement { max-width: 32ch; font-size: clamp(30px, 3.6vw, 54px); }
.ia-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 2.4vw, 40px); margin-top: clamp(48px, 6vw, 88px); }
.ia-benefits li { display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line-2); }
.ia-b-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-fg); }
.ia-b-ico .ico { width: 20px; height: 20px; }
.ia-benefits h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 620; line-height: 1.2; letter-spacing: -0.02em; }
.ia-benefits p { max-width: 32ch; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* 6. Cómo funciona ------------------------------------------------------------------ */
.ia-how { padding-top: var(--space-md); padding-bottom: 0; }  /* la sección de Apps ya deja su espacio arriba */
.ia-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); margin-bottom: clamp(48px, 5vw, 80px); }
.ia-steps li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-2); }
.ia-step-num { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--accent-fg); }
.ia-steps h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 620; line-height: 1.2; letter-spacing: -0.02em; }
.ia-steps p { max-width: 36ch; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ia-brand-ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--accent); color: #fff; }
.ia-brand-ico svg { width: 18px; height: 18px; fill: currentColor; }
/* Captura entera (contain) sobre el negro de la app: la altura fija no mueve la página al expandirse */
.ia-shot { height: clamp(280px, 46vw, 760px); background: #0c0c0c; }
.ia-shot img { object-fit: contain; object-position: 50% 0; }

/* 7. Apps ----------------------------------------------------------------------------- */
.ia-tools-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(12px, 1.2vw, 18px); align-items: stretch; }
.ia-apps { display: flex; flex-direction: column; gap: 24px; min-height: 100%; padding: clamp(24px, 2.4vw, 36px) 0 0 clamp(24px, 2.4vw, 36px); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.ia-apps-copy { display: grid; justify-items: start; gap: 8px; padding-right: clamp(24px, 2.4vw, 36px); }
.ia-apps-copy strong { font-size: clamp(22px, 1.8vw, 28px); font-weight: 620; line-height: 1.12; letter-spacing: -0.025em; }
.ia-apps-copy > span:last-child { color: var(--muted); font-size: 16px; line-height: 1.45; }
.ia-apps-shot { position: relative; flex: 1 1 auto; min-height: clamp(260px, 26vw, 460px); margin-top: auto; border-radius: 16px 0 0 0; overflow: hidden; background: #0b0b0b; }
.ia-apps-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ia-tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.ia-tool { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.2vw, 32px); border-radius: var(--r-lg); background: var(--surface); transition: background-color 0.3s var(--ease-ui); }
.ia-tool:hover { background: var(--surface-2); }
.ia-tool-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-fg); }
.ia-tool-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ia-tool h3 { font-size: 18.5px; font-weight: 620; line-height: 1.2; letter-spacing: -0.02em; }
.ia-tool p { color: var(--muted); font-size: 15.5px; line-height: 1.5; }

/* 8. En vivo: RW Titler ------------------------------------------------------------------ */

/* 9. Para cada área -------------------------------------------------------------------- */
.ia-areas .head { margin-bottom: clamp(32px, 4vw, 56px); }
.ia-area-preview { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); padding: clamp(14px, 1.8vw, 26px); }
.ia-mini { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--ia-ui-2); color: var(--ia-ui-ink); font-size: 13px; line-height: 1.3; }
.ia-mini svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ia-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ia-mini .ia-brand { font-size: 13px; }
.ia-mini .ia-input { min-height: 44px; font-size: 15px; }
.ia-mini .ia-send { width: 30px; height: 30px; }
.ia-mini .ia-send svg { width: 15px; height: 15px; }
.ia-mini-stage { display: grid; place-items: center; min-height: 0; container-type: size; }
.ia-mini-stage .ia-design { --fit: 92; }
.ia-areas-cta { margin-top: clamp(32px, 4vw, 56px); }

/* 10. Créditos y planes -------------------------------------------------------------------- */
.ia-plans { padding-bottom: 0; }  /* la FAQ ya deja su espacio arriba */
.ia-plans-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); align-items: end; padding: clamp(28px, 4.4vw, 72px); border-radius: var(--r-xl); background: var(--surface); }
.ia-plans-head { display: grid; gap: 14px; }
.ia-plans-copy { display: grid; gap: 24px; }
.ia-plans-copy .lead { max-width: 52ch; }

/* 11. CTA final: el titular de la página real es largo, se baja un poco el tamaño */
.ia-cta h2 { font-size: clamp(46px, 6.2vw, 104px); }

/* 12. Responsive ------------------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .ia-note-right { right: -8px; }
  .ia-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-tools-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ia-steps { grid-template-columns: 1fr; }
  .ia-plans-card { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .ia-page { --ia-overlap: 96px; }
  .ia-note { display: none; }
}
@media (max-width: 560px) {
  .ia-benefits, .ia-tool-list { grid-template-columns: 1fr; }
  .ia-benefits li { gap: 10px; }
  .ia-apps-shot { min-height: 220px; }
  .ia-area-preview { aspect-ratio: 4 / 4.6; }
}

/* 13. Movimiento reducido ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ia-caret, .ia-status.is-busy i { animation: none; }
  .ia-design, .ia-design.is-in { animation: none !important; transition: none !important; }
  .ia-l { transition: none; }
}