* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

body {
font-family: Arial, Helvetica, sans-serif;


background: #111111;

color: #ffffff;

min-height: 100vh;


}

/* Capçalera */

.capcalera {
position: sticky;


top: 0;

z-index: 1000;

width: 100%;

min-height: 70px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding: 5px 30px;

background: #181818;

border-bottom: 1px solid #333333;


}

/* Logo */

.logo {
display: flex;


align-items: center;

width: 200px;

height: 60px;

flex-shrink: 0;


}

.logo img {
display: block;


width: 200px;

height: 60px;

object-fit: contain;

transition: transform 0.2s ease;


}

.logo img:hover {
transform: scale(1.05);
}

/* Navegació */

.navegacio {
display: flex;


align-items: center;

justify-content: center;

flex-wrap: wrap;

min-width: 0;


}

.navegacio a {
color: #ffffff;


text-decoration: none;

padding: 10px 14px;

border-radius: 8px;

font-size: 16px;

font-weight: 600;

white-space: nowrap;

transition:
    background-color 0.2s ease,
    color 0.2s ease;

}

.navegacio a:hover {
background: #2a2a2a;
}

/* Configuració d'unitats */

.configuracions-unitats {
display: flex;


align-items: center;

gap: 12px;

flex-shrink: 0;


}

.configuracio-unitats {
display: flex;


align-items: center;

gap: 6px;

color: #bbbbbb;

font-size: 13px;


}

.configuracio-unitats select {
background: #1c1c1c;


color: #ffffff;

border: 1px solid #333333;

border-radius: 6px;

padding: 6px 8px;

cursor: pointer;


}

.configuracio-unitats select:hover {
border-color: #555555;
}

/* Contingut principal */

main {
width: 100%;


max-width: 1200px;

margin: 0 auto;

padding: 40px 25px 60px;


}

/* Introducció */

.introduccio {
text-align: center;


margin-bottom: 40px;


}

.introduccio h1 {
font-size: 42px;


margin-bottom: 10px;


}

.introduccio p {
color: #aaaaaa;


font-size: 17px;


}

/* Valors actuals */

.valors-actuals {
margin-bottom: 50px;
}

#actualitzacio {
text-align: center;


color: #999999;

font-size: 14px;

margin-bottom: 20px;


}

.targetes {
display: grid;


grid-template-columns:
    repeat(4, 1fr);

gap: 20px;


}

.targeta {
background: #1c1c1c;


border: 1px solid #333333;

border-radius: 12px;

padding: 25px;

text-align: center;


}

.targeta h2 {
font-size: 18px;


font-weight: 500;

color: #bbbbbb;

margin-bottom: 15px;


}

.valor {
font-size: 36px;


font-weight: 700;

}

.unitat {
font-size: 20px;


color: #aaaaaa;

font-weight: 400;


}

/* Gràfics */

.seccio-grafics {
width: 100%;
}

.titol-grafics {
font-size: 30px;


margin-bottom: 25px;


}

/* Botons de període */

.periodes {
display: flex;


flex-wrap: wrap;

gap: 10px;

margin-bottom: 25px;


}

.periode {
background: #1c1c1c;


color: #bbbbbb;

border: 1px solid #333333;

border-radius: 8px;

padding: 10px 16px;

font-size: 14px;

cursor: pointer;

transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;


}

.periode:hover {
background: #292929;


color: #ffffff;


}

.periode.actiu {
background: #333333;


color: #ffffff;

border-color: #555555;


}

/* Gràfiques */

.grafica {
background: #1c1c1c;


border: 1px solid #333333;

border-radius: 12px;

padding: 20px;

margin-bottom: 25px;

height: 400px;


}

.grafica canvas {
width: 100% !important;


height: 100% !important;


}

/* Gràfica de vent */

.grafica-vent {
margin-bottom: 0;
}

/* Peu de pàgina */

footer {
text-align: center;


padding: 25px;

color: #666666;

border-top: 1px solid #222222;


}

/* Adaptació per a pantalles mitjanes */

@media (max-width: 1100px) {


.capcalera {
    padding-left: 20px;

    padding-right: 20px;
}


.logo {
    width: 60px;
}


.logo img {
    width: 60px;
}


.navegacio a {
    padding:
        8px 10px;

    font-size: 14px;
}


.configuracions-unitats {
    gap: 6px;
}


.configuracio-unitats label {
    display: none;
}


}

/* Adaptació per a pantalles petites */

@media (max-width: 700px) {


.capcalera {
    min-height: 60px;

    height: auto;

    padding:
        4px 12px;

    gap: 8px;
}


.logo {
    width: 60px;

    height: 60px;
}


.logo img {
    width: 38px;

    height: 38px;
}


.navegacio {
    flex: 1;

    gap: 2px;
}


.navegacio a {
    padding:
        7px 7px;

    font-size: 12px;
}


.configuracions-unitats {
    flex-direction: column;

    align-items: stretch;

    gap: 3px;
}


.configuracio-unitats select {
    padding:
        4px 5px;

    font-size: 11px;
}


main {
    padding:
        30px 15px 50px;
}


.introduccio h1 {
    font-size: 34px;
}


.introduccio p {
    font-size: 15px;
}


.targetes {
    grid-template-columns: 1fr;
}


.grafica {
    height: 300px;

    padding: 12px;
}


.periodes {
    gap: 7px;
}


.periode {
    padding:
        8px 12px;
}


}