/* Banner Latinos Móvil 970×150 — copia exacta del de la portada de Muy Latinos
   (/var/www/muylatinos/lib/banner-latinosmovil.js + public/css/style.css, 2026-11-04).
   Variables de Muy Latinos sustituidas por sus valores; .lm-ad-in hace de .wrap. */
.lm-ad-in{width:100%;max-width:1200px;margin:0 auto;padding:0 22px;box-sizing:border-box}
.lm-ad-label,.lm-ad{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;box-sizing:border-box}
.lm-ad *,.lm-ad *::before,.lm-ad *::after{box-sizing:border-box}
/* Banner Latinos Móvil 970×150 (portada, rediseño 2026-11-04) — colores y logo de su marca */
.lm-ad-wrap{ padding:30px 0 0; background:transparent; }
.lm-ad-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#6f6d73; text-align:center; margin:0 0 6px; }
.lm-ad{ --mx:70%; --my:40%; position:relative; display:block; width:100%; max-width:970px; height:150px; margin:0 auto; border-radius:14px; overflow:hidden;
  color:#fff; text-decoration:none; isolation:isolate; background:#04050b; box-shadow:0 14px 34px -16px rgba(255,107,26,.55), 0 2px 8px rgba(0,0,0,.3); }
.lm-ad:focus-visible{ outline:3px solid #ffc53d; outline-offset:3px; }
.lm-ad *{ pointer-events:none; }
/* cielo: estrellas en dos capas que titilan desfasadas */
.lm-stars, .lm-stars::after{ position:absolute; inset:0; z-index:-3; background-repeat:repeat;
  background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 210px 20px,#fff,transparent),radial-gradient(1px 1px at 300px 110px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 60px 130px,#fff,transparent),radial-gradient(1.5px 1.5px at 260px 60px,rgba(255,200,150,.9),transparent);
  background-size:340px 150px; animation:lmTw 4s ease-in-out infinite; }
.lm-stars::after{ content:""; background-position:170px 70px; animation-delay:2s; }
.lm-glow{ position:absolute; inset:0; z-index:-2; background:radial-gradient(60% 120% at 30% 100%, rgba(255,107,26,.35), transparent 60%), radial-gradient(40% 90% at 100% 0%, rgba(232,70,124,.28), transparent 60%), radial-gradient(260px circle at var(--mx) var(--my), rgba(255,197,61,.10), transparent 60%); }
/* la Tierra: solo el borde superior, con conexiones naranjas */
.lm-earth{ position:absolute; z-index:-1; left:-2%; bottom:-40px; width:72%; transition:translate .4s cubic-bezier(.2,.8,.2,1); }
.lm-earth img{ display:block; width:100%; height:auto; filter:saturate(1.1) brightness(.85); -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); }
.lm-earth::before{ content:""; position:absolute; left:4%; right:4%; top:6px; height:30px; border-radius:50%; box-shadow:0 -6px 26px 4px rgba(255,107,26,.55); }
.lm-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lm-links path{ fill:none; stroke:#ff8a3d; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:6 240; filter:drop-shadow(0 0 4px #ff6b1a); animation:lmRun 3.2s linear infinite; }
.lm-links path:nth-child(2){ animation-delay:-1.1s; } .lm-links path:nth-child(3){ animation-delay:-2.2s; stroke:#ffc53d; }
/* astronauta flotando */
.lm-astro{ position:absolute; left:14px; top:-14px; height:178px; width:auto; z-index:1; filter:drop-shadow(0 0 14px rgba(255,107,26,.45)); animation:lmFloat 6s ease-in-out infinite; transition:translate .4s cubic-bezier(.2,.8,.2,1); }
/* móvil 5G naranja */
.lm-phone{ position:absolute; left:205px; top:14px; width:74px; height:124px; z-index:2; border-radius:14px; padding:9px 8px; display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(160deg,#20120a,#0b0b10 70%); border:2px solid #ff6b1a; box-shadow:0 0 18px rgba(255,107,26,.75), inset 0 0 12px rgba(255,107,26,.25);
  transform:rotate(-9deg); animation:lmPhone 5s ease-in-out infinite; transition:translate .4s cubic-bezier(.2,.8,.2,1); }
.lm-phone-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; margin-top:2px; }
.lm-phone-bars i{ width:4px; background:#ff6b1a; border-radius:1px; animation:lmBar 1.6s ease-in-out infinite; }
.lm-phone-bars i:nth-child(1){ height:5px; } .lm-phone-bars i:nth-child(2){ height:9px; animation-delay:.2s; } .lm-phone-bars i:nth-child(3){ height:14px; animation-delay:.4s; }
.lm-phone-5g{ font-family:'Barlow Condensed','Oswald',system-ui; font-weight:900; font-size:1.3rem; line-height:1; margin-top:3px; }
.lm-phone-call{ font-size:.5rem; color:rgba(255,255,255,.6); margin-top:6px; }
.lm-phone-dest{ font-size:.58rem; font-weight:700; text-align:center; line-height:1.2; min-height:2.4em; }
.lm-phone-dest.in{ animation:lmDest .45s cubic-bezier(.2,.8,.2,1); }
.lm-phone-ok{ margin-top:auto; width:16px; height:16px; border-radius:50%; border:1.5px solid #fff; font-size:.55rem; display:grid; place-items:center; }
/* texto: logo oficial, eslogan, botón y precio */
.lm-txt{ position:absolute; right:28px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; align-items:flex-end; gap:6px; width:440px; }
.lm-logo{ height:50px; width:auto; overflow:visible; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.lm-logo text{ font-family:'Barlow Condensed','Oswald',system-ui,sans-serif; font-weight:900; font-size:52px; }
.lm-tag{ font-family:'Barlow Condensed','Oswald',system-ui,sans-serif; font-weight:700; font-size:1.3rem; line-height:1.1; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.lm-row{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.lm-cta{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.85rem; padding:6px 14px 6px 6px; border-radius:999px; background:rgba(10,10,14,.75);
  border:1.5px solid #ff6b1a; box-shadow:0 0 14px rgba(255,107,26,.45); transition:background .2s, box-shadow .2s; }
.lm-cta-ic{ width:22px; height:22px; border-radius:50%; background:#ff6b1a; color:#0e0e10; display:grid; place-items:center; font-size:1.1rem; font-weight:900; line-height:1; transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.lm-cta-sep{ width:1.5px; height:16px; background:rgba(255,255,255,.6); }
.lm-price{ font-size:.82rem; color:rgba(255,255,255,.8); white-space:nowrap; }
.lm-price b{ font-family:'Barlow Condensed','Oswald',system-ui; font-size:1.25rem; color:#ffc53d; }
.lm-ad:hover .lm-cta{ background:#ff6b1a; color:#0e0e10; box-shadow:0 0 22px rgba(255,107,26,.8); }
.lm-ad:hover .lm-cta-ic{ background:#0e0e10; color:#ff6b1a; transform:translateX(2px); }
.lm-ad:hover .lm-cta-sep{ background:rgba(14,14,16,.5); }
.lm-ad:active .lm-cta{ transform:scale(.97); }
@keyframes lmTw{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes lmRun{ from{ stroke-dashoffset:246; } to{ stroke-dashoffset:0; } }
@keyframes lmFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-7px) rotate(2deg); } }
@keyframes lmPhone{ 0%,100%{ transform:rotate(-9deg) translateY(0); } 50%{ transform:rotate(-7deg) translateY(-4px); } }
@keyframes lmBar{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes lmDest{ from{ opacity:0; transform:translateY(5px); filter:blur(2px); } to{ opacity:1; transform:none; filter:none; } }
/* tablet: menos escena, el texto manda */
@media (max-width:900px){ .lm-phone{ left:150px; } .lm-txt{ width:auto; right:20px; } .lm-logo{ height:42px; } .lm-tag{ font-size:1.1rem; } .lm-price{ display:none; } }
/* móvil: versión compacta 150 px, logo y botón centrados, sin móvil dibujado */
@media (max-width:760px){
  .lm-phone{ display:none; }
  .lm-astro{ height:120px; left:-18px; top:6px; opacity:.85; }
  .lm-earth{ width:150%; left:-25%; bottom:-30px; }
  .lm-txt{ right:12px; left:92px; align-items:center; text-align:center; gap:5px; }
  .lm-logo{ height:32px; }
  .lm-tag{ font-size:.98rem; }
  .lm-cta{ font-size:.72rem; padding:5px 11px 5px 5px; gap:7px; }
  .lm-cta-ic{ width:18px; height:18px; font-size:.95rem; }
}
@media (prefers-reduced-motion:reduce){
  .lm-stars, .lm-stars::after, .lm-links path, .lm-astro, .lm-phone, .lm-phone-bars i, .lm-phone-dest.in{ animation:none; }
  .lm-links path{ stroke-dasharray:none; opacity:.5; }
}
/* ajuste: la Tierra solo asoma como horizonte (≈55 px) y el botón no se parte */
.lm-earth{ left:-4%; width:108%; bottom:auto; top:96px; }
.lm-earth img{ -webkit-mask-image:none; mask-image:none; }
.lm-cta{ white-space:nowrap; }
.lm-txt{ width:auto; }
@media (max-width:760px){
  .lm-earth{ width:190%; left:-45%; top:104px; }
  .lm-txt{ left:70px; right:10px; }
  .lm-cta{ font-size:.68rem; }
  .lm-cta-sep, .lm-cta-2{ display:none; }
}
.lm-phone-dest{ font-size:.66rem; } .lm-phone-call{ font-size:.55rem; }


/* Latinos FM: el banner va como diapositiva del carrusel «Publicidad» de la portada
   (sustituye a la imagen fija de Latinos Móvil). Se anulan las reglas genéricas de imagen del carrusel. */
.hero-carousel-slide .lm-ad img{border-radius:0}
.hero-carousel-slide .lm-ad .lm-earth img{width:100%;height:auto}
.hero-carousel-slide .lm-ad img.lm-astro{width:auto;height:178px}
@media (max-width:760px){ .hero-carousel-slide .lm-ad img.lm-astro{height:120px} }