:root{--font-family-base:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-body:16px;--font-size-label:.78rem;--font-size-sm:.72rem;--font-size-md:1rem;--font-size-lg:clamp(1.7rem, 5vw, 2.6rem);--font-size-hero:clamp(5rem, 20vw, 8rem);--radius-card:28px;--radius-pill:14px;--shadow-card:0 20px 60px #192d4629;--color-surface-base:#dbeafe;--color-text-primary:#14213d;--color-text-secondary:#52617a;--color-white:#fff;--color-amber:#f59e0b;--color-blue-strong:#2563eb;--color-border:#14213d26;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--breakpoint-mobile:320px;--breakpoint-tablet:600px;--breakpoint-desktop:1024px;--breakpoint-tv:1920px;--touch-target:44px}*{box-sizing:border-box}html{min-width:var(--breakpoint-mobile);min-height:100%;font-family:var(--font-family-base);font-size:var(--font-size-body);color:var(--color-text-primary);background:var(--color-surface-base);font-synthesis:none;text-rendering:optimizelegibility}body{min-width:var(--breakpoint-mobile);min-height:100vh;margin:0;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.cartao-clima,.previsao,.transicao-localizacao{background:var(--card)}}@supports not (inset:1px){.app-clima:after{top:0;bottom:0;left:0;right:0}}@supports not (gap:8px){.busca-cidade__linha{display:block}.busca-cidade__linha>*+*{margin-top:8px}}.app-clima{--bg:linear-gradient(135deg, #f9d65c, #fff 55%, #bfe5ff);--card:#fffffff5;--text:#10213c;--accent:#f59e0b;--muted:#4a5b73;z-index:1;min-height:100vh;padding:max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 24px) max(env(safe-area-inset-left), 16px);color:var(--text);background:var(--bg);isolation:isolate;transition:background 1s,color 1s;position:relative}.app-clima[data-theme=rain],.app-clima[data-theme=storm]{--card:#1f2937f5;--text:#f5f7fb;--accent:#93c5fd;--muted:#cbd5e1}.app-clima[data-theme=cold],.app-clima[data-theme=snow]{--bg:linear-gradient(135deg, #a7d8f5, #f8fcff 72%, #cfe6f7);--card:#f8fcfff5;--text:#17314f;--accent:#2563eb;--muted:#3f566c}.app-clima[data-theme=cloudy]{--bg:linear-gradient(145deg, #b8c9d6, #e5eef5 55%, #9fb9cf);--card:#f5f9fcf5;--text:#22364c;--accent:#5b7f9d;--muted:#34475a}.app-clima[data-theme=night]{--bg:linear-gradient(145deg, #08152f, #203b73 58%, #172a50);--card:#08152ff5;--text:#f8fbff;--accent:#f8d66d;--muted:#b8c7e8}.app-clima[data-theme=storm]{--bg:linear-gradient(145deg, #111827, #27364a 56%, #111827)}.app-clima[data-theme=rain]{--bg:linear-gradient(145deg, #334155, #475569 52%, #334155);--muted:#f1f5f9}.app-clima[data-theme=clear]{--bg:linear-gradient(135deg, #f9d65c, #fff 55%, #bfe5ff)}.app-clima[data-theme=heat]{--bg:linear-gradient(135deg, #fbbf24, #f59e0b 48%, #f97316);--card:#ffffffe6;--text:#422006;--accent:#f97316;--muted:#6b4a1d}.app-clima[data-theme=wind]{--bg:linear-gradient(135deg, #dbeafe, #eff6ff 50%, #cbd5e1);--card:#fffffff2;--text:#1f2a37;--accent:#3b82f6;--muted:#536579}.app-clima[data-theme=uv]{--bg:linear-gradient(135deg, #fbbf24, #fde68a 42%, #f9a8d4);--card:#ffffffeb;--text:#3d1b4f;--accent:#ec4899;--muted:#5d3f64}.app-clima[data-theme=clear]:before{z-index:0;content:"";pointer-events:none;background:#fff28fd1;border-radius:50%;width:100px;height:100px;animation:5s ease-in-out infinite sun-pulse;position:fixed;top:13%;right:12%;box-shadow:0 0 55px #ffe25cb3}.app-clima:after{z-index:-1;background:var(--bg);content:"";transition:background 1s;position:fixed;top:0;bottom:0;left:0;right:0}.weather-background{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;right:0}.playground-panel{z-index:10;border:1px solid color-mix(in srgb, var(--text) 15%, transparent);color:#f8fafc;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0f172ab8;border-radius:20px;width:min(92vw,320px);padding:16px;position:fixed;bottom:16px;right:16px;box-shadow:0 22px 50px #0f172a4d}.playground-panel__header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}.playground-panel__badge{color:#bfdbfe;letter-spacing:.08em;background:#60a5fa33;border-radius:999px;justify-content:center;align-items:center;padding:4px 8px;font-size:.65rem;font-weight:800;display:inline-flex}.playground-panel h2{margin:0;font-size:1rem}.playground-panel p{color:#e2e8f0cc;margin:0 0 12px;font-size:.8rem;line-height:1.5}.playground-controls{flex-wrap:wrap;gap:8px;display:flex}.playground-button{color:#e2e8f0;cursor:pointer;background:#0f172a80;border:1px solid #94a3b866;border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:700}.playground-button.is-active{color:#fff;background:#3b82f63d;border-color:#7dd3fccc}.playground-status{color:#e2e8f0;border-top:1px solid #94a3b833;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;font-size:.72rem;display:flex}.playground-status strong{color:#f8fafc;text-transform:capitalize}.conteudo-clima{z-index:1;width:min(100%,1120px);min-height:calc(100dvh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));min-height:calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));margin:0 auto;padding:0;display:grid;position:relative}.cabecalho{flex-direction:column;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.marca{letter-spacing:.02em;align-items:center;gap:10px;font-size:1rem;font-weight:800;display:flex}.marca__icone{border:1px solid color-mix(in srgb, var(--text) 22%, transparent);background:var(--card);border-radius:50%;place-items:center;width:38px;height:38px;display:grid;box-shadow:0 10px 30px #1a2d481f}.busca-cidade{width:100%}.busca-cidade label{color:var(--muted);text-transform:uppercase;margin-bottom:7px;font-size:.78rem;font-weight:700;display:block}.busca-cidade__linha{flex-wrap:wrap;gap:8px;display:flex}.busca-cidade input{min-width:0;min-height:var(--touch-target);border:1px solid color-mix(in srgb, var(--text) 22%, transparent);color:var(--text);background:var(--card);border-radius:14px;outline:none;flex:220px;padding:11px 14px;box-shadow:0 8px 24px #182d4814}.busca-cidade input::placeholder{color:var(--muted);opacity:1}.busca-cidade button{min-height:var(--touch-target);min-width:var(--touch-target);color:var(--card);background:var(--text);border:0;border-radius:14px;padding:11px 16px;font-weight:700}.app-clima[data-device=tv] .cartao-clima,.app-clima[data-device=tv] .previsao,.app-clima[data-device=tv] .transicao-localizacao{border-width:2px;box-shadow:0 28px 72px #0b111b80}.app-clima[data-device=tv] .cartao-clima h1{font-size:max(2.2rem,min(3vw,3.4rem))}.app-clima[data-device=tv] .linha-temperatura strong{font-size:max(6rem,min(10vw,9rem))}.app-clima[data-device=tv] .cartao-dia{min-height:130px}.grade-clima{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px;display:grid}button:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 70%, white 30%);outline-offset:3px}input:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 70%, white 30%);outline-offset:3px}[role=button]:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 70%, white 30%);outline-offset:3px}a:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 70%, white 30%);outline-offset:3px}.cartao-clima,.previsao{border:1px solid color-mix(in srgb, var(--text) 15%, transparent);border-radius:var(--radius-card);background:var(--card);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:background 1s,color 1s,border-color 1s}.alert-banner{border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card)), color-mix(in srgb, var(--accent) 8%, var(--card)));border-radius:16px;align-items:flex-start;gap:10px;margin:18px 0 10px;padding:12px 14px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff2e}.alert-banner:before{background:linear-gradient(180deg, var(--accent), transparent);content:"";width:4px;position:absolute;top:0;bottom:0;left:0;right:auto}.alert-banner__icon{z-index:1;background:color-mix(in srgb, var(--accent) 20%, transparent);width:34px;height:34px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);border-radius:50%;place-items:center;font-size:1.2rem;display:inline-grid;position:relative}.alert-banner strong,.alert-banner small{display:block}.alert-banner strong{letter-spacing:.01em;margin-bottom:4px;font-size:.84rem}.alert-banner small{color:var(--muted);line-height:1.35}.alert-banner__note{color:var(--muted);margin:14px 0 0;font-size:.72rem;line-height:1.4}.cartao-clima{padding:20px;animation:.65s cubic-bezier(.2,.7,.25,1) both weather-content-in}.cartao-clima--loading{animation:none}.cartao-clima--error{align-content:center;justify-items:center;min-height:150px;display:grid}.previsao{animation:.65s cubic-bezier(.2,.7,.25,1) .12s both weather-content-in}.cartao-clima__cabecalho,.linha-temperatura{justify-content:space-between;align-items:center;gap:16px;display:flex}.eyebrow{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 5px;font-size:.75rem;font-weight:800}.cartao-clima h1{margin:0;font-size:max(1.7rem,min(5vw,2.6rem))}.icone-condicao{background:color-mix(in srgb, var(--accent) 18%, transparent);border-radius:50%;place-items:center;width:64px;height:64px;font-size:2rem;display:grid}.linha-temperatura{flex-direction:column;align-items:flex-start;margin:28px 0}.linha-temperatura[aria-live=polite]{min-height:96px}.linha-temperatura strong{letter-spacing:-.08em;font-size:max(5rem,min(20vw,8rem));line-height:.85;display:block}.linha-temperatura span{color:var(--muted);margin-top:12px;font-weight:700;display:block}.linha-temperatura p{color:var(--muted);margin:0 0 5px;font-size:.9rem}.grade-metricas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.grade-metricas div{border:1px solid color-mix(in srgb, var(--text) 8%, transparent);background:color-mix(in srgb, var(--text) 6%, transparent);border-radius:16px;padding:14px 12px}.grade-metricas span,.grade-metricas strong{display:block}.grade-metricas span{color:var(--muted);margin-bottom:5px;font-size:.8rem}.grade-metricas strong{font-size:.97rem}.previsao{padding:20px}.previsao__cabecalho{border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.previsao__cabecalho h2{margin:0;font-size:1rem}.previsao__cabecalho span{color:var(--muted);font-size:.78rem;font-weight:700}.previsao__lista{scrollbar-width:thin;scroll-snap-type:x proximity;grid-auto-columns:minmax(88px,1fr);grid-auto-flow:column;gap:8px;padding:4px 2px 8px;display:grid;overflow-x:auto}.cartao-dia{border:1px solid color-mix(in srgb, var(--text) 8%, transparent);text-align:center;background:linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), color-mix(in srgb, var(--text) 9%, transparent));scroll-snap-align:start;border-radius:16px;gap:7px;min-width:88px;padding:13px 10px;transition:transform .2s,border-color .2s,box-shadow .2s;display:grid}.cartao-dia:hover{border-color:color-mix(in srgb, var(--accent) 30%, transparent);transform:translateY(-1px);box-shadow:0 10px 18px #0f172a14}.cartao-dia>span{color:var(--muted);font-size:.72rem}.cartao-dia strong{font-size:1.4rem}.cartao-dia__label{min-height:2.1em;color:var(--muted);font-size:.68rem;line-height:1.15}.cartao-dia div{justify-content:center;gap:7px;font-size:.8rem;display:flex}.cartao-dia small{color:var(--muted)}.transicao-localizacao{border:1px solid color-mix(in srgb, var(--text) 15%, transparent);min-height:max(260px,min(48svh,360px));color:var(--text);background:var(--card);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;place-content:center;place-items:center;gap:18px;padding:24px;animation:.8s both transition-in;display:grid;position:relative;overflow:hidden;box-shadow:0 20px 60px #192d4629}.transicao-localizacao__cena{place-items:center;width:max(140px,min(48vw,180px));height:max(120px,min(40vw,150px));display:grid;position:relative}.transicao-localizacao__pino{z-index:2;border:2px solid color-mix(in srgb, var(--accent) 60%, transparent);width:60px;height:60px;color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--card));box-shadow:0 0 45px color-mix(in srgb, var(--accent) 30%, transparent);border-radius:50% 50% 50% 8px;place-items:center;font-size:2rem;animation:1.8s ease-in-out infinite pin-breathe;display:grid;position:relative;transform:rotate(-45deg)}.transicao-localizacao__pino:first-letter{transform:rotate(45deg)}.transicao-localizacao__pulso{border:1px solid var(--accent);opacity:0;border-radius:50%;width:100px;height:100px;animation:2.2s ease-out infinite location-pulse;position:absolute}.transicao-localizacao__pulso--two{animation-delay:.75s}.transicao-localizacao__linha{z-index:1;background:linear-gradient(90deg, transparent, var(--accent), transparent);transform-origin:50%;width:180px;height:2px;animation:1.8s ease-in-out infinite line-slide;position:absolute}.transicao-localizacao__orbita{border:1px dashed color-mix(in srgb, var(--accent) 35%, transparent);border-radius:50%;animation:7s linear infinite orbit-spin;position:absolute;top:0;bottom:0;left:0;right:0}.transicao-localizacao__orbita-ponto{background:var(--accent);width:10px;height:10px;box-shadow:0 0 16px var(--accent);border-radius:50%;position:absolute;top:50%;left:-5px}.transicao-localizacao p{color:var(--muted);letter-spacing:.04em;margin:0;font-size:.9rem;font-weight:700}.cartao-clima--error,.cartao-clima--loading{text-align:center}.cartao-clima--error p{color:var(--muted)}.cartao-clima__icon{font-size:2.3rem}.skeleton{background:linear-gradient(90deg, color-mix(in srgb, var(--text) 8%, transparent), color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 8%, transparent));background-size:200% 100%;border-radius:14px;animation:1.4s infinite shimmer}.skeleton--title{width:42%;height:28px}.skeleton--temperature{width:48%;height:120px;margin:30px 0}.skeleton--metrics{width:100%;height:100px}.app-clima[data-theme=rain] .weather-background,.app-clima[data-theme=storm] .weather-background{opacity:.8}.app-clima[data-theme=night]:before{z-index:0;content:"";pointer-events:none;background-image:radial-gradient(circle,#ffffffe6 0,#ffffffe6 1px,#0000 1.5px);background-size:80px 80px;animation:4s ease-in-out infinite alternate twinkle;position:fixed;top:0;bottom:0;left:0;right:0}.app-clima[data-theme=cloudy]:before{z-index:0;content:"";filter:blur(16px);pointer-events:none;background:radial-gradient(at 20%,#ffffffd9 0,#ffffffd9 35%,#0000 36%),radial-gradient(at 70% 55%,#ffffffb3 0,#ffffffb3 28%,#0000 29%);height:180px;animation:18s ease-in-out infinite alternate cloud-drift;position:fixed;top:12%;bottom:auto;left:-10%;right:-10%}.app-clima[data-theme=storm]:after{background:radial-gradient(circle at 85% 22%, #fcd34d38, transparent 25%), var(--bg)}@keyframes shimmer{to{background-position:-200% 0}}@keyframes sun-pulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes twinkle{0%{opacity:.35}to{opacity:.9}}@keyframes cloud-drift{0%{transform:translate(-8%)scaleX(.95)}to{transform:translate(8%)scaleX(1.05)}}@keyframes transition-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes weather-content-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes pin-breathe{0%,to{transform:rotate(-45deg)scale(1)}50%{transform:rotate(-45deg)scale(1.08)}}@keyframes location-pulse{0%{opacity:.7;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}@keyframes line-slide{0%,to{opacity:.2;transform:scaleX(.45)}50%{opacity:1;transform:scaleX(1)}}@keyframes orbit-spin{to{transform:rotate(360deg)}}@media (min-width:600px){.cabecalho{flex-direction:row;align-items:center;gap:20px;margin-bottom:52px}.busca-cidade{width:min(100%,420px);margin-inline-start:0;margin-inline-end:0}.previsao__lista{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;overflow:visible}.cartao-dia{padding:18px}.cartao-clima{padding:24px}.transicao-localizacao{gap:max(18px,min(4vh,25px));min-height:max(300px,min(56vh,470px))}.transicao-localizacao__cena{width:max(150px,min(32vw,210px));height:max(125px,min(26vw,170px))}.linha-temperatura{flex-direction:row;align-items:flex-end}}@media (min-width:1024px){.app-clima{padding-inline-start:max(16px,min(3vw,32px));padding-inline-end:max(16px,min(3vw,32px))}.grade-clima{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}.previsao{grid-column:1/-1}}@media (min-width:1920px){.app-clima{padding:max(env(safe-area-inset-top), 5%) max(env(safe-area-inset-right), 5%) max(env(safe-area-inset-bottom), 5%) max(env(safe-area-inset-left), 5%)}.cartao-clima,.previsao,.transicao-localizacao{border-radius:32px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}