/* ============================================================
   wiqo — "solución slider" (Apple-style feature carousel)
   One feature visible at a time; autoplay + progress pills.
   Reuses the dark card visuals from styles-prelaunch.css.
   ============================================================ */

#solucion { padding-top: clamp(48px, 6vh, 76px); padding-bottom: clamp(40px, 5vh, 64px); }
#solucion .sec-head.center { margin-bottom: clamp(18px, 2.6vh, 30px); }
#solucion .sec-head.center h2 { font-size: clamp(30px, 4vw, 48px); }
/* inline app-icon inside the title (replaces the word "Wiqo") */
#solucion .sol-title-inline { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.28em; }
#solucion .title-icon { display: inline-flex; align-self: center; width: 1.12em; height: 1.12em; flex-shrink: 0; }
#solucion .title-icon img { opacity: 0; }
#solucion .title-icon img { width: 100%; height: 100%; border-radius: 22%; display: block; opacity: 0; box-shadow: 0 4px 14px -6px rgba(20,20,40,.4), 0 0 0 1px rgba(0,0,0,.05); }

/* stage */
.slider { position: relative; max-width: 1080px; margin: 0 auto; }
.slider-track { position: relative; height: clamp(420px, 52vh, 520px); }
.sld { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility .5s; pointer-events: none; }
.sld.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* the dark feature panel (one per slide) — uniform height across all slides */
#solucion .sld { padding: 0; }
#solucion .sol-card { position: absolute; inset: 0; width: 100%; max-width: 980px; height: 100%; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 3.4vw, 52px);
  padding: clamp(24px, 2.8vw, 40px); border-radius: 24px; box-shadow: 0 40px 90px -40px rgba(10,10,20,.7); }
/* left column: icon + title + description */
#solucion .sol-card .sc-lead { display: flex; flex-direction: column; gap: 16px; align-self: center; }
#solucion .sol-card .sc-ic { width: 52px; height: 52px; border-radius: 15px; }
#solucion .sol-card .sc-ic svg { width: 27px; height: 27px; }
#solucion .sol-card .sc-body { gap: 12px; }
#solucion .sol-card .sc-t { font-size: clamp(22px, 2.6vw, 30px); }
#solucion .sol-card p { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; }

/* right column: the visual stage — neutralise the absolute side-positioning */
#solucion .sc-stage { position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; height: 100%; min-width: 0; overflow: hidden; }
#solucion .sc-voice,
#solucion .sc-noti-stack,
#solucion .sc-ai-panel,
#solucion .sc-op,
#solucion .sc-mk {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important;
  transform: none !important; margin: 0 auto !important; opacity: 1 !important;
  width: 100% !important; max-width: 360px !important; box-sizing: border-box; }
#solucion .sc-voice .vw-recs { align-items: flex-start; }
#solucion .sc-voice .vw-wave { justify-content: flex-start; }
#solucion .sc-noti-stack .sc-noti { width: 100% !important; }

/* ── shared "fragment of product" panel for the 3 visuals ── */
#solucion .sc-voice,
#solucion .sc-ai-panel,
#solucion .op-wrap-panel {
  background: linear-gradient(180deg, rgba(31,79,238,0.10) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.035) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 20px 50px -26px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 16px 16px 15px !important;
  max-width: 340px !important;
}
/* blue top-light edge */
#solucion .sc-voice::before,
#solucion .sc-ai-panel::before,
#solucion .op-wrap-panel::before {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,79,238,0.85), transparent); }

/* Voice: header (mic + wave) divided from the result list */
#solucion .sc-voice { gap: 0 !important; }
#solucion .sc-voice .vw-wave { height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
#solucion .sc-voice .vw-recs { gap: 9px; }
#solucion .sc-voice .vw-rec { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 7px 10px; width: 100%; box-sizing: border-box; color: #fff !important; }
#solucion .sc-voice .vw-rec, #solucion .sc-voice .vw-rec * { color: #fff !important; }
#solucion .sc-voice .vw-rec .vw-check, #solucion .sc-voice .vw-rec .vw-check * { color: #fff !important; }

