@font-face { font-family: 'Ramillas'; src: url('/fontes/TT_Ramillas-Regular.ttf') format('truetype'); font-display: swap; }
    :root {
      --verde: #569E72; --verde-escuro: #3F7A57; --verde-marca: #7ED957;
      --grafite: #252525; --grafite-escuro: #1A1A1A; --fundo: #F3F4F6; --cartao: #FFFFFF;
      --texto: #252525; --texto-suave: #5B6169; --borda: #E3E6EB;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: 'Inter', system-ui, sans-serif; color: var(--texto); background: var(--fundo); line-height: 1.6; }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; }
    .conteiner { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
    .titulo-marca { font-family: 'Ramillas', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

    /* Cabeçalho */
    header { position: sticky; top: 0; z-index: 10; background: rgba(26, 26, 26, .92); backdrop-filter: blur(10px); }
    .barra { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
    .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--verde-marca); font-size: 28px; }
    .logo img { width: 34px; height: 34px; border-radius: 8px; }
    nav { display: flex; align-items: center; gap: 28px; }
    nav a.link { color: #D6D9DE; text-decoration: none; font-weight: 500; font-size: 15px; }
    nav a.link:hover { color: #fff; }
    .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
    .botao:hover { transform: translateY(-1px); }
    .botao-principal { background: var(--verde); color: #fff; }
    .botao-principal:hover { background: var(--verde-escuro); box-shadow: 0 8px 24px rgba(86, 158, 114, .35); }
    .botao-contorno { border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; }
    .botao-contorno:hover { border-color: #fff; }
    .botao-claro { background: #fff; color: var(--grafite); }

    /* Abertura */
    .abertura { background: radial-gradient(circle at 80% 20%, #2f4a39 0%, var(--grafite-escuro) 55%); color: #fff; padding: 72px 0 0; overflow: hidden; }
    .abertura .grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; }
    .abertura .grade > div:first-child { align-self: center; padding-bottom: 24px; }
    .selo { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(126, 217, 87, .12); color: var(--verde-marca); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
    .abertura h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.08; margin: 0 0 20px; }
    .abertura h1 span { color: var(--verde-marca); }
    .abertura p.sub { font-size: 18px; color: #C9CDD3; max-width: 540px; margin: 0 0 32px; }
    .acoes { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 72px; }
    .celular { width: 300px; margin: 0 auto -6px; border-radius: 36px 36px 0 0; border: 10px solid #0d0d0d; border-bottom: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #0d0d0d; }
    .celular img { border-radius: 26px 26px 0 0; }

    /* Seções */
    section { padding: 88px 0; }
    .cabecalho-secao { text-align: center; max-width: 680px; margin: 0 auto 48px; }
    .cabecalho-secao .etiqueta { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #DFF0E5; color: var(--verde-escuro); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
    .cabecalho-secao h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.15; margin: 0 0 12px; }
    .cabecalho-secao p { color: var(--texto-suave); font-size: 17px; margin: 0; }

    .recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    @media (min-width: 901px) { .recurso:last-child:nth-child(3n+1) { grid-column: 2; } }
    .recurso { background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 26px; }
    .recurso .icone { width: 46px; height: 46px; border-radius: 12px; background: #DFF0E5; color: var(--verde-escuro); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
    .recurso .icone svg { width: 24px; height: 24px; }
    .recurso h3 { font-size: 18px; margin: 0 0 6px; }
    .recurso p { margin: 0; color: var(--texto-suave); font-size: 15px; }

    .destaque { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .destaque.invertido .texto { order: 2; }
    .destaque h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin: 0 0 16px; }
    .destaque p { color: var(--texto-suave); font-size: 17px; margin: 0 0 20px; }
    .lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
    .lista li { display: flex; gap: 12px; align-items: flex-start; }
    .lista li::before { content: ''; flex: 0 0 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
    .moldura-celular { width: 280px; margin: 0 auto; border-radius: 34px; border: 9px solid #111; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .18); }
    .moldura-computador { border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); box-shadow: 0 24px 60px rgba(0, 0, 0, .15); }
    .faixa-branca { background: #fff; }

    /* Perguntas */
    .perguntas { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
    details { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 0 22px; }
    summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: '+'; color: var(--verde); font-size: 22px; line-height: 1; }
    details[open] summary::after { content: '−'; }
    details p { margin: 0 0 18px; color: var(--texto-suave); }

    .chamada { background: linear-gradient(120deg, var(--verde-escuro), var(--verde)); color: #fff; text-align: center; }
    .chamada h2 { font-size: clamp(30px, 3.8vw, 44px); margin: 0 0 12px; }
    .chamada p { opacity: .9; font-size: 18px; margin: 0 auto 32px; max-width: 560px; }
    .chamada .acoes { justify-content: center; padding: 0; }

    footer { background: var(--grafite-escuro); color: #A9AEB5; padding: 48px 0 32px; font-size: 14px; }
    footer .linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
    footer nav a { color: #D6D9DE; text-decoration: none; }
    footer nav a:hover { color: #fff; }
    footer .direitos { border-top: 1px solid #2c2c2c; margin-top: 28px; padding-top: 20px; }

    @media (max-width: 900px) {
      .abertura .grade, .destaque { grid-template-columns: 1fr; }
      .abertura .grade > div:first-child { padding-bottom: 0; }
      .destaque.invertido .texto { order: 0; }
      .recursos { grid-template-columns: 1fr 1fr; }
      nav a.link { display: none; }
      .abertura { padding-top: 48px; }
      .acoes { padding-bottom: 48px; }
      section { padding: 64px 0; }
    }
    @media (max-width: 600px) {
      .recursos { grid-template-columns: 1fr; }
      nav .botao-contorno { display: none; }
      .botao { padding: 11px 20px; }
      .abertura .acoes .botao { flex: 1 1 100%; }
      .celular { width: 260px; }
      .logo { font-size: 24px; }
    }
  

    /* Artigos */
    .artigo-topo { background: radial-gradient(circle at 80% 20%, #2f4a39 0%, var(--grafite-escuro) 60%); color: #fff; padding: 64px 0 56px; }
    .artigo-topo .migalha { color: #A9AEB5; font-size: 14px; margin-bottom: 14px; }
    .artigo-topo .migalha a { color: var(--verde-marca); text-decoration: none; }
    .artigo-topo h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; margin: 0 0 14px; max-width: 820px; }
    .artigo-topo p { color: #C9CDD3; font-size: 18px; margin: 0; max-width: 720px; }
    .artigo { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; font-size: 18px; line-height: 1.75; }
    .artigo h2 { font-size: 28px; line-height: 1.25; margin: 40px 0 12px; }
    .artigo h3 { font-size: 21px; margin: 28px 0 8px; }
    .artigo p, .artigo li { color: #33383E; }
    .artigo ul, .artigo ol { padding-left: 22px; }
    .artigo li { margin: 6px 0; }
    .artigo .quadro { background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--verde); border-radius: 0; padding: 18px 22px; margin: 26px 0; }
    .artigo .quadro p { margin: 0; }
    .artigo table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; background: #fff; }
    .artigo th, .artigo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
    .artigo th { background: var(--grafite); color: #fff; font-weight: 600; }
    .artigo .chamada-artigo { background: linear-gradient(120deg, var(--verde-escuro), var(--verde)); color: #fff; border-radius: 18px; padding: 28px; margin-top: 44px; }
    .artigo .chamada-artigo h2 { margin: 0 0 8px; color: #fff; }
    .artigo .chamada-artigo p { color: #E8F3EC; margin: 0 0 18px; }
    .artigo .aviso-educativo { font-size: 14px; color: var(--texto-suave); margin-top: 36px; }
    .lista-artigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .cartao-artigo { display: block; background: #fff; border: 1px solid var(--borda); border-radius: 18px; padding: 26px; text-decoration: none; transition: box-shadow .15s, transform .15s; }
    .cartao-artigo:hover { box-shadow: 0 14px 40px rgba(0,0,0,.08); transform: translateY(-2px); }
    .cartao-artigo .etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #DFF0E5; color: var(--verde-escuro); font-size: 12px; font-weight: 600; margin-bottom: 12px; }
    .cartao-artigo h3 { font-size: 21px; margin: 0 0 8px; line-height: 1.3; }
    .cartao-artigo p { color: var(--texto-suave); margin: 0 0 14px; font-size: 15px; }
    .cartao-artigo span.ler { color: var(--verde-escuro); font-weight: 700; font-size: 15px; }
    @media (max-width: 760px) { .lista-artigos { grid-template-columns: 1fr; } .artigo { font-size: 17px; } }