/* ============================================
   Aviso de lanzamientos premium (2026-09-27, v2 con foto)
   Tarjeta pequeña abajo a la izquierda; el teléfono asoma por arriba.
   Respaldos: css/promo.css.bak-antes-foto-20260927 (solo texto)
              css/promo.css.bak-antes-premium-20260927 (popup grande anterior)
   ============================================ */
.lp-mini{
  --lp:#ff6a00;
  position:fixed; left:18px; bottom:22px; z-index:70;
  width:min(390px, calc(100vw - 100px));
  border-radius:20px;
  background:
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--lp) 26%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(24,26,32,.94), rgba(12,13,17,.96));
  -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 50px rgba(0,0,0,.38), 0 0 40px color-mix(in srgb, var(--lp) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff; font-family:inherit;
  opacity:0; transform:translateY(24px) scale(.97); pointer-events:none;
  transition:opacity .4s ease, transform .55s cubic-bezier(.2,.7,.2,1), bottom .25s ease, box-shadow .5s, background .5s;
}
.lp-mini.is-visible{ opacity:1; transform:none; pointer-events:auto; }

.lp-link{
  display:flex; align-items:center; gap:14px;
  padding:12px 44px 16px 12px;
  color:#fff !important; text-decoration:none !important;
}

/* foto: cuadrito con el color del equipo; el teléfono sale por arriba */
.lp-foto{
  position:relative; flex:none; width:64px; height:64px; border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px rgba(0,0,0,.35);
  transition:background .5s;
}
.lp-foto img{
  position:absolute; left:50%; bottom:6px; height:88px; width:auto; max-width:92px; object-fit:contain;
  translate:-50% 0;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
  animation:lpFlota 4s ease-in-out infinite;
  transition:opacity .26s, transform .26s;
}
@keyframes lpFlota{ 50%{ transform:translateY(-3px) rotate(-2deg); } }

.lp-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; transition:opacity .26s, transform .26s; }
.lp-txt small{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.lp-dot{ width:6px; height:6px; border-radius:50%; background:var(--lp); box-shadow:0 0 10px var(--lp); animation:lpLatido 2s ease-in-out infinite; transition:background .4s; }
@keyframes lpLatido{ 50%{ opacity:.45; transform:scale(.7); } }
.lp-txt b{ font-size:15.5px; font-weight:800; letter-spacing:-.015em; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-txt span{ font-size:12.5px; color:rgba(255,255,255,.72); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* cambio de equipo: el texto sube y la foto se achica un momento */
.lp-cambia .lp-txt{ opacity:0; transform:translateY(8px); }
.lp-cambia .lp-foto img{ opacity:0; transform:translateY(10px) scale(.9); }

.lp-go{
  flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--lp); box-shadow:0 6px 16px color-mix(in srgb, var(--lp) 45%, transparent);
  transition:background .4s, transform .25s;
}
.lp-go svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.lp-link:hover .lp-go{ transform:translateX(3px); }

.lp-x{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border:0; border-radius:50%; background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.65); font-size:11px; cursor:pointer; line-height:1;
}
.lp-x:hover{ background:rgba(255,255,255,.16); color:#fff; }
/* con la X arriba, la flecha va abajo a la derecha */
.lp-go{ position:absolute; right:10px; bottom:14px; }

/* barra fina: cuánto falta para el siguiente equipo */
.lp-barra{ position:absolute; left:16px; right:16px; bottom:6px; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.lp-barra i{ display:block; height:100%; width:100%; background:var(--lp); transform-origin:left; transform:scaleX(0); transition:background .4s; }
@keyframes lpBarra{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.lp-pausa .lp-barra i{ animation-play-state:paused !important; }

@media (max-width:640px){
  .lp-mini{ left:12px; bottom:calc(16px + env(safe-area-inset-bottom)); width:calc(100vw - 88px); border-radius:18px; }
  .lp-link{ padding:10px 40px 14px 10px; gap:12px; }
  .lp-foto{ width:54px; height:54px; border-radius:14px; }
  .lp-foto img{ height:74px; max-width:78px; }
  .lp-txt b{ font-size:14px; }
  .lp-txt span{ font-size:12px; }
  .lp-go{ width:30px; height:30px; right:8px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce){
  .lp-mini, .lp-txt, .lp-foto img{ transition:none; }
  .lp-foto img, .lp-dot{ animation:none; }
}