/* AI: panel with a header rule under "Wiqo AI" */
#solucion .sc-ai-panel { gap: 0 !important; max-width: 340px !important; }
#solucion .sc-ai-panel .ai-head { margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#solucion .sc-ai-panel .ai-head-t { color: #fff !important; }
#solucion .sc-ai-panel .ai-row { padding: 5px 0; }

/* Operaciones: wrap the op-card in a panel that hints the pipeline columns behind it */
#solucion .op-wrap-panel { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#solucion .op-wrap-panel .op-pipe-bg { position: absolute; inset: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; opacity: .16; pointer-events: none; z-index: 0; }
#solucion .op-wrap-panel .op-pipe-bg span { border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); display: block; }
#solucion .op-wrap-panel .op-pipe-bg span:nth-child(1) { background: linear-gradient(180deg, rgba(31,79,238,0.4), transparent); }
#solucion .op-wrap-panel .op-pipe-bg span:nth-child(2) { background: linear-gradient(180deg, rgba(124,58,237,0.4), transparent); }
#solucion .op-wrap-panel .op-pipe-bg span:nth-child(3) { background: linear-gradient(180deg, rgba(217,119,6,0.4), transparent); }
#solucion .op-wrap-panel .op-pipe-bg span:nth-child(4) { background: linear-gradient(180deg, rgba(34,197,94,0.4), transparent); }
#solucion .op-wrap-panel .op-card { position: relative; z-index: 1; box-shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
  width: 300px; max-width: 100%; box-sizing: border-box; }
#solucion .op-card .op-next-v { display: block; min-height: 1.3em; }
/* fase stepper inside the op-card (fixed layout, only colour/fill change) */
#solucion .op-stepper { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; padding-top: 14px; border-top: 1px solid #F0F0F3; }
#solucion .op-track, #solucion .op-track-fill { position: absolute; top: 19px; height: 2px; border-radius: 2px; }
#solucion .op-track { left: 12.5%; right: 12.5%; background: #E4E4EA; }
#solucion .op-track-fill { left: 12.5%; width: 0%; background: var(--opc); transition: width .5s var(--ease-out), background-color .01s; }
#solucion .op-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; }
#solucion .op-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #D4D4DC inset; }
#solucion .op-slabel { font-size: 8.5px; font-weight: 600; letter-spacing: .01em; color: #9A9AA2; white-space: nowrap; }
/* completed + current steps coloured per phase (snap, no var-transition freeze) */
#solucion .op-card.op-p0 .op-track-fill { width: 0%; }
#solucion .op-card.op-p1 .op-track-fill { width: 25%; }
#solucion .op-card.op-p2 .op-track-fill { width: 50%; }
#solucion .op-card.op-p3 .op-track-fill { width: 75%; }
#solucion .op-card.op-p0 .op-track-fill { background: #2563EB; }
#solucion .op-card.op-p1 .op-track-fill { background: #7C3AED; }
#solucion .op-card.op-p2 .op-track-fill { background: #F59E0B; }
#solucion .op-card.op-p3 .op-track-fill { background: #16A34A; }
/* dot states: ≤ current = filled with phase colour; current = halo */
#solucion .op-card .op-step .op-dot { transition: box-shadow .4s var(--ease-out); }
#solucion .op-card.op-p0 .op-step[data-s="0"] .op-dot { background: #2563EB; box-shadow: 0 0 0 2px #2563EB inset, 0 0 0 4px rgba(37,99,235,.22); }
#solucion .op-card.op-p1 .op-step[data-s="0"] .op-dot,
#solucion .op-card.op-p1 .op-step[data-s="1"] .op-dot { background: #7C3AED; box-shadow: 0 0 0 2px #7C3AED inset; }
#solucion .op-card.op-p1 .op-step[data-s="1"] .op-dot { box-shadow: 0 0 0 2px #7C3AED inset, 0 0 0 4px rgba(124,58,237,.22); }
#solucion .op-card.op-p2 .op-step[data-s="0"] .op-dot,
#solucion .op-card.op-p2 .op-step[data-s="1"] .op-dot,
#solucion .op-card.op-p2 .op-step[data-s="2"] .op-dot { background: #F59E0B; box-shadow: 0 0 0 2px #F59E0B inset; }
#solucion .op-card.op-p2 .op-step[data-s="2"] .op-dot { box-shadow: 0 0 0 2px #F59E0B inset, 0 0 0 4px rgba(245,158,11,.22); }
#solucion .op-card.op-p3 .op-step .op-dot { background: #16A34A; box-shadow: 0 0 0 2px #16A34A inset; }
#solucion .op-card.op-p3 .op-step[data-s="3"] .op-dot { box-shadow: 0 0 0 2px #16A34A inset, 0 0 0 4px rgba(22,163,74,.22); }
#solucion .op-card.op-p0 .op-step[data-s="0"] .op-slabel { color: #2563EB; }
#solucion .op-card.op-p1 .op-step[data-s="1"] .op-slabel { color: #7C3AED; }
#solucion .op-card.op-p2 .op-step[data-s="2"] .op-slabel { color: #F59E0B; }
#solucion .op-card.op-p3 .op-step[data-s="3"] .op-slabel { color: #16A34A; }

