/*
 * Aiden UI · bloque cta-section — CSS module de Arc (registry/blocks/cta-section/cta-section.module.css) traducido a
 * clases aui-cta-section-<parte>, con las MISMAS variables de Arc (kit/foundation-web.css). Acotado a .aui-cta-section.
 *
 *   Arc → aquí: .cta → raíz · .title .description .actions .arrow .linkAction (+ .action, el Button) → -title -description
 *   -actions -arrow -action[data-variant][data-size] · .centeredWrap .centered .note .faces → -centered-wrap -centered
 *   -note -faces · .split .splitCopy .points .stage → -split -split-copy -points -stage · .setup .setupHead .workspaceMark
 *   .setupTitle .setupStatus .progress .steps .step .stepMark .stepLabel .stepFaces → -setup… · .bannerWrap .bannerPad
 *   .banner .bannerText .bannerActions .dismiss → -banner-wrap -banner-pad -banner -banner-text -banner-actions -dismiss
 */

.aui-cta-section { container: aui-cta / inline-size; background: var(--background); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }

.aui-bloque.aui-cta-section .aui-cta-section-title { margin: 0; color: var(--foreground); font-family: var(--font-display); font-size: clamp(1.875rem, 1rem + 3.4cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-wrap: balance; }
.aui-bloque.aui-cta-section .aui-cta-section-description { margin: 0; color: var(--text-secondary); font-size: var(--text-lg); line-height: var(--leading-body); text-wrap: pretty; }
.aui-cta-section .aui-cta-section-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Acciones: enlaces (o botones) con la forma de Button de Arc; la flecha se inclina hacia delante al pasar. */
.aui-cta-section .aui-cta-section-arrow { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-cta-section .aui-cta-section-action:hover .aui-cta-section-arrow { transform: translateX(3px); } }
.aui-cta-section .aui-cta-section-action:focus-visible .aui-cta-section-arrow { transform: translateX(3px); }
.aui-bloque.aui-cta-section .aui-cta-section-action {
  display: inline-flex; height: var(--control-height-lg); align-items: center; justify-content: center; gap: 8px;
  margin: 0; border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 20px;
  font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-decoration: none; text-transform: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.aui-bloque.aui-cta-section .aui-cta-section-action[data-size="sm"] { height: var(--control-height-sm); padding: 0 14px; }
.aui-bloque.aui-cta-section .aui-cta-section-action[data-variant="primary"] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.aui-bloque.aui-cta-section .aui-cta-section-action[data-variant="secondary"] { border-color: var(--border); background: var(--surface); color: var(--foreground); }
@media (hover: hover) and (pointer: fine) {
  .aui-bloque.aui-cta-section .aui-cta-section-action[data-variant="primary"]:hover { opacity: .91; }
  .aui-bloque.aui-cta-section .aui-cta-section-action[data-variant="secondary"]:hover { background: var(--surface-muted); }
}
.aui-bloque.aui-cta-section .aui-cta-section-action[data-variant="secondary"]:focus-visible { background: var(--surface-muted); }
.aui-bloque.aui-cta-section .aui-cta-section-action:active { transform: scale(.97); }

/* Centrada: una sección de cierre sobre una superficie tranquila. */
.aui-cta-section .aui-cta-section-centered-wrap { max-width: 1120px; margin: 0 auto; padding: var(--space-16) var(--space-8); }
.aui-cta-section .aui-cta-section-centered { display: grid; justify-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-surface); padding: var(--space-24) var(--space-8); background: color-mix(in oklab, var(--surface-muted) 45%, var(--surface)); text-align: center; }
.aui-bloque.aui-cta-section .aui-cta-section-centered .aui-cta-section-title { max-width: 18ch; }
.aui-bloque.aui-cta-section .aui-cta-section-centered .aui-cta-section-description { max-width: 34rem; }
.aui-cta-section .aui-cta-section-centered .aui-cta-section-actions { justify-content: center; margin-top: var(--space-4); }
.aui-bloque.aui-cta-section .aui-cta-section-note { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.aui-cta-section .aui-cta-section-faces { display: flex; padding-left: 6px; }
.aui-cta-section .aui-cta-section-faces img { display: block; width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; object-fit: cover; }

/* Partida: el texto junto a una tarjeta de pasos que se completa sola. */
.aui-cta-section .aui-cta-section-split { display: grid; max-width: 1120px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-16); margin: 0 auto; padding: var(--space-24) var(--space-8); }
.aui-cta-section .aui-cta-section-split-copy { display: grid; justify-items: start; gap: var(--space-4); }
.aui-cta-section .aui-cta-section-split-copy .aui-cta-section-actions { margin-top: var(--space-4); }
.aui-bloque.aui-cta-section .aui-cta-section-points { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.aui-bloque.aui-cta-section .aui-cta-section-points li { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.aui-cta-section .aui-cta-section-points svg { flex: none; width: 16px; height: 16px; color: var(--success); }
.aui-cta-section .aui-cta-section-stage { display: grid; min-height: 380px; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-surface); padding: var(--space-8); background: color-mix(in oklab, var(--surface-muted) 55%, var(--surface)); }

.aui-cta-section .aui-cta-section-setup { width: min(100%, 360px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-raised); box-shadow: var(--shadow-raised); }
.aui-cta-section .aui-cta-section-setup-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; }
.aui-cta-section .aui-cta-section-workspace-mark { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 8px; background: var(--foreground); color: var(--background); font-size: var(--text-sm); font-weight: 500; }
.aui-cta-section .aui-cta-section-setup-title { font-size: var(--text-sm); font-weight: 500; }
.aui-cta-section .aui-cta-section-setup-status { display: inline-grid; justify-items: end; margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); }
.aui-cta-section .aui-cta-section-setup-status > span { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); filter: blur(2px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-standard) var(--ease-enter), filter var(--duration-fast) var(--ease-standard); }
.aui-cta-section .aui-cta-section-setup-status > span[data-shown] { opacity: 1; transform: none; filter: blur(0); }
.aui-cta-section .aui-cta-section-setup[data-done] .aui-cta-section-setup-status > span:last-child { color: var(--success); font-weight: 500; }
.aui-cta-section .aui-cta-section-progress { height: 2px; margin: 0 18px; overflow: hidden; border-radius: 1px; background: var(--border); }
.aui-cta-section .aui-cta-section-progress > span { display: block; height: 100%; background: var(--success); transform-origin: left; transition: transform var(--duration-considered) var(--ease-in-out); }
.aui-bloque.aui-cta-section .aui-cta-section-steps { display: grid; gap: 2px; margin: 0; padding: 10px 8px 12px; list-style: none; }
.aui-bloque.aui-cta-section .aui-cta-section-step { display: flex; min-height: 44px; align-items: center; gap: 12px; margin: 0; border-radius: 14px; padding: 0 10px; color: var(--text-muted); font-size: var(--text-sm); transition: color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
.aui-bloque.aui-cta-section .aui-cta-section-step[data-active] { background: var(--surface-muted); color: var(--foreground); }
.aui-bloque.aui-cta-section .aui-cta-section-step[data-done] { color: var(--foreground); }
.aui-cta-section .aui-cta-section-step-mark { position: relative; display: grid; width: 20px; height: 20px; flex: none; place-items: center; border: 1.5px dashed var(--border-strong); border-radius: 50%; color: transparent; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); }
.aui-cta-section .aui-cta-section-step-mark svg { width: 12px; height: 12px; transform: scale(.5); opacity: 0; transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
.aui-cta-section .aui-cta-section-step[data-active] .aui-cta-section-step-mark { border-style: solid; border-color: var(--text-muted); }
.aui-cta-section .aui-cta-section-step[data-done] .aui-cta-section-step-mark { border-style: solid; border-color: var(--success); background: var(--success); color: var(--background); }
.aui-cta-section .aui-cta-section-step[data-done] .aui-cta-section-step-mark svg { transform: scale(1); opacity: 1; }
.aui-cta-section .aui-cta-section-step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-cta-section .aui-cta-section-step-faces { display: flex; margin-left: auto; padding-left: 6px; }
.aui-cta-section .aui-cta-section-step-faces img { display: block; width: 22px; height: 22px; margin-left: -6px; border: 2px solid var(--surface-raised); border-radius: 50%; object-fit: cover; opacity: 0; transform: translateX(-6px) scale(.9); transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.aui-cta-section .aui-cta-section-step:is([data-done], [data-active]) .aui-cta-section-step-faces img { opacity: 1; transform: none; }

/* Banner: una línea que cierra su hueco al descartarla. */
.aui-cta-section .aui-cta-section-banner-wrap { overflow: hidden; }
.aui-cta-section .aui-cta-section-banner-pad { max-width: calc(1120px + 2 * var(--space-8)); margin: 0 auto; padding: var(--space-6) var(--space-8); }
.aui-cta-section .aui-cta-section-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 1px solid var(--border); border-radius: 20px; padding: 10px 10px 10px 20px; background: var(--surface); }
.aui-bloque.aui-cta-section .aui-cta-section-banner-text { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
.aui-bloque.aui-cta-section .aui-cta-section-banner-text strong { color: var(--foreground); font-weight: 500; }
.aui-cta-section .aui-cta-section-banner-text span { color: var(--text-secondary); }
.aui-cta-section .aui-cta-section-banner-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
.aui-bloque.aui-cta-section .aui-cta-section-dismiss { display: grid; width: var(--control-height-sm); height: var(--control-height-sm); place-items: center; margin: 0; border: 0; border-radius: 50%; padding: 0; background: none; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
.aui-cta-section .aui-cta-section-dismiss svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .aui-bloque.aui-cta-section .aui-cta-section-dismiss:hover { background: var(--surface-muted); color: var(--foreground); } }
.aui-bloque.aui-cta-section .aui-cta-section-dismiss:focus-visible { background: var(--surface-muted); color: var(--foreground); }
.aui-bloque.aui-cta-section .aui-cta-section-dismiss:active { transform: scale(.94); }
/* Sin JS el botón de descartar no puede hacer nada: no se enseña hasta que el bloque monta. */
.aui-cta-section:not(.aui-bloque-on) .aui-cta-section-dismiss { visibility: hidden; }

@container aui-cta (max-width: 860px) {
  .aui-cta-section .aui-cta-section-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding: var(--space-16) var(--space-8); }
  .aui-cta-section .aui-cta-section-stage { min-height: 320px; }
}
@container aui-cta (max-width: 560px) {
  .aui-cta-section .aui-cta-section-centered-wrap { padding: var(--space-10) var(--space-4); }
  .aui-cta-section .aui-cta-section-centered { padding: var(--space-16) var(--space-5); border-radius: 28px; }
  .aui-cta-section .aui-cta-section-split { padding: var(--space-12) var(--space-4); }
  .aui-cta-section .aui-cta-section-stage { padding: var(--space-5); border-radius: 28px; }
  .aui-bloque.aui-cta-section .aui-cta-section-description { font-size: var(--text-base); }
  .aui-cta-section .aui-cta-section-actions { width: 100%; flex-direction: column; }
  .aui-cta-section .aui-cta-section-actions > * { width: 100%; }
  .aui-cta-section .aui-cta-section-banner-pad { padding: var(--space-4); }
  .aui-cta-section .aui-cta-section-banner { align-items: flex-start; flex-direction: column; padding: 16px; }
  .aui-cta-section .aui-cta-section-banner-actions { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .aui-cta-section :is(.aui-cta-section-arrow, .aui-cta-section-setup-status > span, .aui-cta-section-progress > span, .aui-cta-section-step, .aui-cta-section-step-mark, .aui-cta-section-step-mark svg, .aui-cta-section-step-faces img) { transition: none; }
  .aui-bloque.aui-cta-section :is(.aui-cta-section-action, .aui-cta-section-dismiss):active { transform: none; }
}

/* aiden: botones en píldora («efecto pila», «borde total»: Alex, 14-nov-2026) — en todas las webs. */
.aui-bloque.aui-cta-section .aui-cta-section-action { border-radius: 999px; }
/* aiden: tipografía de la web, no la de Arc (Alex, 14-nov-2026: «ojo con el texto, debería ser como el de
   la web… ¿no es demasiado delgado?»). Mismos valores que el cierre de siempre (.aiden-page-inicio .cta en
   page-inicio.css) y que los botones .b/.b-lg de shared.css: título en Sora 800 apretado con la segunda línea
   (<em>) en verde, entradilla y botones en Figtree. La forma, los colores y el movimiento siguen siendo Arc. */
.aui-bloque.aui-cta-section .aui-cta-section-title { font-family: var(--fd, 'Sora', system-ui, sans-serif); font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; color: var(--n950, #0A0A09); }
.aui-bloque.aui-cta-section .aui-cta-section-title em { font-style: normal; color: var(--t600, #0E7A67); }
.aui-bloque.aui-cta-section .aui-cta-section-description { font-family: var(--fb, 'Figtree', system-ui, sans-serif); font-size: 16px; line-height: 1.65; color: var(--n500, #63635F); }
.aui-bloque.aui-cta-section .aui-cta-section-action { font-family: var(--fb, 'Figtree', system-ui, sans-serif); font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.aui-cta-section .aui-cta-section-note { font-family: var(--fb, 'Figtree', system-ui, sans-serif); }