*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
font-family:  -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/*font-size: 1.05em;*/
 font-size: 1.1rem; font-weight: 500;
color: #35352f;
  line-height: 1.4;

-webkit-font-smoothing: antialiased;
  max-width: 1200px;  /* Defineix l'amplada màxima que vulguis (ex: 1200px, 800px, etc.) */
  width: 90%;         /* Permet que s'adapti de forma fluida a pantalles més petites */
  margin: 2% auto; 
}




@media only screen and (min-width: 75em) {
	html{background-color: #f8f8fb;}
	body{border-right: 0px solid #999; padding:1%;  background-color: #fff; border-radius: 20px;}
	}
	@media only screen and (max-width: 600px) {
ul,li {padding-left: 0; margin-left: 0.5em;}
ol,li {padding-left: 0; margin-left: 0.5em;}
.columns { grid-template-columns: auto; }
	}

/* --- CONFIGURACIÓ PER A MÒBILS (Per defecte) --- */
.graella-3, 
.graella-2 {
  display: grid;
  grid-template-columns: 1fr; /* Una sola columna: els elements es col·loquen un sota l'altre */
  gap: 20px;                  /* Separació vertical entre elements */
}

/* --- CONFIGURACIÓ PER A ORDINADORS I TAULETES (Pantalles de més de 768px d'ample) --- */
@media (min-width: 768px) {
   .graella-3 {
    grid-template-columns: repeat(3, 1fr); /* Es transforma en 3 columnes en horitzontal */
  }
  .graella-2 {
    grid-template-columns: repeat(2, 1fr); /* Es transforma en 2 columnes en horitzontal */
  }
  }

.imatge-destacada {
  max-width: 100%;    /* Impedeix que la imatge sigui més gran que el seu contenidor */
  height: auto;       /* Manté la proporció original de la imatge perquè no es deformi */
  display: block;     /* Elimina un petit espai en blanc que els navegadors deixen a sota */
  margin: 0 0 1rem 0;
}

.centrat{ text-align:center; }

.panell {
  background-color: #f9f9f9;  /* El color de fons gris clar corregit */
  border-radius: 8px;         /* Arrodonit suau i elegant, sense passar-se */
  padding: 20px;              /* Espai interior perquè el text no toqui les vores arrodonides */
  border: 1px solid #e0e0e0;  /* Opcional: una vora molt fina per donar-li més definició */
  margin-bottom: 1rem;
}
/* Estil per a pantalles petites (mòbils) */
@media (max-width: 768px) {
  .panell {
    padding: 10px;
  }
}

/* Panell Groc (Ideal per a avisos o alertes suaus) */
.panell-groc {
  background-color: #fff9e6;
  border-color: #ffe0b2;
}

/* Panell Verd (Ideal per a èxits, confirmacions o coses correctes) */
.panell-verd {
  background-color: #eef7ee;
  border-color: #c8e6c9;
}

/* Panell Vermell (Ideal per a errors, perills o atenció important) */
.panell-vermell {
  background-color: #fdf2f2;
  border-color: #ffcdd2;
}

/* 💡 Extres que et poden ser útils: */

/* Panell Blau (Ideal per a informació general, enllaços o consells) */
.panell-blau {
  background-color: #edf5fd;
  border-color: #d0e3ff;
}

/* Panell Lila (Ideal per a novetats, característiques prèmium o destacats) */
.panell-lila {
  background-color: #f5f0fa;
  border-color: #e1d5f5;
}


/* El quadre de text de cerca */
.formulari-cerca input[type="text"] {
  flex-grow: 1;             /* Ocupa l'espai restant de manera fluida */
  padding: 10px 14px;       /* Mida interior espaiosa i còmoda */
  font-size: 15px;          /* Text clar i llegible */
  border: 1px solid #d1d5db; /* Gris suau (estil modern) en lloc del #ccc fort */
  border-radius: 6px;       /* Cantonades lleugerament arrodonides */
  outline: none;            /* Elimina la vora blava per defecte del navegador */
  transition: all 0.2s ease; /* Transició suau per als efectes visuals */
}

/* Efecte modern quan l'usuari fa clic per escriure */
.formulari-cerca input[type="text"]:focus {
  border-color: #4f46e5;    /* Vora en un color lila/blau modern */
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); /* Resplendor suau al voltant */
}

/* El botó de cerca */
.btn-wiki {
  border: none;             
  cursor: pointer;          
  padding: 10px 20px;       
  font-size: 15px;          
  font-weight: 500;         
  background-color: #4b5563; /* Gris fosc suau / Blau grisenc (Més clar que l'anterior) */
  color: #ffffff;           
  border-radius: 6px;       
  transition: background-color 0.2s ease; 
}

/* Efecte en passar el ratolí pel damunt del botó */
.btn-wiki:hover {
  background-color: #374151; /* Es fa una mica més fosc en passar el ratolí */
}

p code {background-color: #f1f1f1;}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
a:link{
	text-decoration: none;
  color: #00e;
  background: transparent;
}
a:hover {
    color: #001a1a;
    text-decoration: underline
}
a:visited {
  /*color: #529;*/
  color: #007a7a;
  text-decoration: underline;
}
p, ul, ol, pre, blockquote {margin-bottom: 0.8em;}
header {margin-bottom: 1.5em;}
p.header {margin-bottom: 0;}
h1 {font-size: 1.60em;}
h1.titol {margin-top: 1rem;}
h2 {margin: 0.5em 0 0.3em 0; font-size: 1.45em;}
h2.titol {margin: 0.5em 0 0.3em 0; font-size: 1.05em;}
hr {margin-bottom: 0.5em; margin-top:1em;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.badge {
  background-color: yellow;
  color: red; font-weight: bold;
  padding: 2px 8px;
  text-align: center;
  border-radius: 5px;
}
footer p{margin-bottom: 0;}
strike{text-decoration: line-through; color: blue; text-decoration-color:black;}
.vermell {color: red;}
.verd {color: green;}
.gris {background-color: #f8f8fb; padding: 0.5em;}

img.responsive {
max-width: 100%; 
display: block; 
height: auto;
/*  border-radius: 3%;
  object-fit: cover; */
border:2px solid #eee; padding: 0.5%;
}
img.float {  border-radius: 50%;
  object-fit: cover;
  }
textarea{padding: 0.5%;}
.upload {padding: 0.5em; background-color: #eee;}
input[type=submit] {
	margin-top: 1%;
    padding:5px 15px; 
    background:#ddd; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

/* ==========================================================================
   ESTILS PER AL POP-UP D'IMATGES (NOMÉS CSS)
   ========================================================================== */

/* 1. L'overlay (fons fosc) que ocupa tota la pantalla */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85); /* Fons negre semi-transparent */
    z-index: 99999;                  /* S'assegura que quedi per sobre de tot */
    
    /* Inicialment ocult i invisible per a l'efecte de transició */
    display: none;
    opacity: 0;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

/* 2. LA CLAU: Quan l'ID del pop-up coincideix amb el # de la URL, es mostra */
.popup-overlay:target {
    display: flex;
    opacity: 1;
}

/* 3. El contenidor blanc on es col·loca la foto gran i la creu */
.popup-contingut {
    position: relative;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.5);
}

/* 4. Resolució automàtica de la imatge gran perquè no desquadri mai */
.popup-contingut img {
    max-width: 100%;
    max-height: 85vh; /* Evita que la foto sigui més alta que la pantalla */
    display: block;
    border-radius: 2px;
}

/* 5. El botó rodó de tancar (la X) - Forçat per evitar interferències */
.popup-tancar {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #e74c3c !important; /* Vermell viu obligatori d'entrada */
    color: #ffffff !important;      /* Creu blanca obligatòria */
    text-decoration: none !important;
    font-size: 26px !important;
    font-weight: bold !important;
    line-height: 30px !important;
    width: 34px !important;
    height: 34px !important;
    text-align: center !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    display: block !important;       /* S'assegura que manté la forma rodona */
}

/* Efecte en passar el ratolí per sobre */
.popup-tancar:hover {
    background: #c0392b !important; /* Vermell una mica més fosc */
    color: #ffffff !important;
}


/* El div contenidor amb una mida fixa o màxima */
.contenidor-flotant {
  width: 100%;          /* O el tamany que vulguis (ex: 100%, 40rem...) */
  border: 2px solid #999;
  padding: 15px;
  background-color: #f9f9f9;
  margin-top: 0.5rem;
  /* CLAU: Evita que el div col·lapsi a causa del float de la imatge */
  display: flow-root;    
}

/* La imatge que flota */
.imatge-flotant {
  float: left;
  
  /* CLAU: Controla el tamany de la imatge respecte al div */
  max-width: 25%;        /* La imatge mai ocuparà més del 40% de l'amplada del div */
  height: auto;          /* Manté la proporció de la imatge sense deformar-la */
  
  /* Opcional: Marges per separar el text de la imatge */
  margin-right: 15px;
  margin-bottom: 10px;
}


/* Estils generals pel footer */
.footer-simple {
    margin-top: 3rem;
    border-top: 1px solid #ccc; /* Barra horitzontal discreta per delimitar */
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between; /* Separa l'esquerra i la dreta */
    align-items: center;
    font-family: sans-serif;
    font-size: 0.9rem;
    color: #555; /* Text gris fosc, suau */
}

/* Agrupació de text i enllaços */
.footer-esquerra {
    display: flex;
    gap: 1.5rem; /* Espai entre text i enllaços */
    align-items: center;
}

/* Forçar el copyright en minúscules */
.copyright {
    text-transform: lowercase;
}

/* Enllaços clars i sense subratllat */
.footer-links a {
    color: #555;
    text-decoration: none;
    margin-right: 1rem;
    text-transform: lowercase; /* Opcional: manté la coherència amb el nom */
}

.footer-links a:hover {
    color: #000; /* Canvi subtil en passar el ratolí */
    text-decoration: underline;
}

/* Caixa de cerca flotant a la dreta */
.footer-dreta .cercador-box input {
    padding: 0.4rem 0.8rem;
    border: 1px solid #999;
    border-radius: 4px;
    font-size: 0.85rem;
    outline: none;
}

.footer-dreta .cercador-box input:focus {
    border-color: #888; /* Canvi de vora en fer-hi clic */
}

/* Adaptació per a pantalles petites (mòbils) */
@media (max-width: 600px) {
    .footer-simple {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 1.5rem 1rem;
    }
    
    .footer-esquerra {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .footer-dreta {
        width: 100%;
    }
    
    .footer-dreta .cercador-box input {
        width: 100%; /* El cercador ocupa tota l'amplada en mòbils */
    }
}