/* mini-Kanban (replaces the single op-card) */
#solucion .op-kanban { position: relative; z-index: 1; width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#solucion .opk-col { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 11px; padding: 8px 6px 10px; min-height: 150px; position: relative; }
#solucion .opk-col::before { content: ""; position: absolute; top: 0; left: 9px; right: 9px; height: 2.5px; border-radius: 2px; background: var(--opkc); }
#solucion .opk-head { display: flex; align-items: center; justify-content: center; margin: 7px 2px 8px; }
#solucion .opk-name { font-size: 9.5px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--opkc); text-align: center; line-height: 1.25; }
#solucion .opk-ct { display: none; }
#solucion .opk-card { background: #fff; border-radius: 9px; padding: 8px 7px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); position: absolute; top: 44px;
  transition: all .6s cubic-bezier(0.65,0,0.35,1); }
#solucion .opk-card .opk-top { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
#solucion .opk-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#1f4fee,#14B8A6); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#solucion .opk-av svg { width: 13px; height: 13px; }
#solucion .opk-pl { font-size: 10px; font-weight: 700; color: #0A0A0C; white-space: nowrap; text-align: center; }
#solucion .opk-meta { display: flex; align-items: center; justify-content: center; }
#solucion .opk-tag { font-size: 8px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--opkc, #1f4fee); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
#solucion .opk-val { display: none; }
#solucion .opk-check { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; border-radius: 50%; background: #22C55E; color: #fff; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.34,1.56,.64,1); }
#solucion .opk-check svg { width: 9px; height: 9px; }
#solucion .op-kanban.won .opk-check { opacity: 1; transform: scale(1); }
@media (max-width: 820px) { #solucion .op-kanban { max-width: 360px; } }
/* keep everything inside the dark card with margin from its edges */
#solucion .sol-card { overflow: hidden; }
/* Intermediaciones — reorganised compact: player + request side by side, share full-width below */
/* Intermediaciones — original stacked layout (3 mini-cards), modest scale to fit the card */
#solucion .sc-mk { max-width: 320px !important; width: 100% !important; transform: scale(0.92) !important; transform-origin: center center;
  display: flex !important; flex-direction: column; gap: 10px; }
#solucion .sc-mk .mk-share { margin-top: 18px; }

/* 1 · AI search rows: light text on dark card (loading + done) */
#solucion .ai-tx { color: #C8C8D0 !important; }
#solucion .ai-row.done .ai-tx { color: #fff !important; }

/* 3 · marketplace: white dashed connector from the "Aceptar" button into the share box */
#solucion .mk-share::before {
  left: 85px !important; top: -34px !important; height: 30px !important;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.85) 0 6.43px, transparent 6.43px 12.86px) !important; }
#solucion .mk-share { border: 1px solid rgba(255,255,255,0.85); }

/* badge "Próximamente" stays anchored on slide 5 */
#solucion .sol-card.soon { }

/* controls */
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(16px, 2.4vh, 28px);
  position: relative; z-index: 5; }
