:root{--sky:#081b33;--mid:#0c3765;--blue:#58b9ff;--white:#f3f9ff;--fade:#a9c5df;--line:#ffffff1a}*{box-sizing:border-box}body{margin:0;color:var(--white);font-family:Manrope,system-ui,sans-serif;background:radial-gradient(circle at 80% 0,#1e6293 0,#0b315b 30%,#081b33 75%);min-height:100vh}.app{max-width:1100px;margin:auto;padding:25px}header{display:flex;justify-content:space-between;align-items:center;gap:18px}header strong{font-size:22px;letter-spacing:-1px}header strong span{color:#72c8ff}button{border:1px solid var(--line);background:#ffffff10;color:var(--white);border-radius:10px;padding:9px 12px;font:600 13px Manrope;cursor:pointer}.back{font-size:13px;color:var(--fade);text-decoration:none}.hero{padding:78px 5% 48px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font:500 11px "DM Mono";letter-spacing:.12em;color:#bcd5ec}.temperature{font-size:clamp(110px,18vw,175px);line-height:.75;letter-spacing:-12px;font-weight:700}.temperature sup{font-size:.36em;letter-spacing:0}.condition{font-size:27px;font-weight:700;margin:30px 0 5px}.feels{color:var(--fade);margin:0}.sun{font-size:clamp(100px,18vw,175px);filter:drop-shadow(0 0 35px #ffdb7780);animation:float 4s ease-in-out infinite}@keyframes float{50%{transform:translateY(-13px)}}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick article,.panel{border:1px solid var(--line);background:#06192db8;backdrop-filter:blur(12px);border-radius:18px}.quick article{padding:18px;font-size:20px}.quick span{display:block;color:var(--fade);font-size:12px;margin:8px 0 3px}.quick b{font-size:17px}.content{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:14px}.panel{padding:21px}.title{display:flex;justify-content:space-between;align-items:center}.title h2{font-size:17px;margin:0;letter-spacing:-.4px}.title small{color:var(--fade)}.hours{display:flex;justify-content:space-between;gap:8px;margin-top:24px;overflow:auto}.hour{min-width:64px;text-align:center;color:var(--fade);font-size:12px}.hour i{display:block;font-size:25px;font-style:normal;margin:12px}.hour b{color:var(--white);font-size:15px}.live{font:11px "DM Mono";color:#72e6be}.map-art{position:relative;height:213px;margin-top:18px;overflow:hidden;border-radius:13px;background:linear-gradient(125deg,#185b70,#23617a 35%,#153d72);display:grid;place-items:center}.map-art:before,.map-art:after{content:"";position:absolute;border:1px solid #b6edff3d;border-radius:50%;width:240px;height:160px;transform:rotate(-25deg)}.map-art:after{width:160px;height:270px}.map-art b,.map-art span{position:relative;z-index:2}.map-art b{font-size:20px}.map-art span{top:-31px;left:15px}.cloud{position:absolute;width:75px;height:30px;background:#d9efff8a;border-radius:30px}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:35px;height:35px;left:10px;top:-17px}.cloud:after{width:45px;height:45px;right:8px;top:-23px}.c1{top:34px;left:38px}.c2{bottom:43px;right:16px;transform:scale(.65)}.rain{position:absolute;width:4px;height:37px;background:#83d7ff;border-radius:20px;transform:rotate(18deg)}.r1{top:75px;left:80px}.r2{bottom:34px;right:80px}.weekly{margin-top:14px}.weekly #week{margin-top:10px}.day{display:grid;grid-template-columns:1.3fr .55fr 1.3fr .5fr .5fr;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}.day:last-child{border:0}.day i{font-style:normal;font-size:21px}.range{height:7px;border-radius:20px;background:linear-gradient(90deg,#5fc6ff,var(--blue) 42%,#ffd769)}.note{color:#8eacca;font-size:12px;text-align:center;margin:26px 0 4px}@media(max-width:680px){.app{padding:17px}.hero{padding:65px 2% 38px}.quick{grid-template-columns:repeat(2,1fr)}.content{grid-template-columns:1fr}.sun{position:absolute;right:18px;top:100px;font-size:80px}.condition{font-size:22px}.day{grid-template-columns:1.1fr .5fr 1fr .4fr .4fr}}.city-picker{margin:18px 0 8px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#ffffff0a}.city-picker p{margin:0 0 10px;color:var(--fade);font-size:13px}.city-picker div{display:flex;flex-wrap:wrap;gap:8px}.city-picker button{padding:8px 10px}.city-picker button:hover{background:#58b9ff33;border-color:#58b9ff}
/* Móvil: evita desborde horizontal y ajusta el encabezado */
html,body{overflow-x:hidden}.content>*,.panel{min-width:0}.hours{-webkit-overflow-scrolling:touch;scrollbar-width:none}.hours::-webkit-scrollbar{display:none}button{font-family:Manrope,system-ui,sans-serif}
@media(max-width:680px){.hero{position:relative}.hero>div:first-child{max-width:calc(100% - 90px)}.temperature{letter-spacing:-8px}.feels{font-size:14px;line-height:1.5}.hours{justify-content:flex-start;gap:4px}.title{gap:10px;flex-wrap:wrap}header{flex-wrap:wrap;gap:10px}.day{gap:6px;font-size:13px}}