:root{--scale:1}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;font-family:Arial,Helvetica,sans-serif}
.stage{position:relative;width:1920px;height:1080px;overflow:hidden;transform:scale(var(--scale));transform-origin:top left;background:transparent;color:#fff}
.overlay-component{position:absolute;overflow:hidden;display:block}
.component-inner{width:100%;height:100%;display:flex;align-items:center;gap:14px;padding:var(--pad,14px);color:inherit}
.comp-brand{background:linear-gradient(120deg,var(--bgc,#0057ff),#16223d);color:var(--color,#fff);border-bottom:8px solid var(--accent,#ffd400);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32))}
.comp-brand .mark{width:70px;height:70px;background:#fff;color:#111;display:grid;place-items:center;font-weight:900;flex:0 0 70px}
.comp-brand .mark img{width:100%;height:100%;object-fit:contain}
.comp-brand strong,.comp-program strong{display:block;font-size:34px;line-height:1;text-transform:uppercase}
.comp-brand span,.comp-program span,.comp-program em{display:block;font-weight:800;opacity:.92;font-style:normal;margin-top:6px}
.comp-live{background:var(--bgc,#ff1744);color:var(--color,#fff);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32));font-size:28px;font-weight:900;justify-content:center;align-items:center;text-align:center;line-height:1;white-space:nowrap;text-transform:uppercase;animation:liveIn .55s ease both}
.comp-live strong{display:block;line-height:1}
.comp-live .dot{width:18px;height:18px;border-radius:50%;background:currentColor;flex:0 0 18px;animation:pulse 1.15s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);box-shadow:0 0 0 0 currentColor;opacity:1}70%{transform:scale(1);box-shadow:0 0 0 18px rgba(255,255,255,0);opacity:.72}100%{transform:scale(.9);box-shadow:0 0 0 0 rgba(255,255,255,0);opacity:1}}
@keyframes liveIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
.comp-clock,.comp-weather,.comp-text,.comp-shape{background:var(--bgc,#101828);color:var(--color,#fff);box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32))}
.comp-clock strong{display:block;font-size:42px;line-height:1}.comp-clock span{display:block;font-weight:800;margin-top:6px}
.comp-weather{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;line-height:1}
.weather-icon{height:44px;min-width:64px;padding:0 10px;display:grid;place-items:center;background:var(--accent,#ffd400);color:#101828;font-size:15px;font-weight:900;text-transform:uppercase;transform:skewX(-10deg)}
.weather-main strong{display:block;font-size:46px;line-height:.9;letter-spacing:0}
.weather-meta{display:grid;gap:4px;min-width:0}
.weather-city{font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.weather-label{font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.weather-extra{font-size:13px;font-weight:800;opacity:.78;white-space:nowrap}
.comp-program{background:linear-gradient(115deg,var(--bgc,#ff2f6d),#16223d);color:var(--color,#fff);border-bottom:8px solid var(--accent,#ffd400);box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32))}
.comp-program .kicker{display:inline-block;background:var(--accent,#ffd400);color:#111;padding:6px 10px;margin-bottom:8px;font-weight:900;text-transform:uppercase}
.comp-qr{background:var(--bgc,#fff);color:var(--color,#101828);box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32))}
.comp-qr img{width:118px;height:118px;background:#fff;margin-right:12px;flex:0 0 118px}.comp-qr strong{display:block;font-size:22px;text-transform:uppercase}.comp-qr span{display:block;font-weight:800;margin-top:8px;color:#344054}
.comp-ticker{background:var(--bgc,#fff);color:var(--color,#101828);display:flex;align-items:stretch;box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32))}
.ticker-label{display:grid;place-items:center;background:var(--labelbg,#0057ff);color:#fff;font-weight:900;width:210px;text-transform:uppercase;font-size:24px;flex:0 0 210px;line-height:1}
.ticker-window{position:relative;overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-track{display:flex;width:max-content;white-space:nowrap;will-change:transform;animation:marquee var(--duration,34s) linear infinite}
.ticker-content{display:inline-flex;align-items:center;white-space:nowrap;font-size:28px;font-weight:800;padding-right:32px;line-height:1}
.ticker-content span{display:inline-flex;align-items:center;margin-right:38px}.ticker-content span:before{content:"";width:12px;height:12px;background:var(--labelbg,#0057ff);margin-right:18px;transform:skewX(-20deg)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.comp-sponsor,.comp-lower{background:var(--bgc,#101828);color:var(--color,#fff);box-shadow:var(--shadow,0 18px 40px rgba(0,0,0,.32))}
.comp-sponsor img{max-width:90px;max-height:70px;object-fit:contain;background:#fff;padding:8px}
.comp-sponsor strong,.comp-lower strong,.comp-text strong{display:block;font-size:28px;line-height:1.05}
.comp-sponsor span,.comp-lower span,.comp-text span{display:block;font-weight:800;margin-top:8px;opacity:.9}
.template-radio-hits .comp-weather{background:linear-gradient(125deg,var(--bgc,#ff2f6d),#0057ff);border-right:8px solid var(--accent,#ffd400)}
.template-radio-hits .comp-ticker{border-top:6px solid var(--labelbg,#0057ff)}
.template-noticias-locales .comp-brand,.template-noticias-locales .comp-program{clip-path:none;border-bottom:6px solid var(--accent,#ffe100)}
.template-noticias-locales .comp-live{clip-path:none}
.template-noticias-locales .comp-weather{background:#0b1f4d;border-left:8px solid var(--accent,#ffe100)}
.template-noticias-locales .ticker-label{background:#d71920}
.template-streaming-podcast .comp-brand,.template-streaming-podcast .comp-live,.template-streaming-podcast .comp-weather,.template-streaming-podcast .comp-qr,.template-streaming-podcast .comp-lower{clip-path:none}
.template-streaming-podcast .comp-weather{background:rgba(255,255,255,.96);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.template-streaming-podcast .weather-icon{border-radius:10px;transform:none}
.template-streaming-podcast .comp-ticker{box-shadow:0 12px 28px rgba(0,0,0,.22)}