/* Reset and base */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: #f9fafb;
      color: #374151;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    a:focus,
    button:focus {
      outline: 2px solid #2563eb; 
      outline-offset: 2px;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    /* Container */
    .container {
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }


    /* Main */
    main {
      padding: 5rem 0;
    }

    /* Plataforma Section */
    #plataforma {
      background: rgba(255 255 255 / 0.9);
      backdrop-filter: saturate(180%) blur(10px);
      border-radius: 2rem;
      box-shadow: 0 20px 40px rgb(0 0 0 / 0.1);
      padding: 2.5rem 2.5rem 4rem;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
    }

    #plataforma h2 {
      font-size: 2.5rem;
      font-weight: 800;
      color: #0d562e;
      margin-bottom: 2rem;
      text-align: center;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
    }

    #plataforma p.descriptionx {
      max-width: 64rem;
      margin-left: auto;
      margin-right: auto;
      font-size: 1.125rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 3.5rem;
      text-align: center;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
      animation-delay: 0.15s;
    }

    .platform-cards {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      justify-content: center;
      align-items: stretch;
    }

    @media (min-width: 768px) {
      .platform-cards {
        flex-direction: row;
        gap: 3rem;
      }
    }

    .cardx {
      background: linear-gradient(135deg, #bfdbfe 0%, #dbeafe 100%);
      border-radius: 2rem;
      box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
      padding: 2rem;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
    }

    .cardx:nth-child(1) {
      animation-delay: 0.3s;
      background: linear-gradient(135deg, #faefdb 0%, #faefdb 100%);
      color: #0d562e;
    }

    .cardx:nth-child(2) {
      animation-delay: 0.45s;
      background: linear-gradient(135deg, #bbf7d0 0%, #dcfce7 100%);
      color: #166534;
    }

    .cardx:nth-child(3) {
      animation-delay: 0.6s;
      background: linear-gradient(135deg, #ddd6fe 0%, #ede9fe 100%);
      color: #5b21b6;
    }

    .cardx:hover,
    .cardx:focus-within {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 20px 30px rgb(0 0 0 / 0.12);
      outline: none;
    }

    .cardx img {
      border-radius: 1.25rem;
      margin-bottom: 2rem;
      box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
      flex-shrink: 0;
      height: 260px;
      object-fit: cover;
      width: 100%;
    }

    .cardx h3 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-align: center;
    }

    .cardx p {
      flex-grow: 1;
      font-size: 1rem;
      line-height: 1.5;
      text-align: center;
      color: #374151;
      margin-bottom: 1.5rem;
    }

    .buttonsx {
      display: inline-block;
      font-weight: 700;
      font-size: 1rem;
      padding: 0.75rem 1.5rem;
      border-radius: 9999px;
      text-align: center;
      color: white;
      cursor: pointer;
      box-shadow: 0 4px 6px rgb(0 0 0 / 0.1);
      transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
      user-select: none;
      border: none;
      text-decoration: none;
      margin-bottom: 0.75rem;
    }

    .btn-blue {
      background-color: #f3aa3a;
    }

    .btn-blue:hover,
    .btn-blue:focus {
      background-color: #f3aa3a;
      box-shadow: 0 0 12px 3px rgba(245, 187, 28, 0.7);
      transform: translateY(-3px) scale(1.05);
      outline: none;
      color: white;
    }

    .btn-green {
      background-color: #22c55e;
    }

    .btn-green:hover,
    .btn-green:focus {
      background-color: #16a34a;
      box-shadow: 0 0 12px 3px rgba(34, 197, 94, 0.7);
      transform: translateY(-3px) scale(1.05);
      outline: none;
      color: white;
    }

    .btn-purple {
      margin-bottom: 50px;
      background-color: #8b5cf6;
    }

    .btn-purple:hover,
    .btn-purple:focus {
      background-color: #7c3aed;
      box-shadow: 0 0 12px 3px rgba(139, 92, 246, 0.7);
      transform: translateY(-3px) scale(1.05);
      outline: none;
      color: white;
    }

    .buttonsx i {
      vertical-align: middle;
      margin-right: 0.75rem;
      font-size: 1.25rem;
    }

    .buttonsx:focus-visible {
      outline-offset: 3px;
    }

    /* Características Section */
    #caracteristicas {
      max-width: 80rem;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      text-align: center;
    }

    #caracteristicas h3 {
      font-size: 2rem;
      font-weight: 800;
      color: #166534;
      margin-bottom: 3rem;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
    }

    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
      animation-delay: 0.2s;
    }

    @media (min-width: 640px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .features-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .feature-card {
      background: white;
      border-radius: 1.5rem;
      box-shadow: 0 10px 20px rgb(0 0 0 / 0.1);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .feature-card:hover,
    .feature-card:focus-within {
      transform: translateY(-8px);
      box-shadow: 0 20px 30px rgb(0 0 0 / 0.12);
      outline: none;
    }

    /* .feature-icon {
      font-size: 3rem;
      margin-bottom: 1.5rem;
      color: #2563eb;
      transition: color 0.3s ease;
    } */

    .feature-icon {
      width: 64px;
      height: 64px;
      margin-bottom: 1.5rem;
      flex-shrink: 0;
    }

    .feature-icon img {
      width: 64px;
      height: 64px;
      object-fit: contain;
    }

    .feature-card:nth-child(2) .feature-icon {
      color: #16a34a;
    }

    .feature-card:nth-child(3) .feature-icon {
      color: #7c3aed;
    }

    .feature-card:nth-child(4) .feature-icon {
      color: #ca8a04;
    }

    .feature-card:nth-child(5) .feature-icon {
      color: #dc2626;
    }

    .feature-card:nth-child(6) .feature-icon {
      color: #4f46e5;
    }

    .feature-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #166534;
    }

    .feature-desc {
      font-size: 1rem;
      line-height: 1.5;
      color: #4b5563;
    }

    /* Extra Section */
    #why-choose {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 6rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      text-align: center;
    }

    #why-choose h3 {
      font-size: 2rem;
      font-weight: 800;
      color: #0d562e;
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
      animation-delay: 0.2s;
    }

    #why-choose p {
      font-size: 1.125rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 2.5rem;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
      animation-delay: 0.4s;
    }

    #why-choose a.cta-btn {
      display: inline-block;
      background-color: #f3aa3a;
      color: white;
      font-weight: 700;
      font-size: 1.125rem;
      padding: 0.75rem 2rem;
      border-radius: 9999px;
      box-shadow: 0 8px 15px rgb(13 86 46 / 0.5);
      transition: background-color 0.3s ease, box-shadow 0.3s ease,
        transform 0.3s ease;
      opacity: 0;
      animation: floatUp 0.8s ease forwards;
      animation-delay: 0.6s;
      cursor: pointer;
      text-decoration: none;
      user-select: none;
    }

    #why-choose a.cta-btn:hover,
    #why-choose a.cta-btn:focus {
      background-color: #e69f06;
      box-shadow: 0 0 20px 5px rgba(13, 86, 46, 0.7);
      transform: translateY(-3px) scale(1.05);
      outline: none;
    }

    /* Animations */
    @keyframes floatUp {
      0% {
        transform: translateY(10px);
        opacity: 0;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }