* {
     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;
 }

 .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;
     }
 }