 /* Cores base inspiradas no seu layout, mapeadas para classes Tailwind */
        :root {
            --mint: #88D2B0;
            --lilac: #BFA8E7;
            --babyblue: #AEE4F8;
            --accent: #6B4DD6; /* Roxo principal */
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f4f8; /* Fundo suave */
            color: #222; /* Texto escuro e legível */
        }
        /* Estilo para cards interativos */
        .interactive-card {
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            cursor: pointer;
        }
		.interactive-card:hover {
			transform: translateY(-6px) scale(1.02);
			box-shadow: 0 12px 24px rgba(0,0,0,0.12);
		}
        .container{
            max-width:1100px;
            margin:28px auto;
            padding:20px;
        }
        /* Cor da Marca Primária */
        .bg-brand-accent {
            background-color: var(--accent);
        }
        .text-brand-accent {
            color: var(--accent);
        }
        /* Cor de destaque para o Kicker (Mint) */
        .kicker {
            background-color: var(--mint);
            color: #064;
        }
        .section-card{
            background:white;
            padding:18px;
            border-radius:16px;
            box-shadow:0 6px 18px rgba(16,24,40,0.06);
        }
        
        .btn-arrow{
            background:rgba(255,255,255,0.95);
            border:1px solid #eee;
            padding:8px;
            border-radius:10px;
            box-shadow:0 6px 14px rgba(16,24,40,0.06);
            cursor:pointer
        }
        .card-anim{
            transition:transform .22s,box-shadow .22s
        }
        .card-anim:hover{
            transform:translateY(-6px);
            box-shadow:0 12px 30px rgba(16,24,40,0.12)
        }
        .meta-pill{
            background:#f2f6ff;
            color:var(--accent);
            padding:6px 10px;
            border-radius:999px;
            font-weight:700
        }
        .clube-bloco {
            background-color: #ffffff;
            border: 1px solid #e5e7eb; /* cinza bem suave */
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .clube-bloco.destaque {
            background-color: #f0f7f5;
            border-color: #cce3dc;
        }

        .clube-bloco h2 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .clube-bloco p {
            color: #374151; /* cinza escuro, menos agressivo que preto puro */
            line-height: 1.6;
        }

        .clube-menu-wrapper {
            background-color: #f8fafc; /* cinza bem leve */
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 0.75rem 1rem;
        }
        .clube-link {
          padding: 0.5rem 0.75rem;
          border-radius: 999px;
          color: #374151;
          transition: background-color 0.2s ease, color 0.2s ease;
        }

        .clube-link:hover {
          background-color: #e6f0ee; /* verde suave que você escolheu */
          color: #065f46;
        }

        .clube-link.ativo {
          background-color: #4b7f73;
          color: #ffffff;
        }

        .clube-link.destaque {
          font-weight: 600;
        }
        .clube-link:focus-visible {
          outline: 2px solid #4b7f73;
          outline-offset: 2px;
        }

        /* FAQ – blocos alternados */
        .faq-item {
          border-radius: 12px;
          padding: 1.25rem 1.5rem;
        }

        .faq-item:nth-child(odd) {
          background-color: #ffffff;
          border: 1px solid #e5e7eb;
        }

        .faq-item:nth-child(even) {
          background-color: #f0f7f5; /* verde suave */
          border: 1px solid #cce3dc;
        }

        .faq-item summary {
          cursor: pointer;
          font-weight: 600;
          font-size: 1.05rem;
          list-style: none;
        }

        .faq-item summary::-webkit-details-marker {
          display: none;
        }

        .faq-item summary::after {
          content: "+";
          float: right;
          font-weight: 700;
          transition: transform 0.2s ease;
        }

        .faq-item[open] summary::after {
          content: "–";
        }

        .faq-item p,
        .faq-item ul {
          color: #374151;
          margin-top: 0.75rem;
          line-height: 1.6;
        }
        .nav-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0.4rem;
          border-radius: 999px;
          color: #4b5563;
          transition: background-color 0.2s ease, color 0.2s ease;
        }

        .nav-icon:hover {
          background-color: #e6f0ee;
          color: #065f46;
        }


        .hint{
            color:#6b7280;
            font-size:13px
        }
        .carousel-wrap{position:relative}
        .carousel{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;padding:8px 6px}
        .carousel::-webkit-scrollbar{height:8px}
        .carousel img{height:160px;border-radius:10px;object-fit:cover}

        /* arrows */
        .carousel-arrow{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        background:rgba(255,255,255,0.95);
        border:1px solid rgba(0,0,0,0.06);
        padding:8px;border-radius:10px;cursor:pointer;z-index:10;
        box-shadow:0 8px 20px rgba(0,0,0,0.08)
        }
        .carousel-arrow.left{left:6px}
        .carousel-arrow.right{right:6px}

        /* hide on small screens if you prefer */
        @media (max-width:640px){ 
            .carousel-arrow{display:none} 
            .carousel img{height:120px} 
             
        }

        /* Para os ícones do Lucide serem exibidos */
        [lucide] {
            stroke-width: 2.5;
        }