/* Escena: Páginas web (búsqueda, página que se arma, cita con el agente y avisos al negocio) */
#scene-web { height: 470px; }

#scene-web .sc-wb-root {
  position: relative; isolation: isolate; height: 100%;
  display: flex; flex-direction: column; gap: 16px;
  font-size: .875rem; line-height: 1.35; color: var(--hueso);
}

/* Barra superior: paso actual + etiqueta de ejemplo */
#scene-web .sc-wb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
#scene-web .sc-wb-cap { display: flex; align-items: center; gap: 10px; min-width: 0; }
#scene-web .sc-wb-n {
  flex: none; display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 9px;
  border-radius: 999px; background: var(--ember); color: var(--noche);
  font: 600 .75rem/1 var(--display); letter-spacing: .02em;
}
#scene-web .sc-wb-n.is-ok { background: #3DDC84; }
#scene-web .sc-wb-n svg { width: 14px; height: 14px; }
#scene-web .sc-wb-ct { font: 500 .9375rem/1.25 var(--body); min-width: 0; }
#scene-web .sc-wb-ct.is-in { animation: sc-wb-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
#scene-web .sc-wb-tag {
  flex: none; font-size: .75rem; line-height: 1; color: var(--ceniza);
  padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea);
}

/* Ventana del navegador */
#scene-web .sc-wb-browser {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-radius: 16px; background: #0A0807; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--linea), 0 24px 60px -30px rgba(0, 0, 0, .9);
}
#scene-web .sc-wb-bar {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: #15100D; border-bottom: 1px solid var(--linea);
}
#scene-web .sc-wb-dots { display: flex; gap: 6px; }
#scene-web .sc-wb-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2E241E; }
#scene-web .sc-wb-url {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: 999px; background: #0A0807; font-size: .75rem; color: var(--ceniza);
}
#scene-web .sc-wb-url-ico { display: grid; color: #6B625A; }
#scene-web .sc-wb-url svg { width: 12px; height: 12px; }

#scene-web .sc-wb-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* Paso 1: búsqueda */
#scene-web .sc-wb-search {
  position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transition: opacity .4s ease;
}
#scene-web .sc-wb-search.is-on { opacity: 1; }
#scene-web .sc-wb-field {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 999px;
  background: #15100D; box-shadow: inset 0 0 0 1px var(--linea); font-size: .875rem; min-height: 40px;
}
#scene-web .sc-wb-field svg { width: 15px; height: 15px; color: var(--ceniza); flex: none; }
#scene-web .sc-wb-caret { width: 1.5px; height: 16px; margin-left: -6px; background: var(--sol); animation: sc-wb-blink 1s steps(1) infinite; }
#scene-web .sc-wb-result {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease, box-shadow .25s ease, background .25s ease;
}
#scene-web .sc-wb-result.is-in { opacity: 1; transform: none; }
#scene-web .sc-wb-result.is-hit { background: #1A1310; box-shadow: inset 0 0 0 1px rgba(255, 138, 18, .5); }
#scene-web .sc-wb-result small { font-size: .75rem; color: #3DDC84; }
#scene-web .sc-wb-result b { font-size: .9375rem; font-weight: 600; color: #FFB46B; }
#scene-web .sc-wb-result span { font-size: .8125rem; color: var(--ceniza); }
#scene-web .sc-wb-ghost { display: grid; gap: 6px; padding: 4px 14px; }
#scene-web .sc-wb-ghost i { height: 9px; border-radius: 5px; background: #1A1411; }
#scene-web .sc-wb-ghost i:first-child { width: 60%; }
#scene-web .sc-wb-ghost i:last-child { width: 85%; }

/* Paso 2: la página del negocio se arma bloque por bloque */
#scene-web .sc-wb-site {
  position: absolute; inset: 0; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 16px;
  visibility: hidden; transition: opacity .5s ease, filter .5s ease;
}
#scene-web .is-site .sc-wb-site { visibility: visible; }
#scene-web .sc-wb-site.is-dim { opacity: .3; filter: blur(1.5px); }
#scene-web .sc-wb-b { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
#scene-web .sc-wb-b.is-in { opacity: 1; transform: none; }
#scene-web .sc-wb-nav { display: flex; align-items: center; justify-content: space-between; }
#scene-web .sc-wb-logo { font: 700 .875rem/1 var(--display); letter-spacing: -.01em; }
#scene-web .sc-wb-links { display: flex; gap: 8px; }
#scene-web .sc-wb-links i { width: 32px; height: 7px; border-radius: 4px; background: #2A221D; }
#scene-web .sc-wb-hero {
  padding: 20px 18px; border-radius: 14px; display: grid; justify-items: start; gap: 8px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(252, 74, 3, .22), transparent 60%), #120E0B;
}
#scene-web .sc-wb-h { font: 600 clamp(1.125rem, 2vw, 1.5rem)/1.1 var(--display); letter-spacing: -.03em; max-width: 14ch; }
#scene-web .sc-wb-sub { font-size: .8125rem; color: var(--ceniza); }
#scene-web .sc-wb-btn {
  margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: var(--ember); color: var(--noche);
  font: 600 .8125rem/1 var(--display);
}
#scene-web .sc-wb-btn.is-hit { box-shadow: 0 0 0 4px rgba(255, 138, 18, .25), 0 0 24px rgba(252, 74, 3, .7); }
#scene-web .sc-wb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#scene-web .sc-wb-card {
  display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #120E0B;
  box-shadow: inset 0 0 0 1px var(--linea); font-size: .8125rem; font-weight: 500;
}
#scene-web .sc-wb-card i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, rgba(255, 138, 18, .5), rgba(230, 27, 2, .35)); }

