/* ELEVA LAS VENTAS + ESCENARIOS · un solo bloque compacto (Samuel 19-oct: «está muy larga… ponla sin que nos quite
   tanto espacio» · «todo tipo de escenarios» · «no me gusta el fondo negro» · «métele un fondito de color bonito, o
   algo más dinámico que el cliente neta entienda»). Fondo claro en degradado suave (cielo · lila · durazno), tinta
   oscura, acentos azules. Izquierda el argumento + CTA; derecha un teléfono con el showroom cuya pantalla cambia por
   escenario y la frase que entra palabra por palabra; abajo la cinta de escenarios. Lógica en escenarios.js. */

.ventas{ position:relative; isolation:isolate; overflow:clip; color:var(--ink); padding:clamp(44px,5vw,64px) 0 clamp(36px,4vw,48px); background:#F7F8FC; }
.ventas::before{ content:''; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 48% at 18% 22%, #D7E8FF 0%, rgba(215,232,255,0) 70%),
    radial-gradient(34% 46% at 82% 18%, #ECE3FF 0%, rgba(236,227,255,0) 70%),
    radial-gradient(40% 50% at 66% 92%, #FFE6D6 0%, rgba(255,230,214,0) 70%),
    radial-gradient(30% 40% at 12% 90%, #E2F4FF 0%, rgba(226,244,255,0) 70%);
  animation:ventas-deriva 24s ease-in-out infinite alternate; }
@keyframes ventas-deriva{ from{ transform:translate3d(-2%,-1%,0) rotate(0deg) scale(1); } to{ transform:translate3d(2%,1.5%,0) rotate(4deg) scale(1.06); } }
.ventas-in{ width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,620px); gap:clamp(28px,4vw,64px); align-items:center; }
.ventas-tit{ font-size:clamp(2.1rem,1.3rem + 2.6vw,3.5rem); line-height:1; letter-spacing:-.045em; font-weight:700; text-wrap:balance; }
.ventas-tit em{ display:block; font-style:normal; color:var(--brand); }
.ventas-sub{ margin-top:16px; font-size:var(--fs-sub); color:var(--muted); }
.ventas-btns{ display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; margin-top:clamp(22px,2.6vw,30px); }

/* ── teléfono + frase ── */
.esc-caja{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,40px); align-items:center; }
.esc-cel{ width:clamp(138px,15vw,206px); aspect-ratio:9/18.5; padding:6px; border-radius:clamp(26px,2.6vw,36px); background:#1D1D1F; box-shadow:0 1px 2px rgba(0,0,0,.08),0 34px 60px -28px rgba(30,40,90,.45); }
.esc-cel-pant{ position:relative; height:100%; border-radius:clamp(21px,2.2vw,30px); overflow:hidden; background:#fff; isolation:isolate; }
.esc-cel-pant::before{ content:''; position:absolute; z-index:4; top:7px; left:50%; translate:-50% 0; width:30%; height:clamp(11px,1.2vw,16px); border-radius:999px; background:#1D1D1F; }
.esc-pant{ position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease); }
.esc-pant.on{ opacity:1; z-index:1; }
.esc-pant img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--fx,50%) var(--fy,50%); transform:scale(1.04); transform-origin:var(--fx,50%) var(--fy,50%); }
.esc-pant.on img{ animation:esc-zoom var(--dur,5.2s) linear forwards; }
@keyframes esc-zoom{ from{ transform:scale(1.04); } to{ transform:scale(1.16); } }
.ep-pano{ position:absolute; inset:0; width:100%; height:100%; display:block; background:#EDE8E1; }
.ep-360{ position:absolute; z-index:2; right:8px; bottom:12px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--ink); font-size:.7rem; font-weight:700; box-shadow:0 4px 10px -4px rgba(0,0,0,.3); }
/* pantalla sin render: tarjeta limpia con icono + nombre + renglones de ficha */
.ep-tipo{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px 12px; text-align:center; background:linear-gradient(170deg,#EAF2FE 0%,#F6F2FF 60%,#FFF3EC 100%); }
.ep-tipo b{ font-size:clamp(.78rem,.7rem + .3vw,.95rem); line-height:1.15; letter-spacing:-.015em; text-wrap:balance; }
.ep-tipo i{ display:block; width:78%; height:8px; border-radius:6px; background:rgba(0,113,227,.12); }
.ep-tipo i:nth-of-type(2){ width:62%; } .ep-tipo i:nth-of-type(3){ width:70%; background:var(--brand); opacity:.85; height:clamp(18px,2vw,26px); border-radius:999px; margin-top:4px; }
.esc-ic{ width:clamp(40px,4vw,54px); height:clamp(40px,4vw,54px); border-radius:15px; display:grid; place-items:center; background:var(--brand); color:#fff; box-shadow:0 10px 22px -10px rgba(0,113,227,.7); }
.esc-ic svg{ width:55%; height:55%; }
.esc-tipo.on .esc-ic{ animation:esc-ic .7s var(--spring); }
@keyframes esc-ic{ from{ transform:scale(.5); opacity:0; } to{ transform:none; opacity:1; } }
.esc-barra{ position:absolute; z-index:3; left:0; right:0; bottom:0; height:3px; background:rgba(0,0,0,.08); }
.esc-barra i{ display:block; height:100%; background:var(--brand); transform-origin:left; transform:scaleX(0); }
.esc-barra.on i{ animation:esc-barra var(--dur,5.2s) linear forwards; }
@keyframes esc-barra{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.esc-frases{ display:grid; }
.esc-txt{ grid-area:1/1; align-self:center; opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s; }
.esc-txt.on{ opacity:1; visibility:visible; transition:opacity .3s; }
.esc-pil{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.85); box-shadow:0 1px 3px rgba(0,0,0,.08); font-weight:600; font-size:.82rem; letter-spacing:-.01em; }
.esc-pil::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.esc-frase{ margin-top:12px; font-size:clamp(1.15rem,.85rem + 1.25vw,2.1rem); line-height:1.1; letter-spacing:-.035em; font-weight:700; text-wrap:balance; }
.esc-frase b{ color:var(--brand); font-weight:700; }
/* palabra por palabra (escenarios.js envuelve cada palabra en .w con --w) */
.esc-frase .w{ display:inline-block; opacity:0; transform:translateY(.45em); filter:blur(4px); transition:opacity .45s var(--ease), transform .6s var(--ease), filter .45s var(--ease); transition-delay:calc(var(--w) * 55ms + 80ms); }
.esc-txt.on .w{ opacity:1; transform:none; filter:none; }

/* ── cinta de escenarios ── */
.esc-cinta{ margin-top:clamp(24px,3vw,36px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.esc-pista{ display:flex; width:max-content; }
.esc-lista{ display:flex; gap:8px; padding-right:8px; }
.ventas.vivo .esc-pista{ animation:esc-cinta 48s linear infinite; }
@keyframes esc-cinta{ to{ transform:translateX(-50%); } }
.esc-lista button{ min-height:44px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.72); color:var(--muted); font-size:.86rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); transition:background-color .3s, color .3s, box-shadow .3s; }
.esc-lista button.on{ background:var(--brand); color:#fff; box-shadow:0 8px 18px -8px rgba(0,113,227,.75); }
@media (hover:hover){ .esc-lista button:not(.on):hover{ color:var(--ink); background:#fff; } }

/* pausa (fuera de pantalla, pestaña oculta, puntero encima) */
.ventas.pausa .esc-pant img, .ventas.pausa .esc-barra i, .ventas.pausa .esc-pista, .ventas.pausa::before{ animation-play-state:paused; }
/* sin auto-avance (movimiento reducido o sin JS) */
.ventas:not(.vivo) .esc-pant.on img{ animation:none; }
.ventas:not(.vivo) .esc-barra{ display:none; }
.ventas:not(.vivo) .esc-cinta{ overflow-x:auto; scrollbar-width:none; -webkit-mask-image:none; mask-image:none; padding:0 var(--pad); }
.ventas:not(.vivo) .esc-lista[aria-hidden]{ display:none; }

/* ── teléfono / tableta: texto → teléfono + frase → cinta ── */
@media (max-width:900px){
  .ventas-in{ grid-template-columns:minmax(0,1fr); gap:28px; max-width:640px; }
  .ventas-txt{ text-align:center; }
  .ventas-btns{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .ventas::before, .esc-pant img, .esc-barra i, .esc-pista, .esc-ic{ animation:none !important; }
  .esc-frase .w{ opacity:1; transform:none; filter:none; }
}

/* 19-oct (Samuel: «los showrooms 360 incluyen el sitio web del desarrollo»): se dice claro en el bloque de ventas */
.ventas-incluye{ margin:14px 0 0; }
.ventas-incluye span{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(0,113,227,.18), 0 6px 16px -10px rgba(0,113,227,.4); color:#0071E3; font-weight:600; font-size:15px; }
.ventas-incluye span::before{ content:'✓'; font-weight:700; }