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

 body {
     font-family: "Georgia", "Times New Roman", serif;
     background: #f9f4e8;
     background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='%23f9f4e8'/%3E%3Cpath d='M0 0l20 20M20 0l-20 20' stroke='%23e8d8b7' stroke-width='1'/%3E%3C/svg%3E");
     color: #3b2a1a;
     line-height: 1.6;
     padding: 20px;
 }

 .header {
     width: 100%;

     margin: 0 auto;
     border-radius: 15px;
     background-color: #35424a;
     /* Color de fons */
     color: #ffffff;
     /* Color de text */
     padding: 20px 0;
     /* Espai interior (20px a dalt/baix, 0 als costats) */
     text-align: center;
     /* Alineació del text al centre */
     margin-bottom: 20px;
     /* Marge inferior */
 }

 /* Estil per a la capçalera */
 /* 1. Logo al costat del títol:*/
 .header-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     /* Espai entre logo i títol */
 }

 /* Contenidor del logo */
 .logo-container {
     display: flex;
     justify-content: center;
     /* Centra horitzontalment */
     margin-bottom: 15px;
     /* Espai entre el logo i el títol */
     border-radius: 15px;
 }

 /* Enllaç del logo */
 .logo-link {
     display: inline-block;
     /* Permet aplicar dimensions */
     transition: transform 0.3s ease;
     /* Animació suau al hover */
 }

 /* Efecte hover per interactivitat */
 .logo-link:hover {
     transform: scale(1.05);
     /* Lleugerament més gran al passar el ratolí */
 }

 /* Estil de la imatge del logo */
 /* LOGO CENTRAT */
 .logo-img {
     height: 200px;
     /* Altura fixa (ajusta segons necessitis) */
     width: auto;
     /* Amplada proporcional */
     max-width: 400px;
     /* Amplada màxima per evitar que es faci massa gran */
     border-radius: 15px;
     margin-left: 20px;

     /* Opcional: filtre per hover (efecte de color) */
     filter: brightness(1);
     transition: filter 0.3s ease;
 }

 /* Efecte de color al passar el ratolí (opcional) */
 .logo-link:hover .logo-img {
     filter: brightness(1.1);
 }

 /* Versió responsive per a mòbils */
 @media (max-width: 768px) {
     .header-content {
         flex-direction: column;
         /* Disposició vertical en mòbils */
     }

     .logo-img {
         height: 200px;
         /* Logo una mica més gran en mòbils */
         margin-left: 0;
         /* Elimina el marge esquerre */
     }

     .logo-container {
         margin-bottom: 15px;
         /* Espai entre logo i títol */
     }

     .titles {
         text-align: center;
         /* Centra el text en mòbils */
     }

     .main-title {
         font-size: 1.5em;
         /* Títol més petit en mòbils */
     }

     @media (forced-colors: active) {
         /* Estils per a mode d'alt contrast */
     }
 }

 .titles {
     text-align: left;
 }

 .subtitle {
     font-size: 1.2em;
     text-align: center;
     /* Mida de la font */
     color: #fff;
 }

 .main-title {
     font-size: 2.5em;
     /* Mida de la font */
     color: #fff;
     margin-bottom: 10px;
     /* Espai sota el títol */
 }

 /* Llista de navegació */
 .nav-list {
     width: 900px;
     margin: 0 auto;
     list-style: none;
     /* Elimina els punts de la llista */
     display: flex;
     /* Fa que els elements es disposin en fila */
     justify-content: center;
     /* Centra els elements horitzontalment */
     margin-bottom: 20px;
     margin-top: 20px;
     padding-bottom: 20px;
     padding-top: 20px;
     background-color: #ffffff;
     border-radius: 10px;
     border: 4px solid #d8c9a7;
     box-shadow: 0 4px 12px rgba(101, 84, 62, 0.15);
 }

 /* Elements de la navegació */
 .nav-item {
     margin: 0 15px;
     /* Marge als costats de cada element */
 }

 /* Enllaços de navegació */
 .nav-link {
     color: #3b2a1a;
     /* Color del text */
     text-decoration: none;
     /* Elimina el subratllat */
     font-weight: bold;
     /* Text en negreta */
     transition: color 0.3s;
     /* Transició suau per al canvi de color */
 }

 /* Canvi de color en passar el ratolí */
 .nav-link:hover {
     color: #e03d3d;
     /* Color més clar al hover */
 }

 .grid {
     max-width: 980px;
     padding: 1rem;
     margin: 1.5rem auto;
     display: grid;
     gap: 1rem;
     grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
     background-color: #b4b0b0;
     border-radius: 10px;
     border: 4px solid #d8c9a7;
     box-shadow: 0 4px 12px rgba(101, 84, 62, 0.15);
 }

 .card {
     background: #35424a;
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 12px;
     padding: 1rem;
     display: grid;
     /* grid-template-columns: 56px 1fr; */
     align-items: center;
     transition: transform .15s ease, border-color .15s ease;
     gap: 1rem;
     box-shadow: 0 4px 12px rgba(101, 84, 62, 0.15);
 }

 .card h3 {
     color: #ffffff;
     font-size: 1.2rem;
     margin: 0;
 }

 .card p {
     color: #ffffff;
     font-size: 1rem;
     margin: 0;
 }

 .card:hover {
     transform: translateY(-2px);
     /* pujem el card 2 píxels */
     border-color: rgba(255, 255, 255, .18);
     rotate: 2deg;
     /* Apliquem un giro de 5 graus */
 }

 .badge {
     margin-top: .5rem;
     font-size: .78rem;
     color: #7af0c1;
     font-style: italic;
 }

 .desc {
     color: #a8aecd;
     margin: .35rem 0 0;
     font-size: .92rem;
     line-height: 1.35;
 }

 .comparison-section {
     display: flex;
     flex-wrap: wrap;
     gap: 1.5rem;
     justify-content: center;
     margin: 2rem 0;
 }

 .comparison-card {
     flex: 1;
     min-width: 280px;
     max-width: 500px;
     background: var(--card-bg, #fff);
     border: 1px solid var(--card-border, #ccc);
     border-radius: 8px;
     padding: 1.2rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }

 .card-header {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     margin-bottom: 1.2rem;
     padding-bottom: 0.6rem;
     border-bottom: 1px solid var(--border-color, #ddd);
 }

 .card-emblem {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     /* Pots posar aquí un <img> o un SVG */
 }

 .card-title {
     font-size: 1.4rem;
     font-weight: bold;
     margin: 0;
 }

 .card-content .feature-item {
     margin-bottom: 1.1rem;
 }

 .feature-label {
     font-weight: bold;
     display: block;
     margin-top: 0.5rem;
 }

 .feature-value {
     display: block;
     margin-top: 0.2rem;
     line-height: 1.5;
 }

 @media (max-width: 600px) {
     .comparison-section {
         flex-direction: column;
         align-items: center;
     }
 }



 /* Estil del separador */
 .hr-degradat {
     border: 0;
     height: 2px;
     background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);
     margin: 20px 0;
 }
 /* peu foto moderna */
.peu-foto-modern {
  position: relative;        /* Canviat! Imprescindible perquè el ::before es posicioni bé */
  margin-top: 15px;          /* Espai entre la imatge i la línia decorativa */
  padding-top: 12px;         /* Espai entre la línia i el text del peu */
  font-size: 0.85em;         /* Mida de lletra més petita i fina */
  text-align: center;        /* Centrat de tota la vida */
  color: #666666;            /* Un gris elegant que no crida més que el llibre */
  font-style: italic;        /* El toc clàssic de peu de foto */
  line-height: 1.4;
}

.peu-foto-modern::before {
  content: "";               /* Contingut buit per dibuixar la línia */
  position: absolute;        /* Posició absoluta respecte al pare (.peu-foto-modern) */
  top: 0;                    /* Clavada a dalt de tot del bloc de text */
  left: 25%;                 /* Centrada horitzontalment */
  width: 50%;                /* Amplada de la línia (ocupa la meitat de la pantalla) */
  height: 1px;               /* Prigidesa d'un píxel */
  background: linear-gradient(to right, transparent, #888888, transparent); /* Degradat suau */
}

 .img-docs {
     width: auto;
     max-width: 100%;
 }

 .container {
     max-width: 900px;
     margin: 0 auto;
     margin-bottom: 20px;
     background: #fdf9f2;
     border: 1px solid #d8c9a7;
     box-shadow: 0 4px 12px rgba(101, 84, 62, 0.15);
     padding: 30px;
     border-radius: 8px;
     position: relative;
 }

 .container::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border: 2px solid #d4c3a0;
     border-radius: 8px;
     pointer-events: none;
 }

 h1 {
     text-align: center;
     font-size: 1.8rem;
     margin-bottom: 25px;
     color: #5a422a;
     letter-spacing: 1px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
 }

 h2 {
     font-size: 1.6rem;
     margin-bottom: 25px;
     color: #5a422a;
     letter-spacing: 1px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
 }

 h3 {
     font-size: 1.4rem;
     margin-bottom: 15px;
     margin-top: 20px;
     color: #5a422a;
     letter-spacing: 1px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
 }

 p {
     margin-bottom: 10px;
     margin-top: 10px;

 }

 ul {
     margin-left: 20px;
     margin-top: 10px;
 }

 li {
     margin-left: 20px;
     margin-bottom: 5px;
     margin-top: 5px;
 }

 a i {
     margin-left: 0.3em;
     font-size: 0.85em;
     color: #a00000;
     opacity: 0.7;
 }

 .quote {
     font-style: italic;
     margin-bottom: 25px;
     margin-top: 25px;
     border-left: 5px solid #a88c5c;
     padding-left: 10px;
     color: #5a422a;
     letter-spacing: 1px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
 }

 .caixa {
     overflow: auto;

     margin-bottom: 20px;
     background-color: #ccc9c9;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     border: 3px solid #cc8706d0;
     margin-top: 20px;
 }

 /* monarquies castellanes */
 .monarchs-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 1.8rem;
     margin: 2rem 0;
 }

 .monarch-card {
     background: #f3e1c6;
     border: 1px solid #d9c9b5;
     border-radius: 10px;
     padding: 1.4rem;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
     font-family: 'Georgia', 'Times New Roman', serif;
     color: #2d2219;
 }

 .monarch-name {
     font-size: 1.25rem;
     font-weight: bold;
     margin: 0 0 0.5rem 0;
     color: #5a3f2a;
 }

 .monarch-period {
     font-size: 0.95rem;
     font-style: italic;
     color: #6b5542;
     margin-bottom: 0.8rem;
 }

 .monarch-notes {
     font-size: 0.95rem;
     line-height: 1.5;
     color: #333;
 }

 @media (max-width: 600px) {
     .monarchs-grid {
         grid-template-columns: 1fr;
     }
 }

 .timeline {
     position: relative;
     padding-left: 30px;
     border-left: 2px solid #a88c5c;
     margin-top: 20px;
 }

 .event {
     position: relative;
     margin-bottom: 35px;
 }

 .event::before {
     content: "";
     position: absolute;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: #a88c5c;
     border: 2px solid #7d6442;
     left: -33px;
     top: 4px;
     box-shadow: 0 0 0 4px rgba(168, 140, 92, 0.2);
 }

 .year {
     font-weight: bold;
     color: #6b4f2d;
     font-size: 1.2rem;
     margin-bottom: 6px;
 }

 .content {
     font-size: 1.05rem;
     padding-right: 10px;
 }

 .content strong {
     color: #5a422a;
 }

 .expanded-content {
     margin-top: 12px;
     padding-left: 8px;
     border-left: 1px solid #e0d3b8;
     padding-top: 8px;
 }

 .toggle-btn {
     background: #e8d8b7;
     border: 1px solid #c9b590;
     color: #5a422a;
     padding: 4px 10px;
     margin-top: 8px;
     font-size: 0.9rem;
     cursor: pointer;
     border-radius: 4px;
     font-family: inherit;
     transition: background 0.2s;
 }

 .toggle-btn:hover {
     background: #d8c9a7;
 }

 .source {
     font-size: 0.9rem;
     color: #8a765e;
     font-style: italic;
     margin-top: 10px;
     display: block;
 }

 .segadors-section {
     background-color: #fdf6e3;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23fdf6e3"/><path d="M0 0L100 100M100 0L0 100" stroke="%23d4c19c" stroke-width="0.5" opacity="0.3"/></svg>');
     padding: 2.5rem 1.5rem;
     border-radius: 12px;
     margin: 2.5rem 0;
     font-family: 'Georgia', 'Times New Roman', serif;
     color: #2d2219;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
     border: 1px solid #e0d6c2;
 }

 .segadors-header {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-bottom: 1.6rem;
     justify-content: center;
 }

 .segadors-icon {
     font-size: 1.8rem;
     color: #8B5E3C;
 }

 .segadors-title {
     font-size: 1.7rem;
     font-weight: bold;
     color: #5a3f2a;
     margin: 0;
     text-align: center;
 }

 .segadors-excerpt {
     font-style: italic;
     line-height: 1.7;
     margin: 1.5rem 0;
     padding: 0 1rem;
     border-left: 2px solid #c9a87a;
     color: #4a3525;
 }

 .segadors-context {
     margin-bottom: 1.5rem;
     font-size: 0.95rem;
     line-height: 1.6;
     text-align: justify;
 }

 .video-card {
     background: white;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
     max-width: 600px;
     margin: 1.5rem auto;
     border: 1px solid #e0d6c2;
 }

 .video-card iframe {
     width: 100%;
     height: 320px;
     border: none;
 }

 .video-label {
     padding: 0.8rem 1rem;
     background: #f8f0df;
     font-size: 0.9rem;
     color: #5a3f2a;
     text-align: center;
 }

 @media (max-width: 600px) {
     .segadors-section {
         padding: 1.8rem 1rem;
     }

     .segadors-title {
         font-size: 1.4rem;
     }

     .video-card iframe {
         height: 200px;
     }
 }

 /* footer {
     text-align: center;
     margin-top: 40px;
     font-size: 0.95rem;
     color: #7d6442;
 } */

 @media (max-width: 768px) {
     .nav-list {
         width: 100%;
         flex-direction: column;
         align-items: center;
     }

     .nav-item {
         margin: 10px 0;
     }
 }

 @media (max-width: 600px) {
     .container {
         padding: 20px 15px;
     }

     h1 {
         font-size: 1.5rem;
     }

     .year {
         font-size: 1.1rem;
     }
 }

 /* versos dels segadors */
 .romancer-container {
     max-width: 1200px;
     margin: 0 auto;
 }

 .romancer-title {
     text-align: center;
     font-size: 1.4rem;
     margin-bottom: 2rem;
     font-style: italic;
     color: #5a4a3f;
 }

 .romancer-columns {
     display: grid;
     gap: 2rem;
 }

 .romancer-column {
     /* Columnes fluides */
     background-color: #f9f6f0
 }

 .romancer-column p {
     text-align: justify;
     margin-bottom: 1.2rem;
     font-size: 1.1rem;
     text-indent: 0;
 }

 /* Mòbil: 1 columna */
 @media (min-width: 768px) {
     .romancer-columns {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Tablet/Desktop: 2 columnes */
 @media (min-width: 1024px) {
     .romancer-columns {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Estil per a versos destacats (opcional) */
 .romancer-column p:first-of-type {
     font-weight: bold;
 }

 /* Espai extra per a frases repetides com "Segueu arran!" */
 .romancer-column p:nth-child(4),
 .romancer-column p:last-child {
     font-style: italic;
     text-align: center;
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
     font-weight: bold;
     color: #8b5a2b;
 }

 /* fitxa portals desplegables */
 .portals-container {
     max-width: 1200px;
     margin: 2rem auto;
     padding: 0 1rem;
 }

 .portals-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
     margin-top: 1.5rem;
 }

 .portal-card {
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .portal-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }

 .portal-card details {
     padding: 1.25rem;
     font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
     color: #2d2d2d;
 }

 .portal-card summary {
     font-weight: 600;
     font-size: clamp(1rem, 2.5vw, 1.125rem);
     color: #1a3a5f;
     cursor: pointer;
     list-style: none;
     position: relative;
     padding-right: 1.5rem;
 }

 .portal-card summary::-webkit-details-marker {
     display: none;
 }

 .portal-card summary::after {
     content: "▶";
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     transition: transform 0.3s ease, color 0.2s ease;
     color: #5a7d9a;
 }

 .portal-card details[open] summary::after {
     content: "▼";
     transform: translateY(-50%) rotate(0deg);
 }

 .portal-card p {
     margin-top: 0.75rem;
     font-size: 0.95rem;
     line-height: 1.5;
     color: #444;
 }

 /* Imatge introductòria */
 .portals-image {
     width: 100%;
     height: auto;
     border-radius: 12px;
     margin: 1.5rem auto;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }

 .portals-caption {
     text-align: center;
     font-size: 0.95rem;
     color: #555;
     margin-top: 0.5rem;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 /* Accessibilitat: focus visible */
 .portal-card summary:focus {
     outline: 2px solid #1a73e8;
     outline-offset: 2px;
     border-radius: 6px;
 }

 /* Afegit opcional: transició suau al desplegar */
 .portal-card details[open] p {
     animation: fadeIn 0.4s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         margin-top: 0.25rem;
     }

     to {
         opacity: 1;
         margin-top: 0.75rem;
     }
 }

 /* download llibres */
 .llibre-container {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     max-width: 700px;
     margin: 30px auto;
     background: #ffffff;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     align-items: center;
     font-family: 'Segoe UI', Roboto, sans-serif;
 }

 .llibre-portada {
     flex: 1;
     min-width: 200px;
     text-align: center;
 }

 .llibre-portada img {
     max-width: 100%;
     height: auto;
     border-radius: 4px;
     box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
     /* Efecte llibre */
     transition: transform 0.3s ease;
 }

 .llibre-portada img:hover {
     transform: scale(1.02);
 }

 .llibre-contingut {
     flex: 2;
     min-width: 280px;
 }

 .llibre-contingut h2 {
     margin: 0;
     color: #2c3e50;
     font-size: 1.8rem;
 }

 .subtitol {
     color: #e67e22;
     /* Un toc de color terrissa/taronja */
     font-weight: bold;
     margin-top: 5px;
     text-transform: uppercase;
     font-size: 0.85rem;
 }

 .descripcio {
     color: #555;
     line-height: 1.6;
     margin: 20px 0;
 }

 .accions-baixa {
     display: flex;
     gap: 15px;
 }

 .btn {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 12px;
     text-decoration: none;
     border-radius: 8px;
     transition: 0.3s;
     text-align: center;
 }

 .btn-text {
     font-weight: bold;
     font-size: 1rem;
 }

 .btn-sub {
     font-size: 0.75rem;
     opacity: 0.8;
 }

 .btn-epub {
     background: #2c3e50;
     color: white;
 }

 .btn-epub:hover {
     background: #1a252f;
 }

 .btn-pdf {
     background: #f1f1f1;
     color: #333;
     border: 1px solid #ddd;
 }

 .btn-pdf:hover {
     background: #e2e2e2;
 }

 @media (max-width: 600px) {
     .llibre-container {
         max-width: 100%;
         flex-direction: column;
         text-align: center;
     }

     .accions-baixa {
         flex-direction: column;
     }
 }

     
        .llibre-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            max-width: 100%;
            margin: 30px auto;
            background: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 3px solid #555252;
            align-items: center;
            font-family: 'Segoe UI', Roboto, sans-serif;
        }

        .llibre-portada {
            flex: 1;
            min-width: 200px;
            text-align: center;
        }

        .llibre-portada img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
            /* Efecte llibre */
            transition: transform 0.3s ease;
        }

        .llibre-portada img:hover {
            transform: scale(1.02);
        }

        .llibre-contingut {
            flex: 2;
            min-width: 100%;
        }

        .llibre-contingut h2 {
            margin: 0;
            color: #2c3e50;
            font-size: 1.8rem;
        }

        .subtitol {
            color: #e67e22;
            /* Un toc de color terrissa/taronja */
            font-weight: bold;
            margin-top: 5px;
            text-transform: uppercase;
            font-size: 0.85rem;
        }

        .descripcio {
            color: #555;
            line-height: 1.6;
            margin: 20px 0;
        }

        .accions-baixa {
            display: flex;
            gap: 15px;
        }

        .btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px;
            text-decoration: none;
            border-radius: 8px;
            transition: 0.3s;
            text-align: center;
        }

        .btn-text {
            font-weight: bold;
            font-size: 1rem;
        }

        .btn-sub {
            font-size: 0.75rem;
            opacity: 0.8;
        }

        .btn-epub {
            background: #2c3e50;
            color: white;
        }

        .btn-epub:hover {
            background: #1a252f;
        }

        .btn-pdf {
            background: #f1f1f1;
            color: #333;
            border: 1px solid #ddd;
        }

        .btn-pdf:hover {
            background: #e2e2e2;
        }

        @media (max-width: 600px) {
            .llibre-container {
                max-width: 100%;
                flex-direction: column;
                text-align: center;
            }

            .accions-baixa {
                flex-direction: column;
            }
        }

        
/*barra de progrés de lectura*/
/* El contenidor de la barra (el fons) */
.progress-container {
  width: 100%;
  height: 24px;
  /* Més ample per encabir text */
  background: #f1f1f1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centrar text */
}

/* La barra que creixerà */
.progress-bar {
  height: 100%;
  background: #4caf50;
  /* Verd maco */
  width: 0%;
  transition: width 0.1s;
  position: absolute;
  /* Perquè no empenyi el text */
  left: 0;
  top: 0;
  z-index: 1;
  /* Sota el text */
}

/* Text de la llegenda */
.progress-text {
  position: relative;
  z-index: 2;
  /* Sobre la barra */
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Footer */
.container-footer {
  /* Contenidor principal */
  width: 100%;
  /* Amplada del 90% de la finestra */
  /*max-width: 1200px;*/
  /* Amplada màxima */
  margin: 0 auto;
  /* Centrat horitzontalment */
  padding: 20px;
  /* Espaiat intern */
}

footer {
  background-color: var(--bg-secondary);
  padding: 60px 0 20px;
  border-radius: 12px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column h3 {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  position: relative;
  display: inline-block;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 3px;
  background: var(--primary-color);
  bottom: -8px;
  left: 0;
  border-radius: 2px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--text-light);
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

.footer-contact p {
  margin-bottom: 0.8rem;
  color: var(--text-light);
}

.footer-contact i {
  margin-right: 10px;
  color: var(--primary-color);
}

.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-social a {
  color: var(--text-light);
  font-size: 1.2rem;
  transition: var(--transition);
}

.footer-social a:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

.copyright {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-light);
  font-size: 0.9rem;
}
/* Estils per al mòdul de compartir (Refactorització) */
.share-card {
  max-width: 800px;
  margin: 40px auto 0 auto;
  padding: 24px 16px 16px 16px;
  background: #0A95A8;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.share-card h2 {
  color: #ffffff;
  margin-bottom: 16px;
}

.share-link {
  margin: 0 10px;
  text-decoration: none;
  display: inline-block;
}

.share-icon-img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  filter: grayscale(0.2);
  transition: filter 0.2s;
}

.share-link:hover .share-icon-img {
  filter: grayscale(0);
}

.share-instructions {
  margin-top: 18px;
  color: #000000;
  font-size: 0.98em;
  font-weight: 500;
}

.share-actions {
  margin-top: 22px;
}

/* L'estil del botó */
.boto-gris {
  background-color: #d1d5db;
  color: #1f2937;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
}

/* Efecte en passar el ratolí */
.boto-gris:hover {
  background-color: #cccccc;
  /* Gris una mica més fosc */
}