/* Teléfono de demostración. Se viste con --tel-ancho y --resalte desde estilos.css. */
.tel { --tel-ancho: 300px; --resalte: #ffe23b; position: relative; width: var(--tel-ancho); aspect-ratio: 9 / 19.2;
  border-radius: calc(var(--tel-ancho) * .15); padding: calc(var(--tel-ancho) * .035); background: #0b0b0d;
  box-shadow: 0 0 0 1.5px #2b2b30, 0 40px 80px -24px rgba(0,0,0,.55), 0 18px 30px -18px rgba(0,0,0,.5); flex: none; }
.tel__pantalla { position: relative; height: 100%; border-radius: calc(var(--tel-ancho) * .12); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 70% 30%, var(--esc-a) 0%, transparent 60%),
    radial-gradient(90% 60% at 20% 85%, color-mix(in srgb, var(--esc-a) 55%, #fff 0%) 0%, transparent 65%),
    linear-gradient(170deg, color-mix(in srgb, var(--esc-b) 70%, var(--esc-a)) 0%, var(--esc-b) 70%);
  transition: background .5s ease; color: #fff; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* Grano de película: da textura de toma real sin usar material de nadie. */
.tel__pantalla::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* El producto del rubro, dibujado (telefono.js → ESCENAS): se ve qué se vende sin fingir una foto de nadie.
   La animación imita un montaje: dos cortes secos a un plano más cerrado, sincronizados con la barra de progreso. */
.tel__escena { position: absolute; left: 8%; right: 8%; top: 21%; aspect-ratio: 1; z-index: 0; pointer-events: none; }
.tel__escena::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--esc-a) 70%, #fff) 0%, transparent 68%); opacity: .55; }
.tel__escena svg { display: block; width: 100%; height: 100%; animation: toma 6.6s linear infinite; transform-origin: 50% 60%; }
@keyframes toma { 0% { transform: scale(1); } 32.9% { transform: scale(1.06); } 33% { transform: scale(1.32) translate(-6%, -4%); }
  65.9% { transform: scale(1.38) translate(-6%, -4%); } 66% { transform: scale(1.12) translate(4%, 2%); } 100% { transform: scale(1.18) translate(4%, 2%); } }
.tel__vapor path { animation: vapor 2.4s ease-in-out infinite; opacity: .55; }
.tel__vapor path:nth-child(2) { animation-delay: .5s; } .tel__vapor path:nth-child(3) { animation-delay: 1s; }
@keyframes vapor { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .7; } 100% { transform: translateY(-10px); opacity: 0; } }
.tel__gota { animation: gota 1.6s cubic-bezier(.5,0,1,1) infinite; }
@keyframes gota { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 85% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
/* Avisa que es una maqueta: nadie debería creer que es el video de un cliente. */
.tel__ejemplo { position: absolute; top: 8%; right: 6%; z-index: 2; padding: .25em .7em; border-radius: 99px; background: rgba(0,0,0,.55);
  color: #fff; font-size: max(10px, calc(var(--tel-ancho) * .036)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tel__progreso { position: absolute; top: 4.5%; left: 6%; right: 6%; display: flex; gap: 4px; }
.tel__progreso i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.tel__progreso i:first-child::after { content: ''; display: block; height: 100%; background: #fff; animation: barra 6.6s linear infinite; transform-origin: left; }
@keyframes barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tel__marca { position: absolute; top: 8%; left: 6%; display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: max(11px, calc(var(--tel-ancho) * .042));
  padding: .22em .7em .22em .3em; border-radius: 99px; background: rgba(0,0,0,.5); }
.tel__marca::before { content: ''; width: calc(var(--tel-ancho) * .075); aspect-ratio: 1; border-radius: 50%; background: var(--esc-a); box-shadow: 0 0 0 2px #fff; }
.tel__precio { position: absolute; z-index: 2; top: 15%; right: 6%; padding: .35em .7em; border-radius: 99px; background: #fff; color: #111;
  font-weight: 800; font-size: calc(var(--tel-ancho) * .055); letter-spacing: -.01em; transform: rotate(-4deg); }
.tel__sub { position: absolute; left: 7%; right: 7%; bottom: 25%; text-align: center; font-weight: 900; text-transform: uppercase;
  font-size: calc(var(--tel-ancho) * .088); line-height: 1.05; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.tel__sub span { display: inline-block; }
.tel__sub.vivo span { animation: palabra .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes palabra { 0% { opacity: 0; transform: translateY(40%) scale(.8); } 60% { color: var(--resalte); } 100% { opacity: 1; transform: none; } }
.tel__cta { position: absolute; left: 7%; right: 7%; bottom: 7%; padding: .8em; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.95); color: #111; font-weight: 800; font-size: max(11px, calc(var(--tel-ancho) * .05)); }
.tel__voz { position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; align-items: center; height: 14px; }
.tel__voz i { width: 3px; border-radius: 2px; background: #fff; height: 40%; animation: voz .9s ease-in-out infinite alternate; }
.tel__voz i:nth-child(2) { animation-delay: .15s } .tel__voz i:nth-child(3) { animation-delay: .3s } .tel__voz i:nth-child(4) { animation-delay: .45s }
@keyframes voz { to { height: 100%; } }
.tel.cambia .tel__pantalla { animation: corte .45s cubic-bezier(.2,.8,.2,1); }
@keyframes corte { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.tel.reposo .tel__escena *, .tel.reposo .tel__voz i, .tel.reposo .tel__progreso i::after,
.tel.pausa .tel__escena *, .tel.pausa .tel__voz i, .tel.pausa .tel__progreso i::after, .tel.pausa .tel__sub span { animation-play-state: paused; }
.tel__pantalla { cursor: pointer; }
/* Control real (teclado y lector de pantalla) para pausar, seguir o repetir el ejemplo; cuelga bajo el teléfono. */
.tel__ctl { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 8px 20px;
  border: 2px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 700 14px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; white-space: nowrap; }
.tel__ctl:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
/* Toma real del rubro (telefono.js → media/<rubro>.mp4). Va DEBAJO de los rótulos: son texto de la página, se leen,
   se traducen y cambian con el rubro sin re-renderizar nada. La escena dibujada solo vuelve si el video falla. */
.tel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #000; }
.tel.con-video .tel__escena { display: none; }
.tel.con-video .tel__pantalla > :not(.tel__video) { z-index: 2; }
/* Velo arriba y abajo: el texto blanco se lee igual sobre una toma clara (el depa) que sobre una oscura (el wok). */
.tel.con-video .tel__pantalla::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 44%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.78) 100%); }
/* Con video, cada barra avanza con su frase (telefono.js → --p) en vez del bucle fijo de 6,6 s. */
.tel.con-video .tel__progreso i::after { content: ''; display: block; height: 100%; background: #fff; transform-origin: left;
  transform: scaleX(var(--p, 0)); animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tel *, .tel *::before, .tel *::after, .tel .tel__pantalla { animation: none !important; transition: none !important; }
}