:root{color-scheme:dark;--gold:#ffcb70;--pink:#ee728f;--cyan:#61cfe5;--text:#eff3ff}
*{box-sizing:border-box}
body{margin:0;padding:clamp(8px,2.5vw,28px);background:radial-gradient(circle at 95% 2%,#39213f,transparent 36%),radial-gradient(circle at 8% 25%,#192f55,transparent 38%),#080e20;color:var(--text);font-family:Segoe UI,Arial,sans-serif}
.shell{max-width:960px;margin:auto;border:1px solid #435279;border-radius:24px;overflow:hidden;background:#0e1830;box-shadow:0 22px 68px #0007}
.hero{position:relative;overflow:hidden;padding:18px 26px 16px;background:linear-gradient(115deg,#1b2b54 0%,#1a2443 50%,#442444 100%)}
.hero:after{content:"";position:absolute;right:-74px;top:-145px;width:340px;height:340px;border:2px solid #e3739840;border-radius:50%;box-shadow:0 0 0 37px #d75f9410,0 0 0 80px #d75f9408;pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:18px 26px;align-items:stretch}
.hero-main{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0}
.logo-row{display:flex;align-items:flex-start;gap:15px;min-width:0}
.logo{display:block;flex:none;width:82px;height:82px;object-fit:contain}
.brand-text{min-width:0;padding-top:2px}
h1{font-size:clamp(28px,3.8vw,35px);line-height:1.04;margin:0;font-weight:850;letter-spacing:-.4px}
h1 span{color:var(--gold)}
.kicker{color:#ffcf7e;font-size:12px;font-weight:800;letter-spacing:1.6px;margin-top:8px;text-transform:uppercase}
.sub{margin:18px 0 0;color:#ecf3ff;font-size:15px;line-height:1.45;max-width:600px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.chip{font-size:11px;font-weight:850;border:1px solid #546487a0;border-radius:99px;padding:7px 10px;background:#23315290;color:#e6edf9;letter-spacing:.5px;white-space:nowrap}
.chip.active{border-color:#4e9c88;color:#b9f4e2;background:#17434299}
.hero-right{display:grid;grid-template-rows:auto 1fr auto;justify-items:end;align-items:start;gap:10px;min-height:166px;width:208px}
.live{font-size:11px;letter-spacing:.6px;font-weight:800;border:1px solid #9ec7bb88;color:#c5f8e7;background:#163d42b0;border-radius:999px;padding:9px 13px;white-space:nowrap}
.live:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#62e3ac;margin-right:7px}
.magica-clock{font-family:"Segoe UI",Arial,sans-serif;font-size:56px;line-height:.95;letter-spacing:1px;font-weight:300;font-variant-numeric:tabular-nums;color:#fff;align-self:center}
.clima{display:flex;align-items:center;gap:9px;justify-content:flex-end;padding:8px 10px;border:1px solid #7285ab65;background:#121c355c;border-radius:12px;min-width:168px;max-width:208px;width:100%}
.clima-icon{color:#ffd17f;font-size:18px;line-height:1}
.clima-data{display:flex;flex-direction:column;min-width:0;gap:1px;align-items:flex-end;flex:1 1 auto}
#clima-valor{font-size:17px;font-weight:800;color:#edf6ff;white-space:nowrap;font-variant-numeric:tabular-nums}
#clima-ciudad{font-size:10px;color:#b6c9e4;max-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#clima-unidad{border:1px solid #7285ab85;border-radius:8px;background:#263758;color:#e7f5ff;font-size:11px;font-weight:750;cursor:pointer;padding:7px 8px;white-space:nowrap}
#clima-unidad:disabled{cursor:default;opacity:.55}
#clima-unidad:not(:disabled):hover{background:#38558c}
.wave{display:flex;justify-content:center;gap:5px;align-items:end;height:25px;background:linear-gradient(180deg,#111b33,#0d1329);border-top:1px solid #ffffff10;border-bottom:1px solid #f0a16e55}
.wave b{height:calc(4px + (var(--n) * 1px));width:5px;border-radius:9px;background:linear-gradient(#ffd379,#e76998);opacity:.9}
.zone{padding:14px clamp(10px,2vw,19px) 18px}
.section-title{font-size:12px;font-weight:850;letter-spacing:1.4px;text-transform:uppercase;color:#b7daf9;margin:5px 3px 13px}
.section-title:before{content:"";display:inline-block;width:23px;height:3px;background:var(--gold);vertical-align:middle;margin-right:10px}
.mount{background:#101c36;border:1px solid #3c4f76;border-radius:18px;overflow:hidden}
#sc-player{width:100%;padding:0;margin:0}
.footer{padding:14px 22px;border-top:1px solid #344363;background:#0a1329;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;color:#aebedc}
.footer a{color:#9be7ef;text-decoration:none}
@media(max-width:780px){.hero{padding:16px 18px 14px}.hero-grid{grid-template-columns:minmax(0,1fr) 180px;gap:16px}.hero-right{width:180px;min-height:154px}.magica-clock{font-size:48px}.sub{font-size:14px}}
@media(max-width:620px){.hero-grid{grid-template-columns:1fr;gap:12px}.hero-right{grid-row:1;grid-column:1;justify-self:end;width:176px;min-height:auto;gap:8px}.top{padding-right:188px}.sub{margin-top:14px;max-width:none;padding-right:188px}.chips{padding-right:188px}.magica-clock{font-size:46px}.clima{min-width:166px;max-width:176px}}
@media(max-width:530px){.hero{;}.logo{;}.logo-row{;}h1{;}.kicker{;}.hero-grid{;}.top{padding-right:0;;}.hero-right{grid-template-columns:1fr auto;;grid-template-areas:"live clock" "spacer clima";;justify-items:end;;margin-top:12px;;}.hero-right .live{grid-area:live;justify-self:start;font-size:10px;padding:8px 10px}.magica-clock{grid-area:clock;;justify-self:end;;}.clima{grid-area:clima;;}.sub,.chips{padding-right:0}.sub{font-size:13px;line-height:1.5}.chip{;}#clima-valor{;}#clima-ciudad{;}#clima-unidad{;}.zone{;}}

/* V13: distribución móvil compacta. Sin alterar el escritorio. */
@media (max-width: 530px) {
 body{padding:3px}
 .shell{border-radius:15px}
 .hero{padding:10px 11px 8px}
 .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 160px;grid-template-areas:"brand brand" "chips info";column-gap:8px;row-gap:8px;align-items:start}
 .hero-main{display:contents}
 .top{grid-area:brand;padding:0;min-width:0;align-items:center}
 .logo-row{gap:9px;align-items:center}
 .logo{width:52px;height:52px}
 .brand-text{padding:0;min-width:0}
 h1{font-size:clamp(24px,6.8vw,31px);line-height:1.05;letter-spacing:-.35px}
 .kicker{font-size:10px;margin-top:4px;letter-spacing:1px}
 .sub{display:none}
 .chips{grid-area:chips;display:flex;flex-wrap:wrap;align-content:start;justify-content:flex-start;gap:6px;margin:0;padding:0;min-width:0}
 .chip{font-size:9px;padding:6px 8px;letter-spacing:0;line-height:1.1}
 .hero-right{grid-area:info;display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:160px;min-height:0;margin:0;justify-self:end}
 .hero-right .live{display:none}
 .magica-clock{font-size:45px;line-height:1;letter-spacing:0;align-self:auto}
 .clima{width:160px;max-width:160px;min-width:0;padding:6px 7px;gap:5px;border-radius:10px}
 #clima-valor{font-size:13px}
 #clima-ciudad{font-size:9px;max-width:88px}
 #clima-unidad{padding:5px 6px;font-size:10px}
 .wave{height:18px}
 .wave b{width:4px}
 .zone{padding:8px 6px 12px}
 .section-title{margin:2px 2px 10px}
}
@media (max-width: 390px){
 .hero{padding:9px 8px 8px}
 .hero-grid{grid-template-columns:minmax(0,1fr) 145px;gap:7px}
 .hero-right,.clima{width:145px;max-width:145px}
 .magica-clock{font-size:41px}
 h1{font-size:clamp(21px,6.7vw,27px)}
 .chip{font-size:8px;padding:6px 7px}
 .logo{width:48px;height:48px}
}
@media (max-width: 345px){
 .hero-grid{grid-template-columns:minmax(0,1fr) 132px}
 .hero-right,.clima{width:132px;max-width:132px}
 .magica-clock{font-size:37px}
 h1{font-size:20px}
}

/* V14: encabezado móvil ajustado según referencia del usuario */
@media (max-width:530px){
 body{;}
 .shell{;}
 .hero{padding:8px 10px 7px}
 .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:"brand info" "chips info";column-gap:8px;row-gap:7px;align-items:start}
 .hero-main{display:contents}
 .top{grid-area:brand;padding:0;min-width:0;align-items:flex-start;gap:8px}
 .logo-row{gap:8px;align-items:flex-start}
 .logo{width:50px;height:50px}
 .brand-text{padding:0;min-width:0}
 h1{font-size:clamp(22px,8vw,27px);line-height:.98;letter-spacing:-.35px}
 .kicker{font-size:9px;margin-top:4px;letter-spacing:.9px}
 .sub{display:none}
 .chips{grid-area:chips;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;gap:6px 7px;margin:0;padding:0;min-width:0}
 .chip{font-size:9px;padding:6px 8px;letter-spacing:0;line-height:1.05;white-space:nowrap}
 .hero-right{grid-area:info;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:6px;width:150px;min-height:0;margin:0;justify-self:end}
 .hero-right .live{display:none}
 .magica-clock{font-size:44px;line-height:.94;letter-spacing:0;align-self:auto}
 .clima{width:150px;max-width:150px;min-width:0;padding:6px 8px;gap:6px;border-radius:11px}
 #clima-valor{font-size:13px}
 #clima-ciudad{font-size:9px;max-width:82px}
 #clima-unidad{padding:5px 6px;font-size:10px}
 .wave{height:18px}
 .wave b{width:4px}
 .zone{;}
 .section-title{margin:2px 2px 10px}
}
@media (max-width:430px){
 .hero{padding:8px 8px 7px}
 .hero-grid{grid-template-columns:minmax(0,1fr) 142px;column-gap:6px;row-gap:6px}
 .hero-right{width:142px}
 .clima{width:142px;max-width:142px;padding:5px 7px}
 .magica-clock{font-size:40px}
 .logo{width:48px;height:48px}
 h1{font-size:clamp(21px,7.8vw,25px)}
 .kicker{font-size:8px;letter-spacing:.8px}
 .chip{font-size:8px;padding:6px 7px}
}
@media (max-width:375px){
 .hero-grid{grid-template-columns:minmax(0,1fr) 134px}
 .hero-right{width:134px}
 .clima{width:134px;max-width:134px}
 .magica-clock{font-size:37px}
 h1{font-size:20px}
 .chip{font-size:8px;padding:5px 6px}
}


/* V15: continuidad del encabezado en el ancho intermedio.
   Evita el salto al diseño alto entre 531 y 670 px. */
@media (min-width:531px) and (max-width:670px){
 body{padding:5px}
 .shell{border-radius:17px}
 .hero{padding:11px 13px 9px}
 .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 170px;grid-template-areas:"brand info" "chips info";gap:9px 9px;align-items:start}
 .hero-main{display:contents}
 .top{grid-area:brand;padding:0;min-width:0;align-items:flex-start}
 .logo-row{gap:9px;align-items:center;min-width:0}
 .logo{width:57px;height:57px}
 .brand-text{padding:0;min-width:0}
 h1{font-size:clamp(24px,4.7vw,30px);line-height:1.02;letter-spacing:-.3px}
 .kicker{font-size:10px;letter-spacing:1px;margin-top:5px}
 .sub{display:none}
 .chips{grid-area:chips;display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;gap:6px 7px;margin:0;padding:0;min-width:0}
 .chip{font-size:9px;line-height:1.1;letter-spacing:0;padding:6px 8px}
 .hero-right{grid-area:info;display:flex;flex-direction:column;align-items:flex-end;gap:7px;justify-self:end;width:170px;min-height:0;margin:0}
 .hero-right .live{display:none}
 .magica-clock{font-size:48px;line-height:1;letter-spacing:0;align-self:auto}
 .clima{width:170px;min-width:0;max-width:170px;padding:7px 8px;gap:6px}
 #clima-valor{font-size:14px}
 #clima-ciudad{font-size:9px;max-width:94px}
 #clima-unidad{font-size:10px;padding:6px 7px}
 .wave{height:18px}
 .wave b{width:4px}
 .zone{padding:9px 8px 13px}
 .section-title{margin:3px 2px 10px}
}


/* V17: ondas y ecualizador ornamentales; un solo player permanece montado */
.shell{position:relative}
.zone{position:relative;isolation:isolate}
.zone:before{content:none}
.zone:after{content:"";pointer-events:none;position:absolute;left:0;right:0;bottom:0;height:65px;background:repeating-radial-gradient(ellipse 160% 120px at 50% 130%,transparent 0 9px,rgba(53,193,255,.32) 10px 11px,transparent 12px 19px,rgba(199,59,247,.24) 20px 21px,transparent 22px 29px);z-index:-1}
.magica-mobile-nav{display:none}
.magica-popback{position:fixed;inset:0;z-index:99999;background:#030a19ad;display:flex;align-items:flex-end;justify-content:center;padding:16px}
.magica-popback[hidden]{display:none!important}
.magica-popup{background:#152546;border:1px solid #4b71aa;border-radius:20px;padding:20px;width:min(420px,100%);box-shadow:0 20px 60px #000c;color:white}
.magica-popup h2{font-size:20px;margin:0 0 14px;color:#ffce76}
.magica-popup .buttons{display:flex;gap:10px;flex-wrap:wrap}
.magica-popup button,.magica-popup a{border:1px solid #5a79a7;background:#263d63;color:#fff;border-radius:12px;padding:12px 15px;font:700 15px Arial;cursor:pointer;text-decoration:none;flex:1;text-align:center}
.magica-popup button:focus-visible,.magica-mobile-nav button:focus-visible{outline:3px solid #ffcf73;outline-offset:3px}
.magica-popup .dismiss{background:transparent;flex:0 0 auto;margin-top:14px;width:100%}
@media(max-width:530px){
 body{padding:0}
 .shell{border-radius:0;border:0;box-shadow:none;min-height:100vh}
 .hero{border-radius:0}
 .zone{padding:8px 8px 78px}
 .magica-mobile-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;bottom:0;left:0;right:0;z-index:250;background:#071329f5;border-top:1px solid #4285c3;box-shadow:0 -4px 19px #0009;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .magica-mobile-nav button{border:0;background:transparent;color:#e3eafa;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;font-weight:700;font-size:11px;cursor:pointer}
 .magica-mobile-nav button span:first-child{font-size:24px;line-height:26px}
 .magica-mobile-nav button.current{color:#ffd170}
 #pwa-install{bottom:calc(66px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 25px)}
}


/* V18: intensidades y encabezado móvil fiel a la maqueta aprobada */
@media(max-width:530px){
 .hero{padding:10px 13px 9px!important;background:linear-gradient(110deg,#081935,#10173a 70%,#25144d)!important}
 .hero-grid{grid-template-columns:minmax(0,1fr) 136px!important;grid-template-areas:"brand info"!important;column-gap:8px!important;row-gap:0!important;align-items:center!important}
 .hero-main{display:block!important;grid-area:brand!important}
 .top{display:block!important;padding:0!important}
 .logo-row{align-items:center!important;gap:10px!important}
 .logo{width:67px!important;height:67px!important;object-fit:contain!important}
 h1{font-size:clamp(20px,5.8vw,27px)!important;line-height:1.04!important;letter-spacing:-.6px!important}
 .kicker{font-size:9px!important;letter-spacing:.4px!important;white-space:nowrap!important;margin-top:5px!important}
 .chips,.sub{display:none!important}
 .hero-right{grid-area:info!important;width:136px!important;display:flex!important;align-items:flex-end!important;gap:6px!important;margin:0!important}
 .magica-clock{font-size:clamp(36px,10.2vw,47px)!important;font-weight:300!important}
 .clima{width:136px!important;max-width:136px!important;padding:5px!important;border-radius:13px!important}
 .wave{height:17px!important}
 .zone{padding-top:6px!important}
 .section-title{font-size:11px!important;margin:3px 3px 8px!important}
}
@media(max-width:360px){.hero{padding:8px!important}.logo{width:52px!important;height:52px!important}.hero-grid{grid-template-columns:minmax(0,1fr) 125px!important}.hero-right,.clima{width:125px!important;max-width:125px!important}h1{font-size:20px!important}.magica-clock{font-size:36px!important}}
.magica-popup .buttons.share-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.magica-popup .share-icons a,.magica-popup .share-icons button{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:6px 2px;background:transparent;border:0}
.share-icons .social-mark{display:flex;align-items:center;justify-content:center;width:49px;height:49px;border-radius:50%;font-size:25px;font-weight:850;color:#fff;background:#385785;box-shadow:0 5px 16px #0007}
.share-icons [data-social="facebook"] .social-mark{background:#1877f2}
.share-icons [data-social="whatsapp"] .social-mark{background:#25d366}
.share-icons [data-social="telegram"] .social-mark{background:#2aabee}
.share-icons [data-social="x"] .social-mark{background:#10151e;border:1px solid #7185aa}
.share-icons [data-social="copy"] .social-mark{background:#6884c6}
.magica-mobile-nav{background:linear-gradient(180deg,#091b3bf8,#051027ff)!important;border-top:1px solid #05c8ff!important}
.magica-mobile-nav button.current{color:#ffd852!important}

/* Ajustes solicitados sobre V21 */
.wave{display:none!important}
.section-title{display:none!important}
.mobile-counterline{display:none}
h1 .line1,h1 .line2{display:inline}
@media(max-width:530px){
  h1 .line1,h1 .line2{display:block}
  h1 .line1{margin-bottom:0}
  .mobile-counterline{display:block;text-align:center;color:#f3f7ff;font-size:25px;line-height:1;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.4px;margin:2px 0 10px}
}



/* V23: ajustes sutiles solicitados */
h1 .line1,h1 .line2{color:#ffffff!important}
h1 .line2 span{color:var(--gold)!important}
@media(max-width:530px){
  .mobile-counterline{font-size:19px!important;line-height:1!important;margin:3px 0 9px!important}
  .sc-player [data-sc-control="timer-container"]{display:none!important}
}

/* V26: ajustes finos solicitados */
@media(max-width:530px){
  .hero{padding-top:21px!important}
  .mobile-counterline{display:none!important}
}