/* ============================================================
   Einblick KI — Sektion "So funktioniert Einblick KI"
   Estilos de los escenarios animados e interactivos.
   ============================================================ */

.wf {
  --red: var(--ek-red, #C8102E);
  --ink: var(--ek-ink, #1A1A17);
  --muted: var(--ek-muted, #6B6A63);
  --faint: var(--ek-faint, #9C9B92);
  --line: var(--ek-line, #E6E2D8);
  --line2: var(--ek-line-2, #D6D1C4);
  --surface: var(--ek-surface, #FFFFFF);
  --bg: var(--ek-bg, #FAF8F4);
  --bg2: var(--ek-bg-2, #F2EFE7);
  --gain: var(--ek-gain, #1D7A5A);
  --info: var(--ek-info, #1F5FA5);
  --display: var(--ek-display, "Inter", sans-serif);
  --body: var(--ek-body, "Inter", system-ui, sans-serif);

  font-family: var(--body); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; line-height: 1.6;
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem;
}
.wf *, .wf *::before, .wf *::after { box-sizing: border-box; }
.wf-wrap { max-width: 960px; margin: 0 auto; }

.wf-head { text-align: center; max-width: 620px; margin: 0 auto 2rem; }
.wf-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 1rem; }
.wf-eyebrow::before { content:""; width:22px; height:2px; background:var(--red); display:inline-block; }
.wf-title { font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,4.6vw,2.8rem);
  line-height:1.06; letter-spacing:-0.02em; margin:0 0 .75rem; }
.wf-sub { color:var(--muted); font-size:clamp(1rem,2vw,1.15rem); margin:0; }

/* ----- Player shell ----- */
.wf-player { background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.wf-progress { height:3px; background:var(--line); position:relative; }
.wf-progress__fill { position:absolute; inset:0 auto 0 0; width:0; background:var(--red); transition:width .12s linear; }

.wf-stage { position:relative; min-height:510px; padding:2rem 1.5rem; background:
  radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px; }
@media (max-width:600px){ .wf-stage{ min-height:550px; } }

.wf-scene { position:absolute; inset:2rem 1.5rem; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; gap:1.75rem; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease, visibility .45s; }
.wf-scene.is-active { opacity:1; visibility:visible; transform:none; }

/* momento humano: arriba, con calidez */
.wf-human { text-align:center; max-width:580px; flex-shrink:0; }
.wf-human__kicker { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.wf-human__line { font-family:var(--display); font-weight:400; font-size:clamp(1.1rem,2.4vw,1.4rem);
  line-height:1.4; letter-spacing:-0.01em; margin:.6rem 0 0; color:var(--ink); }
.wf-human__line em { font-style:italic; color:var(--red); font-weight:500; }

.wf-canvas { width:100%; max-width:560px; min-height:180px; position:relative;
  flex:1; display:flex; align-items:center; justify-content:center; }

/* resumen técnico: abajo, seco */
.wf-cap { text-align:center; max-width:560px; border-top:1px solid var(--line); padding-top:1rem; flex-shrink:0; }
.wf-cap__desc { color:var(--muted); font-size:14.5px; margin:0; line-height:1.55; }
.wf-cap__desc b { color:var(--ink); font-weight:600; }

/* ----- shared illustration atoms ----- */
.wf-ic { width:20px; height:20px; display:block; }
.wf-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:15px; flex-shrink:0; }
.wf-a-red { background:var(--ek-red-soft,#FBEAEC); color:var(--red); }
.wf-a-blue{ background:var(--ek-info-soft,#E8F0FA); color:var(--info); }
.wf-a-green{background:var(--ek-gain-soft,#E7F2EC); color:var(--gain); }
.wf-a-gray{ background:var(--bg2); color:var(--muted); }

.wf-card { background:var(--surface); border:1px solid var(--line2); border-radius:12px; box-shadow:0 6px 18px rgba(26,26,23,.06); }
.wf-tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--ek-red-soft,#FBEAEC); color:var(--red); }
.wf-chip { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line2);
  border-radius:99px; padding:7px 12px; font-size:13px; color:var(--ink); box-shadow:0 3px 10px rgba(26,26,23,.05); }
.wf-chip .wf-ic { color:var(--red); }

.wf-phone { width:120px; height:184px; border:2px solid var(--ink); border-radius:20px; background:var(--surface);
  position:absolute; right:8%; top:50%; transform:translateY(-50%); padding:12px 10px; }
.wf-phone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34px; height:4px; border-radius:99px; background:var(--line2); }

/* center hub (used in several scenes) */
.wf-hub { width:64px; height:64px; border-radius:18px; background:var(--ink); color:#fff; display:flex;
  align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:24px; }
.wf-hub--red { background:var(--red); }

.wf-arrow { color:var(--line2); }

/* ===== keyframes ===== */
@keyframes wfFlyIn { 0%{opacity:0; transform:translateX(-60px) scale(.9);} 100%{opacity:1; transform:none;} }
@keyframes wfPopUp { 0%{opacity:0; transform:translateY(14px) scale(.96);} 100%{opacity:1; transform:none;} }
@keyframes wfFade  { from{opacity:0;} to{opacity:1;} }
@keyframes wfScan  { 0%{top:6%;} 50%{top:86%;} 100%{top:6%;} }
@keyframes wfCheck { 0%,40%{opacity:0; transform:scale(.4);} 60%{opacity:1; transform:scale(1.15);} 100%{opacity:1; transform:scale(1);} }
@keyframes wfCheckLine { 0%,40%{opacity:0;} 100%{opacity:1;} }
@keyframes wfDissolve { 0%{opacity:1; transform:none;} 100%{opacity:.12; transform:translateY(-10px) scale(.9);} }
@keyframes wfTravel { 0%{opacity:0; transform:translateX(0);} 15%{opacity:1;} 85%{opacity:1;} 100%{opacity:0; transform:translateX(var(--tx,120px));} }
@keyframes wfOrbit { from{transform:rotate(0) translateX(var(--r,96px)) rotate(0);} to{transform:rotate(360deg) translateX(var(--r,96px)) rotate(-360deg);} }
@keyframes wfPulse { 0%,100%{transform:scale(1); opacity:.5;} 50%{transform:scale(1.5); opacity:0;} }
@keyframes wfBounce { 0%,100%{transform:translate(0,0);} 25%{transform:translate(14px,-10px);} 50%{transform:translate(-8px,8px);} 75%{transform:translate(10px,6px);} }
@keyframes wfType { 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

/* scene-gated animations (start fresh when .is-active is added) */
.wf-scene.is-active .anim-fly  { animation: wfFlyIn .6s ease both; }
.wf-scene.is-active .anim-pop  { animation: wfPopUp .55s ease both; }
.wf-scene.is-active .anim-fade { animation: wfFade .8s ease both; }
.wf-scene.is-active .anim-scan { animation: wfScan 3.2s ease-in-out infinite; }
.wf-scene.is-active .anim-check{ animation: wfCheck 1.6s ease both; }
.wf-scene.is-active .anim-diss { animation: wfDissolve 1.8s ease forwards; }
.wf-scene.is-active .anim-travel{ animation: wfTravel 2.6s ease-in-out infinite; }
.wf-scene.is-active .anim-orbit{ animation: wfOrbit 16s linear infinite; }
.wf-scene.is-active .anim-pulse{ animation: wfPulse 2.4s ease-out infinite; }
.wf-scene.is-active .anim-bounce{ animation: wfBounce 5s ease-in-out infinite; }
.wf-scene.is-active .anim-type b{ animation: wfType 1.2s ease-in-out infinite; }

.d1{animation-delay:.15s !important;} .d2{animation-delay:.35s !important;}
.d3{animation-delay:.55s !important;} .d4{animation-delay:.75s !important;}
.d5{animation-delay:.95s !important;} .d6{animation-delay:1.15s !important;}

/* ----- controls ----- */
.wf-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; border-top:1px solid var(--line); background:var(--bg2); }
.wf-dots { display:flex; gap:8px; }
.wf-dot { width:9px; height:9px; border-radius:50%; background:var(--line2); border:none; padding:0; cursor:pointer; transition:all .2s; }
.wf-dot.is-on { background:var(--red); transform:scale(1.25); }
.wf-nav { display:flex; align-items:center; gap:6px; }
.wf-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--line2); background:var(--surface);
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.wf-btn:hover { border-color:var(--red); color:var(--red); }
.wf-count { font-size:13px; color:var(--muted); min-width:38px; text-align:center; font-variant-numeric:tabular-nums; }

@keyframes wfGlowPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(200, 16, 46, 0.2);
    border-color: var(--line2);
  }
  50% {
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.6);
    border-color: var(--red);
  }
}

#wf-next {
  animation: wfGlowPulse 2s infinite ease-in-out;
}

.wf-progress { display: none !important; }
#wf-play { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wf-scene{ transition:none; }
  .wf-scene .anim-scan,.wf-scene .anim-travel,.wf-scene .anim-orbit,.wf-scene .anim-pulse,
  .wf-scene .anim-bounce,.wf-scene .anim-type b { animation:none !important; }
}