/* ===== Clima Brasil — tudo escopado em #clima-app ===== */ /* Fontes carregadas via (preconnect) no — não usar @import (render-blocking). */ #clima-app *{box-sizing:border-box} #clima-app{ /* Tema escuro (padrão / noite) */ --bg:#0c1020; --card:#151b30; --card2:#1c2440; --line:rgba(255,255,255,.08); --txt:#eef1f8; --mut:#9aa3bd; --acc:#5aa9ff; --acc2:#7c5cff; --grid:rgba(255,255,255,.07); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background:var(--bg); line-height:1.5; padding:clamp(16px,4vw,40px) 16px 48px; border-radius:18px; transition:background .4s ease,color .4s ease; } /* Tema claro (dia) */ #clima-app[data-theme="light"]{ --bg:#f3f6fc; --card:#ffffff; --card2:#eef2f9; --line:rgba(15,30,60,.10); --txt:#172033; --mut:#5d6b85; --acc:#2563eb; --acc2:#6d4aff; --grid:rgba(15,30,60,.08); } #clima-app[data-theme="light"] .clima-card{box-shadow:0 1px 3px rgba(15,30,60,.05)} #clima-app .clima-wrap{max-width:920px;margin:0 auto} /* Breadcrumb */ #clima-app .clima-bc{font-size:.85rem;color:var(--mut);margin-bottom:14px} #clima-app .clima-bc a{color:var(--acc);text-decoration:none} #clima-app .clima-bc a:hover{text-decoration:underline} /* Hero / busca */ #clima-app .clima-eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--acc);font-weight:600;margin:0} #clima-app .clima-title{ font-family:'Bricolage Grotesque',sans-serif;font-weight:800; font-size:clamp(1.7rem,5vw,2.9rem);line-height:1.05;margin:.35rem 0 .6rem;letter-spacing:-.02em;color:var(--txt); } #clima-app .clima-lead{color:var(--mut);margin:0 0 1.1rem} #clima-app .clima-hero-search{margin-bottom:6px} #clima-app .clima-searchwrap{max-width:560px;margin-bottom:6px} #clima-app .clima-search{ display:flex;align-items:center;gap:8px;background:var(--card); border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px; max-width:560px;transition:border-color .2s,box-shadow .2s; } #clima-app .clima-search:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px rgba(90,169,255,.15)} #clima-app .clima-search-ico{opacity:.6;font-size:1rem} #clima-app #clima-input{flex:1;background:transparent;border:0;outline:0;color:var(--txt);font-size:1rem;font-family:inherit;min-width:0} #clima-app #clima-input::placeholder{color:var(--mut)} #clima-app #clima-btn{ background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:0; border-radius:10px;padding:10px 18px;font-weight:600;font-size:.95rem;cursor:pointer; font-family:inherit;transition:transform .12s,filter .2s;white-space:nowrap; } #clima-app #clima-btn:hover{filter:brightness(1.08)} #clima-app #clima-btn:active{transform:scale(.97)} #clima-app .clima-sugg{list-style:none;max-width:560px;margin:6px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden} #clima-app .clima-sugg li{padding:10px 14px;cursor:pointer;font-size:.92rem;display:flex;justify-content:space-between;gap:10px} #clima-app .clima-sugg li:hover,#clima-app .clima-sugg li.active{background:var(--card2)} #clima-app .clima-sugg li small{color:var(--mut)} #clima-app .clima-msg{margin-top:10px;color:#ffb4b4;font-size:.92rem} /* Card principal adaptativo */ #clima-app .clima-feature{ position:relative;border-radius:20px;overflow:hidden;margin:22px 0; border:1px solid var(--line);min-height:230px; background:linear-gradient(135deg,#2b3656,#1a2138);transition:background .8s ease; } #clima-app .clima-feature.is-index{display:none} #clima-app .clima-sky{position:absolute;inset:0;opacity:.9;transition:background .8s ease;pointer-events:none} #clima-app .clima-sky::after{ content:"";position:absolute;width:240px;height:240px;border-radius:50%; top:-90px;right:-40px;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%); filter:blur(6px);animation:climaGlow 7s ease-in-out infinite; } @keyframes climaGlow{0%,100%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(10px) scale(1.06);opacity:.8}} /* Camada de efeitos (chuva / neve / raios / nuvens) */ #clima-app .clima-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none} #clima-app .clima-fx .drop{ position:absolute;top:-12%;width:2px;height:16px;border-radius:2px; background:linear-gradient(transparent,rgba(174,205,255,.85)); animation:climaRain linear infinite; } @keyframes climaRain{to{transform:translateY(130%) translateX(var(--wx,0))}} #clima-app .clima-fx .flake{ position:absolute;top:-8%;color:#fff;opacity:.9; animation:climaSnow linear infinite; } @keyframes climaSnow{to{transform:translateY(140%) translateX(var(--wx,10px)) rotate(180deg)}} #clima-app .clima-fx .cloud{ position:absolute;border-radius:50px;background:rgba(255,255,255,.18);filter:blur(4px); animation:climaCloud linear infinite; } @keyframes climaCloud{from{transform:translateX(-30%)}to{transform:translateX(130%)}} #clima-app .clima-fx .flash{position:absolute;inset:0;background:rgba(255,255,255,.7);opacity:0;animation:climaFlash 6s linear infinite} @keyframes climaFlash{0%,92%,100%{opacity:0}93%{opacity:.55}94%{opacity:0}95%{opacity:.7}96%{opacity:0}} #clima-app .clima-fx .rays{ position:absolute;top:-60px;right:-60px;width:300px;height:300px;border-radius:50%; background:conic-gradient(from 0deg,rgba(255,228,150,.0),rgba(255,228,150,.28),rgba(255,228,150,0) 25%,rgba(255,228,150,.28) 50%,rgba(255,228,150,0) 75%,rgba(255,228,150,.28)); animation:climaSpin 26s linear infinite;mix-blend-mode:screen; } @keyframes climaSpin{to{transform:rotate(360deg)}} #clima-app .clima-feature-body{position:relative;padding:clamp(18px,3.5vw,30px)} #clima-app .clima-now{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} #clima-app .clima-place{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.15rem,3.5vw,1.7rem);margin:0} #clima-app .clima-cond{color:rgba(255,255,255,.85);font-size:.95rem;margin:2px 0 0} #clima-app .clima-temp{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(3.2rem,12vw,5rem);line-height:1;margin:.4rem 0 0;display:flex} #clima-app .clima-deg{font-size:.5em;margin-top:.2em} #clima-app .clima-feels{color:rgba(255,255,255,.8);font-size:.9rem;margin:.2rem 0 0} #clima-app .clima-feels strong{color:#fff} #clima-app .clima-now-icon{font-size:clamp(3.4rem,13vw,5.5rem);line-height:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3));animation:climaFloat 5s ease-in-out infinite;position:relative;z-index:1} @keyframes climaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} #clima-app .clima-metrics{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 0;padding:0} #clima-app .clima-metrics li{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px} #clima-app .clima-metrics span{display:block;color:rgba(255,255,255,.7);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em} #clima-app .clima-metrics strong{font-size:1.1rem;font-weight:700} #clima-app .clima-feature.loading .clima-feature-body{opacity:.65} /* Cards genéricos */ #clima-app .clima-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,24px);margin-bottom:18px} #clima-app .clima-h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.15rem;margin:0 0 14px;display:flex;align-items:baseline;gap:10px;color:var(--txt)} #clima-app .clima-h2 small{color:var(--mut);font-weight:500;font-size:.85rem} #clima-app .clima-chart-box{position:relative;height:230px} #clima-app .clima-chart{width:100%;height:100%;display:block} #clima-app .clima-chart .cl-line{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} #clima-app .clima-chart .cl-grid{stroke:var(--grid);stroke-width:1} #clima-app .clima-chart text{fill:var(--mut);font-size:11px;font-family:'Inter',sans-serif} #clima-app .clima-chart .cl-dot{fill:#fff;stroke:var(--acc);stroke-width:2;opacity:0} #clima-app .clima-chart .cl-cursor{stroke:var(--line);stroke-width:1;opacity:0} #clima-app .clima-cht-tip{ position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-130%); background:var(--card2);border:1px solid var(--line);border-radius:8px; padding:3px 8px;font-size:.8rem;font-weight:600;white-space:nowrap;transition:opacity .12s;color:var(--txt); } #clima-app .clima-seo-text p{color:var(--mut);margin:0} /* 7 dias */ #clima-app .clima-daily{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} #clima-app .clima-day{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center} #clima-app .clima-day b{display:block;font-size:.78rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em} #clima-app .clima-day .ic{font-size:1.7rem;margin:6px 0} #clima-app .clima-day .mx{font-weight:700} #clima-app .clima-day .mn{color:var(--mut);font-size:.85rem} /* Capitais (agora são links) */ #clima-app .clima-capitals{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} #clima-app .clima-cap{ background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:14px; cursor:pointer;transition:transform .15s,border-color .2s;display:flex;align-items:center;justify-content:space-between;gap:8px; text-decoration:none;color:var(--txt); } #clima-app .clima-cap:hover{transform:translateY(-3px);border-color:var(--acc)} #clima-app .clima-cap .cap-name{font-weight:600;font-size:.92rem} #clima-app .clima-cap .cap-uf{color:var(--mut);font-size:.75rem} #clima-app .clima-cap .cap-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.5rem} #clima-app .clima-cap .cap-ic{font-size:1.7rem} /* Lista de links internos */ #clima-app .clima-linklist{display:flex;flex-wrap:wrap;gap:8px} #clima-app .clima-linklist a{ background:var(--card2);border:1px solid var(--line);border-radius:999px; padding:7px 14px;font-size:.88rem;color:var(--txt);text-decoration:none;transition:border-color .2s,transform .12s; } #clima-app .clima-linklist a:hover{border-color:var(--acc);transform:translateY(-2px)} #clima-app .clima-more{margin:14px 0 0} #clima-app .clima-more a{color:var(--acc);text-decoration:none;font-weight:600} /* Anúncios */ #clima-app .clima-ad{margin:0 0 18px;text-align:center;overflow:hidden} #clima-app .clima-ad-in{margin:18px 0} #clima-app .clima-credit{text-align:center;color:var(--mut);font-size:.8rem;margin-top:18px} @media(max-width:560px){ #clima-app .clima-metrics{grid-template-columns:repeat(2,1fr)} #clima-app .clima-daily{grid-template-columns:repeat(4,1fr)} } @media(prefers-reduced-motion:reduce){ #clima-app .clima-now-icon,#clima-app .clima-sky::after, #clima-app .clima-fx *{animation:none !important} }