/* Paso 3: el agente agenda la cita */
#scene-web .sc-wb-chat {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: min(236px, 62%);
  display: flex; flex-direction: column; gap: 7px; padding: 0 10px 12px;
  border-radius: 14px; background: #15100D; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--linea), 0 18px 40px -12px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(16px) scale(.96); transform-origin: bottom right;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.15);
}
#scene-web .sc-wb-chat.is-in { opacity: 1; transform: none; }
#scene-web .sc-wb-chat-head {
  display: flex; align-items: center; gap: 7px; margin: 0 -10px 3px; padding: 9px 10px;
  background: #1C1511; border-bottom: 1px solid var(--linea); font-size: .75rem; font-weight: 600;
}
#scene-web .sc-wb-ava {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #2A1F18; color: var(--sol); font: 600 .5625rem/1 var(--display);
}
#scene-web .sc-wb-msg { max-width: 90%; padding: 7px 9px; border-radius: 11px; font-size: .75rem; line-height: 1.35; opacity: 0; }
#scene-web .sc-wb-msg.is-in { animation: sc-wb-pop .5s cubic-bezier(.2, .9, .3, 1.25) both; }
#scene-web .sc-wb-in { align-self: flex-start; background: #241B16; border-bottom-left-radius: 4px; transform-origin: bottom left; }
#scene-web .sc-wb-out { align-self: flex-end; background: var(--ember); color: var(--noche); font-weight: 500; border-bottom-right-radius: 4px; transform-origin: bottom right; }

/* Paso 4: avisos al negocio */
#scene-web .sc-wb-notes {
  position: absolute; left: 14px; top: 14px; z-index: 3; width: min(250px, 66%);
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}
#scene-web .sc-wb-notes li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(21, 16, 13, .96); box-shadow: inset 0 0 0 1px rgba(255, 138, 18, .4), 0 12px 30px -10px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2);
}
#scene-web .sc-wb-notes li.is-in { opacity: 1; transform: none; }
#scene-web .sc-wb-ni {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(252, 74, 3, .16); color: var(--sol);
}
#scene-web .sc-wb-ni svg { width: 16px; height: 16px; }
#scene-web .sc-wb-notes b { display: block; font-size: .8125rem; font-weight: 600; }
#scene-web .sc-wb-notes small { display: block; font-size: .75rem; color: var(--ceniza); }

/* Cursor */
#scene-web .sc-wb-cursor {
  position: absolute; left: 0; top: 0; z-index: 4; width: 18px; height: 22px; margin: -2px 0 0 -2px;
  fill: var(--hueso); stroke: #000; stroke-width: 1.2; stroke-linejoin: round;
  opacity: 0; transition: transform .7s cubic-bezier(.5, 0, .2, 1), opacity .3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
#scene-web .sc-wb-cursor.is-show { opacity: 1; }
#scene-web .sc-wb-cursor.is-click { animation: sc-wb-click .35s ease; }

@media (max-width: 600px) {
  #scene-web { height: 440px; }
  #scene-web .sc-wb-search { padding: 16px; }
  #scene-web .sc-wb-site { padding: 12px 14px 14px; gap: 12px; }
  #scene-web .sc-wb-links { display: none; }
  #scene-web .sc-wb-card { padding: 10px 8px; font-size: .75rem; }
  #scene-web .sc-wb-chat { width: min(220px, 78%); }
  #scene-web .sc-wb-notes { width: min(240px, 84%); }
}

@keyframes sc-wb-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sc-wb-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sc-wb-blink { 50% { opacity: 0; } }
@keyframes sc-wb-click { 50% { scale: .82; } }

@media (prefers-reduced-motion: reduce) {
  #scene-web *, #scene-web *::before, #scene-web *::after { animation: none !important; transition: none !important; }
  #scene-web .sc-wb-msg { opacity: 1; }
}