* { box-sizing: border-box; }

body {
    align-items: center;
    background: radial-gradient(circle at 50% 0%, #183755 0, #08111d 54%, #04080e 100%);
    color: #f7fbff;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100vh;
    padding: 22px;
}

.painel { margin: auto; max-width: 840px; text-align: center; transition: transform .45s ease-out; width: 100%; }
.cabecalho { margin-bottom: 26px; }
.resumo-principal { align-items: center; display: flex; gap: 20px; justify-content: center; }
.relogio-bloco { flex: 1 1 auto; min-width: 0; }
.localizacao, .data, .rotulo, .descricao, .intervalo, .horario { margin: 0; }
.localizacao { color: #b5c8d9; font-size: 15px; letter-spacing: .04em; }
.hora { display: block; font-size: 62px; font-size: clamp(62px, 18vw, 150px); font-weight: 700; letter-spacing: -.07em; line-height: 1; margin: 10px 0; }
.data { color: #c7d6e3; font-size: 16px; text-transform: capitalize; }

.agora {
    align-items: center; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px; display: flex; flex: 0 1 300px; justify-content: center; padding: 18px 22px; text-align: left;
}
.icone { font-size: 62px; line-height: 1; margin-right: 18px; }
.rotulo, .intervalo { color: #96c9f5; font-size: 12px; font-weight: bold; letter-spacing: .14em; }
.temperatura { font-size: 56px; font-weight: bold; letter-spacing: -.06em; line-height: .95; margin: 0; }
.temperatura sup { font-size: .5em; }
.descricao { color: #d6e2ec; font-size: 16px; margin-top: 4px; }
.detalhes { border-left: 1px solid rgba(255,255,255,.18); color: #d3e4f2; display: flex; flex-direction: column; font-size: 14px; gap: 8px; margin-left: 28px; padding-left: 25px; }

.previsao { display: flex; gap: 10px; }
.card { background: rgba(255, 255, 255, .07); border-radius: 16px; flex: 1; min-width: 0; padding: 15px 8px; }
.icone-pequeno { display: block; font-size: 31px; margin: 8px 0 5px; }
.temperatura-card { font-size: 27px; font-weight: bold; margin: 0; }
.horario { color: #b5c8d9; font-size: 13px; margin-top: 4px; }
.aviso { background: rgba(244, 180, 70, .14); border: 1px solid rgba(244, 180, 70, .42); border-radius: 14px; color: #ffe0a2; padding: 18px; }

@media (max-width: 430px) {
    body { padding: 16px; }
    .hora { font-size: 18vw; }
    .resumo-principal { align-items: stretch; flex-direction: column; gap: 14px; }
    .agora { flex-basis: auto; padding: 16px; }
    .icone { font-size: 50px; margin-right: 12px; }
    .temperatura { font-size: 48px; }
    .detalhes { font-size: 12px; margin-left: 13px; padding-left: 13px; }
    .card { border-radius: 12px; padding: 12px 4px; }
    .temperatura-card { font-size: 23px; }
}