*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--mc-bg)}
body{
margin:0;
min-width:320px;
color:var(--mc-text);
background:
radial-gradient(circle at 82% -8%,color-mix(in srgb,var(--mc-solar) 7%,transparent),transparent 28rem),
radial-gradient(circle at 12% 2%,color-mix(in srgb,var(--mc-accent) 7%,transparent),transparent 34rem),
linear-gradient(180deg,var(--mc-sky-a) 0,var(--mc-sky-b) 26rem,var(--mc-bg) 54rem,var(--mc-bg-2) 100%);
font-family:var(--mc-font);
font-size:1rem;
line-height:1.55;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
opacity:.42;
background-image:
radial-gradient(circle at 20% 12%,rgba(255,255,255,.08) 0 1px,transparent 1.3px),
radial-gradient(circle at 76% 18%,rgba(255,255,255,.06) 0 1px,transparent 1.2px);
background-size:42px 42px,66px 66px;
mask-image:linear-gradient(180deg,#000,transparent 46rem);
}
html[data-theme="light"] body::before{opacity:.12}
a{color:var(--mc-accent-2);text-decoration-thickness:.08em;text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,currentColor 52%,transparent);transition:color var(--mc-fast) ease,text-decoration-color var(--mc-fast) ease}
a:hover{color:var(--mc-accent);text-decoration-color:currentColor}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea,summary{outline-offset:3px}
:focus-visible{outline:3px solid var(--mc-focus);outline-offset:3px}
::placeholder{color:var(--mc-placeholder);opacity:1}
:disabled,[aria-disabled="true"]{cursor:not-allowed}
img,svg,iframe{max-width:100%}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{line-height:1.12;text-wrap:balance;color:var(--mc-text)}
h1{font-size:clamp(2rem,1.58rem + 1.45vw,3.2rem);letter-spacing:-.038em}
h2{font-size:clamp(1.35rem,1.14rem + .7vw,1.95rem);letter-spacing:-.024em}
h3{font-size:clamp(1.05rem,.96rem + .3vw,1.27rem)}
p{color:var(--mc-muted)}
::selection{background:color-mix(in srgb,var(--mc-accent) 34%,transparent);color:var(--mc-text)}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.meteo-main{
--mc-section-a:var(--mc-scene-a);
--mc-section-b:var(--mc-scene-b);
--mc-section-c:var(--mc-scene-c);
--mc-section-line:var(--mc-scene-line);
position:relative;
isolation:isolate;
min-height:65vh;
overflow:clip;
background:
radial-gradient(ellipse at 12% 3%,var(--mc-section-a),transparent 34rem),
radial-gradient(ellipse at 88% 11%,var(--mc-section-b),transparent 38rem),
linear-gradient(180deg,transparent 0,transparent 30rem,color-mix(in srgb,var(--mc-section-c) 56%,transparent) 70rem,transparent 100%);
}
.meteo-main::before{
content:"";
position:absolute;
z-index:-1;
width:min(42vw,48rem);
aspect-ratio:1;
right:-16rem;
top:7rem;
border-radius:50%;
border:1px solid color-mix(in srgb,var(--mc-section-line) 26%,transparent);
box-shadow:
0 0 0 4rem color-mix(in srgb,var(--mc-section-a) 18%,transparent),
0 0 0 9rem color-mix(in srgb,var(--mc-section-b) 12%,transparent);
opacity:.36;
pointer-events:none;
}
html[data-theme="light"] .meteo-main::before{opacity:.18}
/* Ambients per família meteorològica. El color contextual no substitueix mai el color semàntic de les dades. */
.meteo-section-forecast,.meteo-section-municipis,.meteo-section-mapes,.meteo-section-home{--mc-section-a:rgba(65,218,213,.15);--mc-section-b:rgba(84,164,255,.11);--mc-section-line:rgba(65,218,213,.55)}
.meteo-section-radar{--mc-section-a:rgba(83,165,255,.13);--mc-section-b:rgba(171,86,255,.12);--mc-section-line:rgba(96,190,255,.56)}
.meteo-section-satellit{--mc-section-a:rgba(97,116,255,.14);--mc-section-b:rgba(174,111,255,.12);--mc-section-line:rgba(143,145,255,.6)}
.meteo-section-astronomia{--mc-section-a:rgba(108,96,255,.17);--mc-section-b:rgba(255,202,94,.09);--mc-section-line:rgba(176,157,255,.58)}
.meteo-section-mar{--mc-section-a:rgba(34,205,190,.16);--mc-section-b:rgba(40,120,224,.12);--mc-section-line:rgba(54,214,197,.6)}
.meteo-section-llamps{--mc-section-a:rgba(170,102,255,.17);--mc-section-b:rgba(255,199,78,.1);--mc-section-line:rgba(191,135,255,.62)}
.meteo-section-clima,.meteo-section-historiques,.meteo-section-estadistiques,.meteo-section-tendencies{--mc-section-a:rgba(93,195,145,.12);--mc-section-b:rgba(255,181,91,.075);--mc-section-line:rgba(101,190,149,.5)}
.meteo-section-avisos{--mc-section-a:rgba(255,176,72,.13);--mc-section-b:rgba(255,100,98,.08);--mc-section-line:rgba(255,189,81,.58)}
.meteo-section-models,.meteo-section-atmosfera{--mc-section-a:rgba(108,126,255,.14);--mc-section-b:rgba(65,207,218,.1);--mc-section-line:rgba(123,145,255,.58)}
.meteo-section-aire{--mc-section-a:rgba(83,205,142,.13);--mc-section-b:rgba(70,199,216,.09);--mc-section-line:rgba(91,207,151,.55)}
.meteo-section-incendis{--mc-section-a:rgba(255,128,73,.14);--mc-section-b:rgba(255,76,74,.08);--mc-section-line:rgba(255,142,80,.58)}
.meteo-section-sequera{--mc-section-a:rgba(216,165,77,.11);--mc-section-b:rgba(101,125,195,.08);--mc-section-line:rgba(198,154,80,.5)}
.meteo-section-estacions{--mc-section-a:rgba(66,198,180,.12);--mc-section-b:rgba(94,162,232,.08);--mc-section-line:rgba(79,202,187,.52)}
.meteo-page{width:var(--mc-shell);margin-inline:auto;padding-block:clamp(1.25rem,2.5vw,2.75rem) clamp(3rem,6vw,6.5rem);display:grid;gap:var(--mc-step-4);position:relative;z-index:1}
.meteo-document{width:min(76rem,calc(100vw - 2rem))}
.meteo-document>section:not(.meteo-principles){max-width:var(--mc-reading)}
.meteo-wp-content,.meteo-article{width:min(72rem,calc(100vw - 2rem));margin-inline:auto;padding-block:clamp(2rem,5vw,5rem)}
.meteo-article>*{max-width:48rem;margin-inline:auto}.meteo-article>.wp-block-post-featured-image{max-width:72rem}
.meteo-post-card{padding:1.3rem 0;border-bottom:1px solid var(--mc-line)}
[data-meteo-reveal]{will-change:transform,opacity}