* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  .header-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
  }
  
  .header-content {
      color: #00000040;
      text-transform: uppercase !important;
      font-weight: 700 !important;
      margin: 0;
      font-family: "Lato", sans-serif !important;
      font-size: calc(1.325rem + 0.9vw);
  }
  
  .background {
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      margin: 0;
      padding: 0;
  }
  
  .contenitore {
      display: flex;
      margin-right: 3rem;
  }
  
  .sx {
      width: 60%;
      padding: 10px;
  }
  
  .dx {
      max-width: 30%;
  }
  
  .cx {
      width: 10%;
  }
  
  nav {
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      margin: 0rem 0 0 0rem;
  }
  
  .steps-list {
      list-style: none;
      padding: 0;
      margin: 0;
      counter-reset: step;
      font-family: Arial, sans-serif;
  }
  
  .steps-list>li {
      background: #f9f9fb;
      border-left: 5px solid #4a90e2;
      padding: 15px 20px;
      margin-bottom: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      position: relative;
  }
  
  .steps-list>li::before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      left: -28px;
      top: 50%;
      transform: translateY(-50%);
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .steps-list strong {
      color: #333;
  }
  
  .steps-list em {
      color: #666;
  }
  
  .steps-list ul {
      list-style: disc;
      padding-left: 20px;
      margin-top: 8px;
  }
  
  .faq-gradient {
      font-family: 'Segoe UI', sans-serif;
      max-width: 100%;
      padding: 25px;
      border-radius: 12px;
  }
  
  .faq-gradient-title {
      font-family: 'Segoe UI', sans-serif;
      max-width: 750px;
      padding: 25px;
      border-radius: 12px;
  }
  
  .faq-gradient h2 {
      font-size: 1.6em;
      margin-bottom: 15px;
      color: #2a3b8f;
  }
  
  .faq-gradient p {
      margin-bottom: 14px;
      color: #444;
  }
  
  .faq-gradient a {
      color: #2a3b8f;
      text-decoration: underline;
  }
  
  .faq-gradient .note {
      margin-top: 15px;
      padding: 12px;
      background: rgba(255, 200, 0, 0.15);
      border-left: 4px solid #ffc107;
      border-radius: 6px;
      font-weight: bold;
      color: #7a5d00;
  }
  
  .faq-timeline {
      font-family: 'Segoe UI', sans-serif;
      max-width: 750px;
      position: relative;
      padding-left: 40px;
      border-left: 3px solid #4a90e2;
  }
  
  .faq-timeline p {
      margin-bottom: 20px;
      position: relative;
  }
  
  .faq-timeline p::before {
      content: "●";
      position: absolute;
      left: -26px;
      color: #4a90e2;
      font-size: 1.2em;
      top: 0;
  }
  
  .faq-minimal {
      font-family: 'Segoe UI', sans-serif;
      max-width: 750px;
      padding: 25px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }
  
  .faq-minimal .section-title {
      display: block;
      font-size: 1.2em;
      margin-top: 1rem;
      margin-bottom: 2rem;
      color: #2a3b8f;
      border-bottom: 2px solid #4a90e2;
      padding-bottom: 5px;
  }
  
  .youtube-facade {
      position: relative;
      max-width: 100%;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      margin-bottom: 20px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }
  
  .youtube-facade img {
      width: 100%;
      display: block;
  }
  
  .youtube-facade .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(42, 59, 143, 0.85);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      font-size: 1.5em;
      cursor: pointer;
      transition: background 0.3s ease;
  }
  
  .youtube-facade .play-btn:hover {
      background: rgba(74, 144, 226, 0.9);
  }
  
  .related-articles .article {
      align-items: center;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease;
  }
  
  .template {
      margin: 2rem 3rem 0 3rem;
  }
  
  .list-group {
      margin: 0;
      padding: 0;
      list-style: none;
      border: 1px solid rgba(0, 0, 0, 0.125);
      border-radius: 0.25rem;
      max-width: 100%;
  }
  
  .list-group-flush {
      border: 0;
      border-radius: 0;
  }
  
  .list-group-item {
      position: relative;
      display: block;
      padding: 0.75rem 1.25rem;
      background-color: #fff;
      border: 1px solid rgba(0, 0, 0, 0.125);
      border-left: 0;
      border-right: 0;
      margin-bottom: -1px;
  }
  
  .list-group-flush .list-group-item {
      border-top: 0;
      border-radius: 0;
  }
  
  .list-group-flush .list-group-item:first-child {
      border-top: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  .list-group-flush .list-group-item:last-child {
      margin-bottom: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  }
  
  .list-group-item:hover {
      background-color: #f8f9fa;
  }
  
  .btn-main {
      display: inline-block;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
      text-decoration: none;
      user-select: none;
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 0.375rem;
      padding: 0.55rem 1.25rem;
      background-color: #0d6efd;
      color: #fff;
      transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
  }
  
  .btn-main:hover,
  .btn-main:focus {
      background-color: #0b5ed7;
  }
  
  .btn-main:focus-visible {
      outline: 2px solid #212529;
      outline-offset: 2px;
  }
  
  .btn-main:active {
      background-color: #0b5ed7;
      box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
      transform: scale(0.98);
  }
  
  .footer-links {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem;
      margin-right: 3rem;
  }
  
  .left-links {
      display: flex;
      align-items: center;
  }
  
  .left-links a {
      margin-right: 5px;
  }
  
  @media (max-width:767px) {
      .left-links {
          margin-bottom: 1rem;
      }
      .related-articles .article {
          display: flex;
          align-items: center;
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          transition: transform 0.2s ease;
      }
      .related-articles {
          grid-template-columns: 1fr 1fr;
          gap: 15px;
          margin-bottom: 20px;
      }
      .related-articles .article {
          display: flex;
          align-items: center;
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          transition: transform 0.2s ease;
      }
      .template {
          margin: 2rem 1.5rem 0 1.5rem !important;
      }
      .contenitore {
          display: block;
          margin-right: 0 !important;
      }
      .sx {
          width: 100% !important;
          padding: 0 !important;
      }
      .dx {
          max-width: 100%;
      }
      .cx {
          width: 100%;
      }
      .list-group {
          margin: 0;
          padding: 0;
          list-style: none;
          border: 1px solid rgba(0, 0, 0, 0.125);
          border-radius: 0.25rem;
          max-width: 100% !important;
      }
      .footer-links {
          flex-direction: column;
          align-items: center;
          margin-right: 0;
      }
      .left-links {
          margin-bottom: 1rem;
      }
      .footer-links img {
          margin: 0 auto;
      }
  }
  
  @media (min-width: 768px) and (max-width:1024px) {
      .dx {
          max-width: 30%;
      }
  }
  
  .related-articles .article {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease;
      margin-top: 20px
  }
  
  .related-articles .article:hover {
      transform: translateY(-2px);
  }
  
  .related-articles img {
      width: 70px;
      height: 53px;
      object-fit: cover;
  }
  
  .related-articles a {
      padding: 0 10px;
      font-size: 0.95em;
      color: #2a3b8f;
      text-decoration: none;
  }
  
  .related-articles a:hover {
      text-decoration: underline;
  }
  
  .btn-main {
      background-color: #4a90e2;
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s ease;
  }
  
  .btn-main:hover {
      background-color: #2a3b8f;
  }
  
  .toc-minimal {
      font-family: 'Segoe UI', sans-serif;
      width: 100%;
      padding: 25px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }
  
  .toc-minimal strong {
      font-size: 1.2em;
      margin-bottom: 15px;
      display: block;
      color: #2a3b8f;
      border-bottom: 2px solid #4a90e2;
      padding-bottom: 5px;
  }
  
  .toc-minimal ul {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .toc-minimal li {
      background: #f9f9fb;
      border-left: 5px solid #4a90e2;
      padding: 12px 16px;
      margin-bottom: 12px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .toc-minimal li:hover {
      transform: translateX(4px);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08);
  }
  
  .toc-minimal a {
      color: #2a3b8f;
      text-decoration: none;
      font-size: 0.98em;
  }
  
  .toc-minimal a:hover {
      text-decoration: underline;
  }
  
  .page-title {
      font-family: 'Segoe UI', sans-serif;
      font-size: 1.8em;
      font-weight: bold;
      color: #2a3b8f;
      margin-bottom: 10px;
      border-bottom: 3px solid #4a90e2;
      padding-bottom: 5px;
  }
  
  .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 8px 12px;
      margin: 0 0 20px 0;
      border-radius: 8px;
      background: #f9f9fb;
      font-family: 'Segoe UI', sans-serif;
      font-size: 0.95em;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      color: #1a1a1a;
  }
  
  .breadcrumb a {
      color: #004080;
      text-decoration: none;
  }
  
  .breadcrumb a:hover,
  .breadcrumb a:focus {
      color: #00264d;
      text-decoration: underline;
  }
  
  .breadcrumb .active {
      font-weight: 600;
      color: #000;
  }
  
  .breadcrumb li {
      display: flex;
      align-items: center;
      color: rgba(33, 37, 41, 0.75);
  }
  
  .breadcrumb li+li::before {
      content: "●";
      padding: 0 8px;
      color: #4a90e2;
      font-weight: bold;
  }
  
  .faq-section {
      font-family: 'Segoe UI', sans-serif;
      max-width: 750px;
      padding: 25px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      margin-bottom: 30px;
  }
  
  .faq-section h2 {
      font-size: 1.6em;
      margin-bottom: 15px;
      color: #2a3b8f;
      border-bottom: 2px solid #4a90e2;
      padding-bottom: 5px;
  }
  
  .faq-section details {
      background: #f9f9fb;
      border: 1px solid #e0e6f1;
      border-radius: 8px;
      margin-top: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.2s ease, background 0.2s ease;
  }
  
  .faq-section details:hover {
      background: #f5f8ff;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  }
  
  .faq-section summary {
      list-style: none;
      cursor: pointer;
      font-weight: bold;
      color: #2a3b8f;
      outline: none;
  }
  
  .faq-section summary::-webkit-details-marker {
      display: none;
  }
  
  .faq-section summary::marker {
      display: none;
  }
  
  .faq-section summary::before {
      content: "●";
      color: #4a90e2;
      margin-right: 8px;
      transition: transform 0.3s ease;
      display: inline-block;
  }
  
  .faq-section details[open] summary::before {
      transform: rotate(90deg);
  }
  
  .faq-section p {
      margin-top: 10px;
      color: #444;
      line-height: 1.5;
  }
  
  .faq-timeline {
      font-family: 'Segoe UI', sans-serif;
      padding: 25px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      position: relative;
      margin-bottom: 30px;
      border-left: 3px solid #4a90e2;
  }
  
  .faq-timeline h2 {
      font-size: 1.6em;
      margin-bottom: 25px;
      color: #2a3b8f;
      border-bottom: 2px solid #4a90e2;
      padding-bottom: 5px;
  }
  
  .timeline-item {
      position: relative;
      margin-bottom: 25px;
      padding-left: 25px;
  }
  
  .timeline-item::before {
      content: "";
      position: absolute;
      left: -12px;
      top: 5px;
      width: 18px;
      height: 18px;
      background: #fff;
      border: 3px solid #4a90e2;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .timeline-year {
      font-weight: bold;
      color: #4a90e2;
      font-size: 1.2em;
  }
  
  .timeline-content {
      margin-top: 5px;
      color: #444;
      line-height: 1.5;
  }
  
  .profilo-giocatore li {
      list-style: none;
      position: relative;
      padding-left: 28px;
      margin-bottom: 10px;
  }
  
  .profilo-giocatore li::before {
      content: "➤";
      /* Cambia con ➤, ✦, 🏆 ecc. */
      position: absolute;
      left: 0;
      top: 0;
      font-size: 1.2em;
      color: #4a90e2;
      /* colore coerente con il tuo stile */
  }
  
  .profilo-giocatore {
      list-style: none;
      padding: 0;
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
  }
  
  .profilo-giocatore li {
      position: relative;
      background: #f9f9fb;
      margin-bottom: 10px;
      padding: 10px 14px 10px 40px;
      /* spazio per l'icona */
      border-radius: 8px;
      border-left: 4px solid #4a90e2;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      font-size: 0.95em;
  }
  /* simbolo a sinistra */
  
  .profilo-giocatore li::before {
      content: attr(data-icon);
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.2em;
  }
  
  .stats-table-container {
      max-width: 100%;
      /* Scroll orizzontale su mobile */
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      margin-bottom: 20px;
  }
  
  .stats-table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      border-radius: 12px;
      overflow: hidden;
  }
  
  .stats-table thead {
      background: #4a90e2;
      color: #fff;
  }
  
  .stats-table th,
  .stats-table td {
      padding: 12px 16px;
      text-align: center;
      font-size: 0.95em;
  }
  
  .stats-table tbody tr:nth-child(even) {
      background: #f9f9fb;
  }
  
  .stats-table tbody tr:hover {
      background: #eef4ff;
  }
  /* Mobile friendly */
  
  @media (max-width: 768px) {
      .stats-table th,
      .stats-table td {
          padding: 10px 8px;
          font-size: 0.85em;
      }
  }
  
  .stats-table-container {
      max-width: 100%;
      overflow-x: auto;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      margin-bottom: 20px;
  }
  
  .stats-table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      border-radius: 12px;
      overflow: hidden;
  }
  
  .stats-table thead {
      background: #4a90e2;
      color: #fff;
  }
  
  .stats-table th,
  .stats-table td {
      padding: 12px 16px;
      text-align: center;
      font-size: 0.92em;
      white-space: nowrap;
  }
  
  .stats-table tbody tr:nth-child(even) {
      background: #f9f9fb;
  }
  
  .stats-table tbody tr:hover {
      background: #eef4ff;
  }
  
  .stats-table tfoot {
      background: #f1f5ff;
      font-weight: bold;
  }
  
  .sezioni {
      width: 45%;
  }
  
  .divisione {
      display: flex;
  }
  
  h3 {
      font-size: 1.2rem;
      /* più grande del paragrafo */
      font-weight: 700;
      /* grassetto */
      color: #2a3b8f;
      /* nero */
      margin-top: 1.5rem;
      /* spazio sopra */
      margin-bottom: 0.5rem;
  }
  
  @media (max-width: 768px) {
      .stats-table th,
      .stats-table td {
          padding: 10px 8px;
          font-size: 0.85em;
      }
      .sezioni {
          width: 100%;
      }
      .divisione {
          display: block;
      }
  }
  /* card */
  
  .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 20px;
  }
  
  .season-card {
      background: #f9f9fb;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .season-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }
  
  .season-card h3 {
      font-size: 1.3em;
      margin-bottom: 12px;
      color: #2a3b8f;
      border-bottom: 2px solid #4a90e2;
      padding-bottom: 5px;
  }
  
  .season-card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 12px 0;
  }
  
  .season-card ul li {
      margin-bottom: 6px;
      color: #333;
  }
  
  .season-card strong {
      color: #2a3b8f;
  }
  
  .card-note {
      font-size: 0.9em;
      color: #555;
      background: rgba(74, 144, 226, 0.08);
      padding: 8px 10px;
      border-left: 3px solid #4a90e2;
      border-radius: 6px;
  }
  /* card 2 */
  
  .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
  }
  
  .card {
      background: #fff;
      border-radius: 16px;
      padding: 1.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  }
  
  .card h2 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-weight: 600;
      color: #222;
  }
  
  .card p,
  .card li {
      font-size: 0.95rem;
      line-height: 1.5;
      color: #444;
      margin-bottom: 0.6rem;
  }
  
  .card ul {
      padding-left: 1.2rem;
  }