/* Escenas animadas de Soluciones */
.sv-scenes { margin-top: clamp(62px, 8vw, 116px); --sv-ease: cubic-bezier(.2, .8, .2, 1); }
.sv-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sv-scene { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: var(--bg); color: var(--fg); }
.sv-scene.on { visibility: visible; }
.sv-content { position: absolute; top: 0; left: 0; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.sv-cam { position: absolute; inset: 0; }

.sv-kicker { position: absolute; margin: 0; font-weight: 650; letter-spacing: -.035em; line-height: 1; opacity: 0; }
.sv-title { position: absolute; z-index: 1; margin: 0; font-weight: 700; letter-spacing: -.065em; line-height: .9; white-space: nowrap; }
.sv-title span { display: inline-block; opacity: 0; }
.sv-hero { position: absolute; z-index: 2; opacity: 0; }
.sv-hero svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .22)); }
.sv-body { position: absolute; z-index: 3; display: grid; gap: .45em; text-align: left; opacity: 0; }
.sv-body strong { font-weight: 650; letter-spacing: -.045em; line-height: 1.05; }
.sv-body span { font-weight: 450; letter-spacing: -.01em; line-height: 1.4; opacity: .9; }

.sv-ing { position: absolute; z-index: 3; opacity: 0; }
.sv-ing.back { z-index: 1; filter: blur(1.2px); }
.sv-bob { animation: sv-bob var(--bd) ease-in-out infinite alternate; }
.sv-ing svg { display: block; width: 100%; height: auto; transform: rotate(var(--r)); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .25)); }

.sv-play .sv-kicker { animation: sv-fade-up .7s var(--td) both var(--sv-ease); }
.sv-play .sv-title span { animation: sv-rise .8s calc(var(--td) + var(--i) * 45ms) both var(--sv-ease); }
.sv-play .sv-hero { animation: sv-hero-in 1s var(--td) both var(--sv-ease); }
.sv-play .sv-ing { animation: sv-fly-in 1.1s calc(var(--rd) + var(--k) * 90ms) both cubic-bezier(.2, .9, .25, 1.1); }
.sv-play .sv-body { animation: sv-fade-up .8s calc(var(--rd) + .35s) both var(--sv-ease); }
.sv-play.sv-intro .sv-cam { animation: sv-cam-zoom 2.6s both cubic-bezier(.7, 0, .2, 1); }

/* Detalles vivos de cada producto */
.sv-steam path { animation: sv-steam 2.6s ease-in-out infinite; }
.sv-steam path:nth-child(2) { animation-delay: .8s; }
.sv-steam path:nth-child(3) { animation-delay: 1.6s; }
.sv-fizz circle { animation: sv-fizz 2.6s linear infinite; }
.sv-screen { animation: sv-screen 1.8s ease-in-out infinite alternate; }

@keyframes sv-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sv-rise { from { opacity: 0; transform: translateY(90px) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes sv-hero-in { from { opacity: 0; transform: translateY(140px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sv-fly-in {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(-140deg) scale(.3); }
  to { opacity: 1; transform: none; }
}
@keyframes sv-bob { from { transform: translateY(-8px) rotate(-3deg); } to { transform: translateY(10px) rotate(4deg); } }
@keyframes sv-cam-zoom { 0%, 40% { transform: scale(1.45); } 100% { transform: none; } }
@keyframes sv-steam { 0% { opacity: 0; transform: translateY(16px); } 35% { opacity: .8; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes sv-fizz { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translateY(-300px); } }
@keyframes sv-screen { from { opacity: .75; } to { opacity: 1; } }

.sv-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }

.sv-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; }
.sv-tab { display: grid; gap: 10px; min-width: 0; border: 0; padding: 18px 0 14px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.sv-tab-num { color: #697066; font-size: 12px; font-weight: 750; }
.sv-tab-name { overflow: hidden; font-size: clamp(22px, 2.2vw, 34px); font-weight: 560; letter-spacing: -.065em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; opacity: .4; transition: opacity .3s ease; }
.sv-tab[aria-selected="true"] .sv-tab-name, .sv-tab:hover .sv-tab-name { opacity: 1; }
.sv-tab-bar { position: relative; order: -1; height: 3px; overflow: hidden; background: #e3e6df; }
.sv-tab-bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.sv-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (max-width: 760px) {
  .sv-scenes { margin-top: 56px; }
  .sv-stage { aspect-ratio: 9 / 14; }
  .sv-tabs { gap: 0 6px; }
  .sv-tab { gap: 8px; padding: 12px 0 10px; }
  .sv-tab-num { display: none; }
  .sv-tab-name { font-size: 14px; letter-spacing: -.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-kicker, .sv-title span, .sv-hero, .sv-ing, .sv-body { opacity: 1; }
  .sv-play *, .sv-play .sv-cam, .sv-bob, .sv-steam path, .sv-fizz circle, .sv-screen { animation: none !important; }
  .sv-steam path { opacity: .6; }
  .sv-fizz circle { opacity: 0; }
}