* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 70% 15%,#12aee9 0,transparent 32%),linear-gradient(135deg,#053b8f,#006fd5); color:white; }
body { min-height:100vh; overflow:hidden; }
.page { width:min(1500px,calc(100% - 80px)); margin:auto; padding:34px 0 24px; }
header { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
h1 { font-size:46px; font-weight:300; margin:0; }
.forecast-label { margin-top:7px; font-size:16px; letter-spacing:.12em; text-transform:uppercase; opacity:.72; }
.source { font-size:16px; opacity:.82; padding-bottom:4px; }
.main-city { border:1px solid rgba(255,255,255,.35); background:rgba(0,40,120,.25); backdrop-filter:blur(15px); padding:22px 34px; margin-bottom:22px; overflow:hidden; }
.main-grid { display:grid; grid-template-columns:1.1fr 1.25fr 1fr; align-items:center; gap:24px; }
.main-copy { min-width:0; }
.main-weather-center { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; }
.city-name { font-size:54px; font-weight:300; line-height:1.05; }
.condition { font-size:20px; margin-top:8px; opacity:.85; }
.temperature-block { flex:0 0 auto; }
.temperature-caption { margin:0 0 5px 4px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; opacity:.68; }
.temperature { font-size:86px; font-weight:200; line-height:1; white-space:nowrap; }
.details { display:grid; grid-template-columns:1fr 1fr; gap:15px 24px; }
.detail-label { font-size:12px; opacity:.65; text-transform:uppercase; }
.detail-value { font-size:23px; margin-top:3px; white-space:nowrap; }
.section-title { font-size:17px; letter-spacing:.13em; text-transform:uppercase; opacity:.75; margin-bottom:10px; }
.cities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.city-card { min-width:0; border:1px solid rgba(255,255,255,.28); background:rgba(0,45,130,.28); backdrop-filter:blur(12px); overflow:hidden; }
.city-card-name { font-weight:500; }
.city-card-temp { font-weight:200; white-space:nowrap; }
.city-card-range,.city-card-rain { opacity:.8; }
.loading { opacity:.65; }.error { color:#ffd3d3; }

/* CLASSICO */
.layout-classic .main-city { min-height:250px; }
.layout-classic .main-grid { min-height:204px; }
.layout-classic .city-card { height:230px; padding:18px 20px 14px; display:grid; grid-template-rows:58px 105px 40px; }
.layout-classic .city-card-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.layout-classic .city-card-name { font-size:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layout-classic .city-card .condition { font-size:15px; margin-top:4px; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout-classic .city-card-temp { font-size:43px; }
.layout-classic .city-card .weather-visual.compact { width:150px; height:100px; justify-self:center; align-self:center; overflow:visible; }
.layout-classic .city-card .weather-visual.compact .weather-stage { transform:translate(5px,4px) scale(.50); }
.layout-classic .city-card-bottom { align-self:end; }
.layout-classic .city-card-range { font-size:16px; }.layout-classic .city-card-rain { font-size:14px; margin-top:4px; }

/* LISTA DE TV */
.layout-list .main-city { height:188px; min-height:188px; padding:14px 30px; margin-bottom:18px; }
.layout-list .main-grid { height:158px; grid-template-columns:1.05fr 1.05fr .9fr; gap:18px; }
.layout-list .city-name { font-size:47px; }.layout-list .condition { font-size:19px; }
.layout-list .temperature { font-size:72px; }
.layout-list .main-weather-center .weather-visual { width:190px; height:120px; }
.layout-list .main-weather-center .weather-stage { transform:translate(-45px,-30px) scale(.68); }
.layout-list .details { gap:8px 18px; }.layout-list .detail-value { font-size:20px; }
.layout-list .section-title { margin-bottom:8px; }
.layout-list .cities { display:grid; grid-template-columns:1fr; gap:8px; }
.layout-list .city-card { height:88px; min-height:88px; padding:0 16px; display:grid; grid-template-columns:minmax(330px,1fr) 100px 170px 145px; align-items:center; column-gap:16px; }
.layout-list .city-card-top { display:contents; }
.layout-list .city-card-top>div:first-child { grid-column:1; grid-row:1; align-self:center; min-width:0; }
.layout-list .city-card-name { font-size:20px; line-height:1.08; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout-list .city-card .condition { font-size:13px; line-height:1.1; margin-top:4px; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout-list .city-card-temp { grid-column:2; grid-row:1; font-size:36px; line-height:1; text-align:center; align-self:center; }
.layout-list .city-card .weather-visual.compact { grid-column:3; grid-row:1; width:170px; height:84px; margin:0; justify-self:center; align-self:center; overflow:visible; }
.layout-list .city-card .weather-visual.compact .weather-stage { transform:translate(23px,2px) scale(.44); }
.layout-list .city-card-bottom { grid-column:4; grid-row:1; margin:0; align-self:center; text-align:right; }
.layout-list .city-card-range { font-size:14px; font-weight:500; }.layout-list .city-card-rain { font-size:13px; margin-top:4px; }

/* FOCO PRINCIPAL - linguagem de TV: a cidade contratante domina a tela */
.layout-focus .page { width:min(1600px,calc(100% - 64px)); padding-top:28px; }
.layout-focus header { margin-bottom:14px; }
.layout-focus h1 { font-size:42px; }
.layout-focus .main-city { height:430px; min-height:430px; padding:34px 48px; margin-bottom:16px; background:linear-gradient(110deg,rgba(0,35,105,.44),rgba(0,115,205,.16)); }
.layout-focus .main-grid { height:360px; grid-template-columns:1.08fr 1.18fr .82fr; gap:30px; }
.layout-focus .city-name { font-size:76px; line-height:.98; letter-spacing:-.035em; }
.layout-focus .condition { font-size:27px; margin-top:16px; }
.layout-focus .main-weather-center { gap:22px; }
.layout-focus .main-weather-center .weather-visual { width:270px; height:210px; overflow:visible; }
.layout-focus .main-weather-center .weather-stage { transform:translate(-22px,-8px) scale(.92); }
.layout-focus .temperature { font-size:126px; letter-spacing:-.055em; }
.layout-focus .temperature-caption { font-size:14px; }
.layout-focus .details { grid-template-columns:1fr 1fr; gap:22px 30px; padding-left:8px; }
.layout-focus .detail-label { font-size:13px; letter-spacing:.04em; }
.layout-focus .detail-value { font-size:29px; }
.layout-focus .section-title { font-size:15px; margin:0 0 8px; }
.layout-focus .cities { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.layout-focus .city-card { height:116px; min-height:116px; padding:13px 16px; display:grid; grid-template-columns:minmax(0,1fr) 78px 94px; grid-template-rows:1fr; align-items:center; gap:8px; }
.layout-focus .city-card-top { display:contents; }
.layout-focus .city-card-top>div:first-child { grid-column:1; min-width:0; }
.layout-focus .city-card-name { font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout-focus .city-card .condition { font-size:12px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layout-focus .city-card-temp { grid-column:2; font-size:36px; text-align:center; }
.layout-focus .city-card .weather-visual.compact { display:none; }
.layout-focus .city-card-bottom { grid-column:3; text-align:right; align-self:center; }
.layout-focus .city-card-range { font-size:13px; font-weight:600; }
.layout-focus .city-card-rain { font-size:12px; margin-top:5px; }

@media (max-width:1180px) {
 body { overflow:auto; }.page { width:calc(100% - 40px); }
 .main-grid,.layout-list .main-grid,.layout-focus .main-grid { height:auto; grid-template-columns:1fr 1fr; }
 .details { grid-column:1/-1; grid-template-columns:repeat(6,1fr); }
 .cities,.layout-focus .cities { grid-template-columns:1fr 1fr; }.layout-list .cities { grid-template-columns:1fr; }
 .layout-focus .main-city { height:auto; min-height:430px; }
}
@media (max-width:900px) {
 .page { width:calc(100% - 30px); } header { align-items:flex-start; gap:20px; }
 .main-grid,.layout-list .main-grid,.layout-focus .main-grid { grid-template-columns:1fr; }
 .main-weather-center { justify-content:flex-start; }.details { grid-template-columns:1fr 1fr; }
 .cities,.layout-focus .cities { grid-template-columns:1fr; }
 .layout-list .city-card,.layout-focus .city-card { height:auto; display:block; }
 .layout-focus .main-city { height:auto; }
}