.sl-pp { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #CBD0D8; background: #fff; color: #6B7280;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s; }
.sl-pp:hover { border-color: var(--ink-faint); }
.sl-pp::before { content: ""; display: block; }
.sl-pp.playing::before { width: 11px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; box-sizing: border-box; }
.sl-pp.paused::before { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

.sl-dots { display: flex; align-items: center; gap: 9px; }
.sl-dot { height: 7px; border-radius: 980px; background: #C3C8D0; border: none; padding: 0; cursor: pointer; position: relative; overflow: hidden;
  width: 7px; transition: width .45s var(--ease-out), background .3s; }
.sl-dot:hover { background: #9CA3AF; }
.sl-dot.active { width: 56px; background: #C3C8D0; }
.sl-dot .sl-fill { position: absolute; inset: 0; width: 0; background: var(--accent); border-radius: 980px; }
.sl-dot.active .sl-fill.run { transition: width var(--sl-dur, 6s) linear; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .sld { transition: opacity .2s linear; transform: none; }
  .sl-dot .sl-fill { display: none; }
}

@media (max-width: 820px) {
  #solucion { padding-bottom: clamp(12px, 1.5vh, 24px); }
  /* scroll-snap mobile slider: horizontal swipe with peek of adjacent cards */
  .slider { overflow: hidden; }
  .slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 16px; padding: 0 7.5%; height: auto; min-height: 0; scrollbar-width: none; }
  .slider-track::-webkit-scrollbar { display: none; }
  .sld { position: relative; inset: auto; flex: 0 0 85%; opacity: 1; visibility: visible; transform: none;
    scroll-snap-align: center; transition: none; pointer-events: auto; }
  #solucion .sol-card { position: relative; inset: auto; height: auto; min-height: clamp(440px, 64vh, 560px);
    grid-template-columns: 1fr; gap: 6px; text-align: left; }
  #solucion .sc-stage { min-height: 160px; }
  .sl-pp { display: none; }
  .sl-dot .sl-fill { display: none; }
  /* mockups: smaller overall + fix per-slide clipping */
  #solucion .sc-voice, #solucion .sc-ai-panel, #solucion .op-wrap-panel, #solucion .sc-mk { max-width: 300px !important; }
  #solucion .sc-noti-stack { max-width: 332px !important; }
  /* AI search: let the step lines wrap instead of getting cut */
  #solucion .sc-ai-panel .ai-tx { white-space: normal; }
  #solucion .sc-ai-panel .ai-row { align-items: flex-start; }
  /* Operaciones: drop the surrounding bubble so the card can be wider */
  #solucion .op-wrap-panel { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; max-width: 340px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  #solucion .op-wrap-panel::before { display: none; }
  #solucion .op-wrap-panel .op-pipe-bg { display: none; }
  #solucion .op-wrap-panel .op-card { width: 100%; }
  #solucion .op-card .op-slabel { font-size: 7.5px; white-space: normal; line-height: 1.12; text-align: center; }
  #solucion .op-stepper { gap: 3px; }
  /* Notifications: bigger app icon, text closer to it (less gap) */
  #solucion .sc-noti { padding: 10px 12px !important; gap: 11px !important; }
  #solucion .sc-noti .noti-ico { width: 46px; height: 46px; }
  #solucion .sc-noti .noti-ico img { width: 100%; height: 100%; }
  #solucion .sc-noti .noti-title { font-size: 13px; }
  #solucion .sc-noti .noti-sub { font-size: 12.5px; }
  #solucion .sc-noti .noti-meta { font-size: 11px; }
  #solucion .sc-noti .noti-time { font-size: 10px; }
  /* Intermediaciones: shrink whole stack + stack player id (name / verified / role) */
  #solucion .sc-mk { transform: scale(.85) !important; transform-origin: center; gap: 8px !important; }
  #solucion .mk-player .mk-p-top { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: start; }
  #solucion .mk-player .mk-av { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  #solucion .mk-player .mk-p-id { display: contents; }
  #solucion .mk-player .mk-name { grid-column: 2; grid-row: 1; white-space: nowrap; }
  #solucion .mk-player .mk-verified { grid-column: 2; grid-row: 2; justify-self: start; margin: 2px 0; white-space: nowrap; }
  #solucion .mk-player .mk-role { grid-column: 2; grid-row: 3; white-space: nowrap; }
  /* "¿Qué compartes?" chips: keep all three on one line inside the box */
  #solucion .mk-share-opts { flex-wrap: nowrap; gap: 5px; }
  #solucion .mk-chip { font-size: 9.5px; padding: 4px 6px; gap: 4px; white-space: nowrap; }
  #solucion .mk-chip svg { width: 11px; height: 11px; }
}