/* ===== Página Methodology ===== */

    .methodology-page {
      max-width: var(--max);
      margin: 0 auto;
      padding: 40px 20px 80px;
      font-family: "DM Sans", system-ui, sans-serif;
      color: var(--ink-700);
      line-height: 1.7;
    }

    /* Hero header */
    .methodology-page>header {
      text-align: center;
      margin-bottom: 60px;
      padding-top: 20px;
    }

    .methodology-page>header h1 {
      font-family: "Dosis", sans-serif;
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      color: var(--brand-blue-hero);
      margin-bottom: 20px;
      line-height: 1.2;
    }

    .methodology-page>header .subtitle {
      font-size: clamp(1.25rem, 2.5vw, 1.5rem);
      color: var(--ink-900);
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.5;
      font-weight: 500;
    }

    /* Sections */
    .methodology-page section {
      margin-bottom: 60px;
      scroll-margin-top: 30px;
    }

    .methodology-page section h2 {
      font-family: "Dosis", sans-serif;
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      color: var(--brand-blue);
      margin-bottom: 24px;
      line-height: 1.3;
      position: relative;
      padding-bottom: 12px;
    }

    .methodology-page section h2::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 80px;
      height: 4px;
      background: var(--brand-yellow);
      border-radius: 2px;
    }

    .methodology-page section p {
      margin-bottom: 20px;
      font-size: clamp(16px, 1.8vw, 18px);
      line-height: 1.7;
      color: var(--ink-700);
    }

    .methodology-page section strong {
      color: var(--brand-blue);
      font-weight: 600;
    }

    .methodology-page section a {
      color: var(--brand-blue);
      text-decoration: underline;
      text-underline-offset: 3px;
      font-weight: 600;
      transition: color 0.2s ease;
    }

    .methodology-page section a:hover {
      color: var(--brand-blue-hero);
      text-decoration: none;
    }

    /* Listas */
    .method-steps {
      list-style: none;
      counter-reset: step-counter;
      padding: 0;
      margin: 30px 0;
      display: grid;
      gap: 24px;
    }

    .method-steps li {
      counter-increment: step-counter;
      background: var(--bg-light);
      border: 1px solid #EEF0FF;
      border-radius: var(--radius);
      padding: 24px 24px 24px 72px;
      position: relative;
      box-shadow: var(--shadow);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .method-steps li:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

    .method-steps li::before {
      content: counter(step-counter);
      position: absolute;
      left: 24px;
      top: 24px;
      width: 36px;
      height: 36px;
      background: var(--brand-blue);
      color: var(--brand-yellow);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Dosis", sans-serif;
      font-weight: 700;
      font-size: 1.2rem;
      box-shadow: 0 4px 12px rgba(50, 58, 204, 0.2);
    }

    .method-steps li strong {
      display: block;
      font-family: "Dosis", sans-serif;
      color: var(--brand-blue);
      font-size: 1.25rem;
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .method-steps li br {
      display: none;
    }

    .method-steps li strong+br+* {
      margin-top: 8px;
      display: inline-block;
    }

    /* Lista não ordenada */
    .methodology-page section ul:not(.method-steps) {
      list-style: none;
      padding: 0;
      margin: 24px 0;
      display: grid;
      gap: 12px;
    }

    .methodology-page section ul:not(.method-steps) li {
      padding-left: 32px;
      position: relative;
      font-size: clamp(16px, 1.8vw, 18px);
    }

    .methodology-page section ul:not(.method-steps) li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: var(--brand-yellow);
      font-size: 24px;
      line-height: 1;
      top: -2px;
    }

    /* Seção "What We Are Not" */
    #what-we-are-not ul li::before {
      content: "✗";
      color: #ef4444;
      font-size: 18px;
    }

    /* Responsividade */
    @media (max-width: 768px) {
      .methodology-page {
        padding: 20px 15px 60px;
      }

      .methodology-page>header {
        margin-bottom: 40px;
      }

      .methodology-page section {
        margin-bottom: 40px;
      }

      .method-steps li {
        padding: 20px 20px 20px 60px;
      }

      .method-steps li::before {
        left: 20px;
        top: 20px;
        width: 32px;
        height: 32px;
        font-size: 1rem;
      }

      .methodology-page section ul:not(.method-steps) li {
        padding-left: 28px;
      }
    }

    @media (max-width: 480px) {
      .methodology-page>header h1 {
        font-size: 2rem;
      }

      .methodology-page>header .subtitle {
        font-size: 1.1rem;
      }

      .methodology-page section h2 {
        font-size: 1.5rem;
      }

      .method-steps li {
        padding: 18px 18px 18px 56px;
      }

      .method-steps li strong {
        font-size: 1.1rem;
      }
    }

    /* Animações suaves para scroll */
    @media (prefers-reduced-motion: no-preference) {
      .methodology-page section {
        animation: fadeInUp 0.6s ease backwards;
        animation-delay: calc(var(--animation-order, 0) * 0.1s);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Adicionar ordem de animação para as seções */
    #introduction {
      --animation-order: 1;
    }

    #sfia {
      --animation-order: 2;
    }

    #method-overview {
      --animation-order: 3;
    }

    #responsible-data {
      --animation-order: 4;
    }

    #independence {
      --animation-order: 5;
    }

    #copyright {
      --animation-order: 6;
    }

    #data-access {
      --animation-order: 7;
    }

    #security {
      --animation-order: 8;
    }

    #what-we-are-not {
      --animation-order: 9;
    }

    #closing {
      --animation-order: 10;
    }