/* ========================================================================= Bancada Digital — folha de estilo única Sem frameworks. Toda a animação das ilustrações mora aqui (seção 13). Índice 1. Tokens de design 8. Modal 2. Reset 9. Código 3. Cabeçalho 10. Mídia (Tinkercad / vídeo) 4. Hero e busca 11. Passo a passo 5. Filtros 12. Contato 6. Cards 13. ANIMAÇÃO DAS ILUSTRAÇÕES 7. Estado vazio 14. Rodapé, revelação e impressão ========================================================================= */ /* ========================================================================= 1. TOKENS DE DESIGN ========================================================================= */ /* ------------------------------------------------------------------------- PALETAS INTERCAMBIÁVEIS Cada paleta define só 6 cores. Todo o resto da folha usa essas variáveis, então trocar de paleta não exige mexer em nenhuma outra regra. --ac-300 .. --ac-600 escala do acento, do mais claro ao mais escuro --ac-2 segunda cor, usada nos degradês --ac-texto versão do acento segura para TEXTO pequeno (o 500 é bonito em preenchimento, mas em texto de 11px sobre fundo claro não alcança 4,5:1) O seletor no cabeçalho grava a escolha em data-paleta no . ------------------------------------------------------------------------- */ :root, :root[data-paleta="verde"] { --ac-300: #5fdccb; --ac-400: #2ec4b6; --ac-500: #12a594; --ac-600: #0d7d72; --ac-2: #8b5cf6; } :root[data-paleta="roxo"] { --ac-300: #c4b5fd; --ac-400: #a78bfa; --ac-500: #8b5cf6; --ac-600: #6d28d9; --ac-2: #22d3ee; } :root[data-paleta="vermelho"] { --ac-300: #fca5a5; --ac-400: #f87171; --ac-500: #ef4444; --ac-600: #b91c1c; --ac-2: #fb923c; } :root[data-paleta="rosa"] { --ac-300: #f9a8d4; --ac-400: #f472b6; --ac-500: #ec4899; --ac-600: #be185d; --ac-2: #22d3ee; } :root[data-paleta="azul"] { --ac-300: #93c5fd; --ac-400: #60a5fa; --ac-500: #3b82f6; --ac-600: #1d4ed8; --ac-2: #06b6d4; } :root[data-paleta="ambar"] { --ac-300: #fcd34d; --ac-400: #fbbf24; --ac-500: #f59e0b; --ac-600: #92400e; --ac-2: #f43f5e; } :root[data-paleta="menta"] { --ac-300: #86efac; --ac-400: #4ade80; --ac-500: #22c55e; --ac-600: #15803d; --ac-2: #38bdf8; } :root { /* Apelidos históricos: o resto da folha foi escrito com estes nomes, de quando existia só a paleta verde do Arduino. */ --teal-300: var(--ac-300); --teal-400: var(--ac-400); --teal-500: var(--ac-500); --teal-600: var(--ac-600); --violeta: var(--ac-2); /* Acento aplicado a TEXTO. No claro usa o tom escuro da escala. */ --ac-texto: var(--ac-600); /* --- Vidro fosco (tema claro) --- */ --vidro: rgba(255, 255, 255, .78); --vidro-forte: rgba(255, 255, 255, .90); --vidro-borda: rgba(15, 23, 42, .10); --vidro-brilho: rgba(255, 255, 255, .85); --dropdown-bg: rgba(255, 255, 255, .96); /* --- Apoio (não mudam com a paleta) --- */ --indigo: #6366f1; --coral: #f2624f; --ambar: #f59e0b; --verde: #22c55e; /* --- Superfícies (tema claro) --- */ --bg: #f7f8fb; --bg-elevado: #ffffff; --bg-suave: #f0f2f7; --bg-fundo: #e9edf4; --borda: #e3e8f0; --borda-forte: #cfd7e3; --texto: #0f172a; --texto-medio: #475569; /* Era #64748b, que dava 4,25:1 sobre --bg-suave — abaixo do mínimo de 4,5:1 da WCAG AA. Este tom passa a 4,9:1 sem mudar a aparência do layout. */ --texto-suave: #5a6a80; /* Ponta clara do degradê do H1. Em tema claro precisa ser escura o bastante para atingir 3:1 (texto grande); no tema escuro, o inverso. */ --titulo-grad: var(--teal-600); /* --- Elevação: sombras em camadas, nunca uma só --- */ --sombra-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06); --sombra-2: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 20px rgba(15, 23, 42, .07); --sombra-3: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .12); --sombra-4: 0 8px 16px rgba(15, 23, 42, .08), 0 32px 64px rgba(15, 23, 42, .18); --glow: 0 0 0 4px color-mix(in srgb, var(--teal-400) 16%, transparent); /* --- Cores das ilustrações --- */ --ilu-traco: var(--texto-medio); --ilu-acento: var(--teal-500); --ilu-leve: color-mix(in srgb, var(--teal-400) 14%, transparent); /* --- Forma --- */ --raio-xs: 8px; --raio-sm: 12px; --raio: 18px; --raio-lg: 24px; --max: 1200px; /* ------------------------------------------------------------------------- ESCALA DE CAMADAS (z-index) Todo z-index do site sai daqui. Números soltos espalhados pela folha são o que leva à guerra de "z-index: 9999" — com uma escala, dá para ver de relance quem fica na frente de quem. ATENÇÃO ao que realmente decide a ordem: não é o número, é o CONTEXTO DE EMPILHAMENTO. Um filho nunca passa à frente de algo que está fora do contexto do seu pai, por maior que seja o z-index dele. Propriedades como `isolation`, `transform`, `filter`, `opacity < 1` e `backdrop-filter` criam contexto sem que ninguém perceba. ------------------------------------------------------------------------- */ --z-fundo: -1; /* camada de fundo animado, atrás de tudo */ --z-busca: 50; /* barra de busca e seu dropdown de sugestões */ --z-topo: 60; /* cabeçalho fixo — fica ACIMA do dropdown de propósito */ --z-menu: 70; /* menu de paletas (dentro do cabeçalho) */ --z-modal: 100; /* diálogo de conteúdo */ /* --- Movimento --- */ --rapido: 140ms cubic-bezier(.4, 0, .2, 1); --suave: 260ms cubic-bezier(.4, 0, .2, 1); --mola: 420ms cubic-bezier(.34, 1.4, .5, 1); color-scheme: light; } /* Tema escuro: acompanha o sistema, mas o botão do topo sempre vence */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } } :root[data-tema="escuro"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --bg: #0a0f1a; --bg-elevado: #121a28; --bg-suave: #1a2434; --bg-fundo: #0f1724; --borda: #253044; --borda-forte: #35435c; --texto: #eef2f8; --texto-medio: #a7b5c9; --texto-suave: #8496ad; --titulo-grad: var(--teal-300); --ac-texto: var(--ac-300); /* --- Vidro fosco (tema escuro) --- */ --vidro: rgba(21, 30, 45, .62); --vidro-forte: rgba(24, 34, 51, .80); --vidro-borda: rgba(255, 255, 255, .10); --vidro-brilho: rgba(255, 255, 255, .07); --dropdown-bg: rgba(16, 23, 36, .94); --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35); --sombra-3: 0 4px 8px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45); --sombra-4: 0 8px 16px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .6); --ilu-traco: #9fb0c6; --ilu-acento: var(--teal-400); --ilu-leve: color-mix(in srgb, var(--teal-400) 16%, transparent); } } :root[data-tema="escuro"] { --bg: #0a0f1a; --bg-elevado: #121a28; --bg-suave: #1a2434; --bg-fundo: #0f1724; --borda: #253044; --borda-forte: #35435c; --texto: #eef2f8; --texto-medio: #a7b5c9; --texto-suave: #8496ad; --titulo-grad: var(--teal-300); --ac-texto: var(--ac-300); /* --- Vidro fosco (tema escuro) --- */ --vidro: rgba(21, 30, 45, .62); --vidro-forte: rgba(24, 34, 51, .80); --vidro-borda: rgba(255, 255, 255, .10); --vidro-brilho: rgba(255, 255, 255, .07); --dropdown-bg: rgba(16, 23, 36, .94); --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35); --sombra-3: 0 4px 8px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .45); --sombra-4: 0 8px 16px rgba(0, 0, 0, .4), 0 32px 64px rgba(0, 0, 0, .6); --ilu-traco: #9fb0c6; --ilu-acento: var(--teal-400); --ilu-leve: color-mix(in srgb, var(--teal-400) 16%, transparent); } /* ========================================================================= 2. RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--texto); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; overflow-wrap: break-word; } img, svg, iframe { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; color: inherit; } button { -webkit-tap-highlight-color: transparent; } a { color: var(--ac-texto); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.03em; } :focus-visible { outline: 2px solid var(--teal-400); outline-offset: 3px; border-radius: 6px; } ::selection { background: color-mix(in srgb, var(--teal-400) 30%, transparent); } .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 22px; } .oculto { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Barras de rolagem discretas */ * { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 99px; border: 3px solid var(--bg-elevado); } /* ========================================================================= 3. CABEÇALHO ========================================================================= */ .topo { position: sticky; top: 0; z-index: var(--z-topo); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--suave), background-color var(--suave); } .topo.rolou { border-bottom-color: var(--borda); background: color-mix(in srgb, var(--bg) 90%, transparent); } .topo__inner { display: flex; align-items: center; gap: 18px; height: 68px; } .marca { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 1.02rem; letter-spacing: -.028em; color: var(--texto); text-decoration: none; flex-shrink: 0; } .marca:hover { text-decoration: none; } .marca__chip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(145deg, var(--teal-300), var(--teal-600)); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--teal-500) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform var(--mola); } .marca__chip .ico { width: 19px; height: 19px; } .marca:hover .marca__chip { transform: rotate(-8deg) scale(1.06); } .nav { display: flex; gap: 2px; margin-left: auto; align-items: center; } .nav a { position: relative; padding: 9px 14px; border-radius: var(--raio-xs); color: var(--texto-suave); font-size: .92rem; font-weight: 500; transition: color var(--rapido); } .nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--teal-500); transform: scaleX(0); transform-origin: left; transition: transform var(--suave); } .nav a:hover { color: var(--texto); text-decoration: none; } .nav a:hover::after { transform: scaleX(1); } /* O link do Laboratório leva para OUTRA página, não para uma âncora desta. O ponto à esquerda marca essa diferença sem precisar de um rótulo. */ .nav a.nav--lab { color: var(--ac-texto); } .nav a.nav--lab::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: currentColor; } .btn-tema { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 8px; flex-shrink: 0; border: 1px solid var(--borda); border-radius: 11px; background: var(--bg-elevado); color: var(--texto-medio); cursor: pointer; transition: var(--suave); } .btn-tema:hover { background: var(--bg-suave); color: var(--texto); border-color: var(--borda-forte); transform: translateY(-1px); } .btn-tema .ico { width: 18px; height: 18px; } @media (max-width: 720px) { .topo__inner { height: 60px; gap: 10px; } .nav a { display: none; } .nav a.nav--sempre { display: block; white-space: nowrap; padding: 8px 10px; } .btn-tema { width: 38px; height: 38px; margin-left: 2px; } } /* Com dois botões de ícone no topo, o link de texto não cabe em telas estreitas. A seção de contato continua a um toque de distância pelo rodapé. */ @media (max-width: 430px) { .nav a.nav--sempre { display: none; } } /* ========================================================================= 4. HERO E BUSCA ========================================================================= */ .hero { position: relative; /* NÃO coloque `isolation: isolate` aqui. Havia um, sobra de quando o brilho do fundo era um ::before deste bloco. Ele criava um contexto de empilhamento que PRENDIA o dropdown da busca dentro do hero — o menu de sugestões ficava atrás dos filtros e dos cards por mais alto que fosse o z-index dele. */ padding: clamp(56px, 9vw, 104px) 0 clamp(6px, 1.5vw, 18px); text-align: center; } /* O antigo brilho e a antiga malha do hero saíram daqui: agora são a camada .fundo, que cobre a página inteira e reage à rolagem (seção 15). */ .hero__selo { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; margin-bottom: 26px; border: 1px solid var(--borda); border-radius: 99px; background: color-mix(in srgb, var(--bg-elevado) 80%, transparent); backdrop-filter: blur(8px); box-shadow: var(--sombra-1); font-size: .81rem; font-weight: 600; color: var(--texto-medio); letter-spacing: -.01em; } .hero__selo .ico { width: 16px; height: 16px; color: var(--ac-texto); } .hero__selo b { color: var(--texto); font-weight: 700; } .hero h1 { margin: 0 0 18px; font-size: clamp(2.15rem, 6.2vw, 3.75rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.05; } .hero h1 .destaque { background: linear-gradient(105deg, var(--titulo-grad) 10%, var(--indigo) 60%, var(--violeta)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradienteDesliza 7s ease-in-out infinite; } @keyframes gradienteDesliza { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero p.sub { max-width: 600px; margin: 0 auto 38px; font-size: clamp(1rem, 2.1vw, 1.13rem); color: var(--texto-medio); line-height: 1.65; } /* ---- Campo de busca ---- */ /* O z-index vive AQUI, no container, e não no dropdown: assim a busca inteira sobe de camada de uma vez e o dropdown só precisa ficar à frente do campo. */ .busca { position: relative; z-index: var(--z-busca); max-width: 660px; margin-inline: auto; text-align: left; } .busca__campo { display: flex; align-items: center; gap: 13px; padding: 7px 7px 7px 20px; background: var(--bg-elevado); border: 1px solid var(--borda-forte); border-radius: 99px; box-shadow: var(--sombra-2); transition: box-shadow var(--suave), border-color var(--suave), transform var(--suave); } .busca__campo:hover { transform: translateY(-1px); box-shadow: var(--sombra-3); } .busca__campo:focus-within { border-color: var(--teal-400); box-shadow: var(--glow), var(--sombra-3); transform: translateY(-1px); } .busca__icone { color: var(--texto-suave); flex-shrink: 0; width: 20px; height: 20px; } .busca__campo:focus-within .busca__icone { color: var(--ac-texto); } #campoBusca { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: transparent; outline: none; font-size: 1.02rem; letter-spacing: -.01em; } #campoBusca::placeholder { color: var(--texto-suave); } /* Esconde o "x" nativo do input[type=search]: usamos o nosso, que também limpa a galeria e devolve o foco ao campo. */ #campoBusca::-webkit-search-cancel-button, #campoBusca::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .busca__limpar { display: none; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--bg-suave); color: var(--texto-suave); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--rapido); } .busca__limpar:hover { background: var(--borda); color: var(--texto); transform: rotate(90deg); } .busca__limpar.visivel { display: grid; } .busca__btn { flex-shrink: 0; padding: 14px 28px; border: 0; border-radius: 99px; background: linear-gradient(145deg, var(--teal-400), var(--teal-600)); color: #fff; font-weight: 600; font-size: .94rem; letter-spacing: -.01em; cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--teal-500) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform var(--rapido), box-shadow var(--suave), filter var(--rapido); } .busca__btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--teal-500) 46%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28); } .busca__btn:active { transform: translateY(0) scale(.98); } @media (max-width: 540px) { .busca__btn { padding: 14px 20px; } } /* ---- Sugestões ---- */ /* Flutua ABAIXO do campo sem empurrar nada: position:absolute tira o menu do fluxo, então a galeria não desce quando ele abre. O `right: 0` alinha a largura à da barra de busca. */ .busca__sugestoes { position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 1; /* basta 1: já estamos dentro de .busca */ /* A altura final e calculada pelo app.js conforme o espaco na tela; este valor e apenas o teto. */ max-height: 400px; overflow-y: auto; overscroll-behavior: contain; padding: 7px; margin: 0; list-style: none; /* Fundo opaco + desfoque: o conteúdo que passa por baixo não compete com a leitura da lista, mesmo com o fundo animado atrás. */ background-color: var(--dropdown-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--vidro-borda); border-radius: var(--raio); box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 4px 12px -4px rgba(8, 12, 20, .28), 0 24px 56px -16px rgba(8, 12, 20, .55); animation: caiSuave .22s cubic-bezier(.2, .9, .3, 1); } .busca__sugestoes[hidden] { display: none; } @keyframes caiSuave { from { opacity: 0; transform: translateY(-8px) scale(.98); } } .sugestao { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: var(--raio-sm); cursor: pointer; transition: background-color var(--rapido); } .sugestao:hover, .sugestao.ativa { background: var(--bg-suave); } .sugestao__icone { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; padding: 6px; border-radius: 11px; background: var(--bg-suave); transition: background-color var(--rapido); } .sugestao.ativa .sugestao__icone, .sugestao:hover .sugestao__icone { background: var(--bg-elevado); } .sugestao__txt { min-width: 0; flex: 1; } .sugestao__nome { display: block; font-weight: 600; font-size: .94rem; letter-spacing: -.012em; } .sugestao__nome mark { background: color-mix(in srgb, var(--ambar) 40%, transparent); color: inherit; border-radius: 4px; padding: 1px 2px; } .sugestao__meta { display: block; font-size: .79rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sugestao__seta { margin-left: auto; color: var(--texto-suave); opacity: 0; transform: translateX(-4px); transition: var(--suave); } .sugestao__seta .ico { width: 16px; height: 16px; } .sugestao:hover .sugestao__seta, .sugestao.ativa .sugestao__seta { opacity: 1; transform: translateX(0); } .sugestao--vazio { justify-content: center; color: var(--texto-suave); font-size: .89rem; cursor: default; padding: 18px; } .sugestao--vazio:hover { background: transparent; } /* ========================================================================= 5. SEÇÕES E FILTROS ========================================================================= */ .secao { padding: clamp(44px, 7vw, 80px) 0; } .secao__cabeca { margin-bottom: 30px; } .secao__cabeca h2 { margin: 0 0 7px; font-size: clamp(1.6rem, 3.6vw, 2.15rem); font-weight: 800; } .secao__cabeca p { margin: 0; color: var(--texto-medio); font-size: 1rem; } .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .filtro { padding: 9px 18px; border: 1px solid var(--borda); border-radius: 99px; background: var(--bg-elevado); color: var(--texto-medio); font-size: .87rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; white-space: nowrap; transition: var(--suave); } .filtro:hover { border-color: var(--borda-forte); transform: translateY(-1px); box-shadow: var(--sombra-1); } .filtro[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--bg-elevado); box-shadow: var(--sombra-2); } .contador { margin: 0 0 20px; font-size: .87rem; color: var(--texto-suave); } .contador b { color: var(--texto); font-weight: 600; } /* ========================================================================= 6. CARDS ========================================================================= */ .galeria { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); } /* ------------------------------------------------------------------------- VIDRO FOSCO Com o fundo animado atrás, um card opaco parecia um retângulo colado por cima. Translúcido + desfoque, ele passa a flutuar SOBRE o fundo: as cores do brilho atravessam de leve e a borda clara marca a espessura do vidro. ------------------------------------------------------------------------- */ .card { position: relative; isolation: isolate; display: flex; flex-direction: column; background-color: var(--vidro); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--vidro-borda); border-radius: var(--raio); overflow: hidden; cursor: pointer; /* Três camadas: risco de luz no topo, sombra curta e sombra longa */ box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 2px 6px -2px rgba(8, 12, 20, .18), 0 14px 34px -14px rgba(8, 12, 20, .30); /* background-COLOR, nunca o atalho `background`: animar o atalho (que inclui image, position, size...) trava o valor resolvido de var() no Chromium — o card ficava com a cor do tema claro mesmo depois de trocar para o escuro. */ transition: transform var(--mola), box-shadow var(--suave), border-color var(--suave), background-color var(--suave); /* Entrada em cascata */ opacity: 0; transform: translateY(16px); animation: cardEntra .5s cubic-bezier(.2, .8, .3, 1) forwards; } @keyframes cardEntra { to { opacity: 1; transform: none; } } /* Navegador sem backdrop-filter (Firefox antigo): volta ao card sólido, para o texto nunca ficar por cima do fundo animado sem nada entre os dois. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card { background-color: var(--bg-elevado); } } .card:hover, .card:focus-visible { transform: translateY(-6px); background-color: var(--vidro-forte); border-color: color-mix(in srgb, var(--ac-400) 55%, var(--vidro-borda)); box-shadow: inset 0 1px 0 var(--vidro-brilho), 0 4px 10px -3px rgba(8, 12, 20, .22), 0 24px 52px -18px rgba(8, 12, 20, .42), /* halo da cor da paleta: a sensação de "circuito ligado" */ 0 0 34px -8px color-mix(in srgb, var(--ac-400) 40%, transparent); } .card:active { transform: translateY(-2px) scale(.994); } /* ---- Capa: malha de protoboard + ilustração ---- */ .card__capa { position: relative; display: grid; place-items: center; /* O padding de baixo é maior de propósito: reserva a faixa dos selos de mídia, para a ilustração nunca encostar neles. */ height: 162px; padding: 18px 22px 48px; /* Fundos TRANSLÚCIDOS de propósito: um degradê opaco aqui taparia o vidro e a metade de cima do card voltaria a parecer um adesivo. */ background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--texto) 9%, transparent) 1px, transparent 0) 0 0 / 16px 16px, linear-gradient(150deg, color-mix(in srgb, var(--ac-400) 15%, transparent), color-mix(in srgb, var(--ac-2) 13%, transparent)); border-bottom: 1px solid var(--vidro-borda); overflow: hidden; } /* Brilho que varre a capa no hover */ .card__capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .30) 50%, transparent 62%); transform: translateX(-130%); transition: transform .85s cubic-bezier(.3, .8, .3, 1); pointer-events: none; } .card:hover .card__capa::after { transform: translateX(130%); } .card__ilu { width: 92px; height: 92px; color: var(--ilu-traco); transition: transform var(--mola); } .card:hover .card__ilu { transform: scale(1.07); } .ilu { width: 100%; height: 100%; overflow: visible; } .ilu-emoji { font-size: 52px; line-height: 1; display: block; } .card__corpo { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .card__cat { margin-bottom: 7px; font-size: .69rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ac-texto); } /* min-height reserva a segunda linha: sem isso, títulos longos como "Sensor de Temperatura e Umidade DHT11" desalinhavam as tags da grade. */ .card__titulo { margin: 0 0 9px; min-height: 2.5em; font-size: 1.09rem; font-weight: 700; letter-spacing: -.022em; } .card__titulo mark { background: color-mix(in srgb, var(--ambar) 40%, transparent); color: inherit; border-radius: 4px; padding: 1px 2px; } .card__resumo { margin: 0 0 16px; font-size: .89rem; line-height: 1.55; color: var(--texto-medio); flex: 1; } .card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .tag { padding: 4px 10px; border-radius: var(--raio-xs); background: var(--bg-suave); color: var(--texto-suave); font-size: .72rem; font-weight: 500; transition: var(--rapido); } .card:hover .tag { background: color-mix(in srgb, var(--teal-400) 12%, var(--bg-suave)); } /* ========================================================================= 7. ESTADO VAZIO E BOTÕES ========================================================================= */ .vazio { padding: 72px 20px; text-align: center; color: var(--texto-medio); } .vazio__icone { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px; background: var(--bg-suave); color: var(--texto-suave); } .vazio__icone .ico { width: 34px; height: 34px; animation: lupaProcura 2.6s ease-in-out infinite; } @keyframes lupaProcura { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-4px, -2px) rotate(-10deg); } 60% { transform: translate(4px, 2px) rotate(10deg); } } .vazio h3 { margin: 0 0 8px; color: var(--texto); font-size: 1.2rem; } .vazio p { margin: 0 0 22px; } /* "Você quis dizer...?" */ .vazio__sugestao { margin: -12px 0 22px !important; font-size: .93rem; } .vazio__sugestao[hidden] { display: none; } .vazio__palpite { padding: 3px 10px; border: 1px solid var(--borda); border-radius: 99px; background: var(--bg-elevado); color: var(--ac-texto); font-size: .93rem; font-weight: 600; cursor: pointer; transition: var(--suave); } .vazio__palpite:hover { border-color: var(--teal-400); background: color-mix(in srgb, var(--teal-400) 12%, var(--bg-elevado)); transform: translateY(-1px); } .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border: 0; border-radius: var(--raio-sm); background: linear-gradient(145deg, var(--teal-400), var(--teal-600)); color: #fff; font-weight: 600; font-size: .93rem; letter-spacing: -.01em; cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--teal-500) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); transition: transform var(--mola), box-shadow var(--suave), filter var(--rapido); } /* Reflexo que atravessa o botão no hover */ .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s cubic-bezier(.3, .8, .3, 1); pointer-events: none; } .btn:hover::after { transform: translateX(120%); } .btn:hover { filter: brightness(1.06); transform: translateY(-2px); color: #fff; text-decoration: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--teal-500) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); } .btn:active { transform: translateY(0) scale(.98); } .btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; transform: none; box-shadow: none; } .btn[disabled]::after { display: none; } .btn .ico { width: 17px; height: 17px; } .btn--grande { padding: 14px 28px; font-size: .97rem; border-radius: var(--raio-sm); } .btn--pequeno { padding: 9px 18px; font-size: .86rem; } /* Bloco "Continua travado?" no fim da explicação de cada componente */ .ajuda { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; padding: 18px 20px; border: 1px dashed color-mix(in srgb, var(--teal-400) 42%, transparent); border-radius: var(--raio); background: color-mix(in srgb, var(--teal-400) 7%, var(--bg-elevado)); } .ajuda p { margin: 0 !important; flex: 1; min-width: 180px; font-size: .91rem; } .ajuda b { color: var(--texto); } /* O aviãozinho decola quando o aluno passa o mouse */ .btn:hover .ico-aviao { animation: aviaoDecola .6s cubic-bezier(.3, .8, .3, 1); } @keyframes aviaoDecola { 40% { transform: translate(7px, -7px) rotate(8deg); opacity: 0; } 41% { transform: translate(-7px, 7px) rotate(8deg); opacity: 0; } 100% { transform: none; opacity: 1; } } /* ========================================================================= 8. MODAL ========================================================================= */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, #060a12 62%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: apareceFundo .25s ease; } .modal[hidden] { display: none; } @keyframes apareceFundo { from { opacity: 0; } } @media (min-width: 740px) { .modal { align-items: center; padding: 26px; } } .modal__painel { display: flex; flex-direction: column; width: 100%; max-width: 880px; max-height: 94vh; background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: var(--raio-lg) var(--raio-lg) 0 0; box-shadow: var(--sombra-4); overflow: hidden; animation: painelSobe .38s cubic-bezier(.2, .9, .25, 1); } @media (min-width: 740px) { .modal__painel { max-height: 88vh; border-radius: var(--raio-lg); } } @keyframes painelSobe { from { opacity: 0; transform: translateY(28px) scale(.97); } } .modal__topo { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--borda); /* Sem isto o flex encolhe o cabeçalho quando o conteúdo é longo. */ flex-shrink: 0; } .modal__icone { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; padding: 8px; border-radius: 15px; color: var(--ilu-traco); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--texto) 8%, transparent) 1px, transparent 0) 0 0 / 12px 12px, linear-gradient(150deg, color-mix(in srgb, var(--teal-400) 16%, var(--bg-suave)), color-mix(in srgb, var(--violeta) 12%, var(--bg-suave))); } .modal__titulos { flex: 1; min-width: 0; padding-top: 3px; } .modal__titulos h2 { margin: 0 0 4px; font-size: 1.32rem; font-weight: 700; } .modal__titulos p { margin: 0; font-size: .85rem; color: var(--texto-suave); } .modal__fechar { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--borda); border-radius: 11px; background: var(--bg-elevado); color: var(--texto-suave); cursor: pointer; font-size: 19px; line-height: 1; transition: var(--suave); } .modal__fechar:hover { background: var(--bg-suave); color: var(--texto); transform: rotate(90deg); border-color: var(--borda-forte); } /* ---- Abas ---- */ /* ------------------------------------------------------------------------- A barra de abas NÃO pode encolher. Ela é um item flex dentro de .modal__painel; com o flex-shrink padrão (1), o navegador a comprimia de 46px para 10px quando a explicação ficava longa — os botões mantinham a altura natural e transbordavam, e a borda de baixo do container acabava desenhada no meio das palavras. ------------------------------------------------------------------------- */ .abas { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; min-height: 0; } .abas::-webkit-scrollbar { display: none; } .aba { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 15px 14px 13px; border: 0; background: transparent; color: var(--texto-suave); font-size: .89rem; font-weight: 600; line-height: 1.2; letter-spacing: -.012em; cursor: pointer; white-space: nowrap; transition: color var(--rapido); } .aba .ico { width: 15px; height: 15px; } .aba:hover { color: var(--texto); } .aba[aria-selected="true"] { color: var(--ac-texto); } /* flex: 1 1 auto + min-height: 0 = este é o único item que pode encolher, e é ele que ganha a barra de rolagem. Sem o min-height: 0, um item flex se recusa a ficar menor que o próprio conteúdo e empurra os vizinhos. */ .modal__conteudo { padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; } .painel[hidden] { display: none; } .painel { animation: painelTroca .3s ease; } @keyframes painelTroca { from { opacity: 0; transform: translateY(6px); } } .painel > :first-child { margin-top: 0; } .painel p { margin: 0 0 15px; color: var(--texto-medio); } .painel strong { color: var(--texto); font-weight: 600; } .painel ul, .painel ol { margin: 0 0 15px; padding-left: 24px; color: var(--texto-medio); } .painel li { margin-bottom: 7px; } .painel li::marker { color: var(--ac-texto); font-weight: 600; } /* Código CURTO no meio do texto (`analogRead()`). O `:not(pre) >` é essencial: sem ele este fundo claro vazava para dentro do bloco de código escuro e virava faixas irregulares atrás de cada linha. */ .painel :not(pre) > code { padding: 2px 7px; border-radius: 6px; background: var(--bg-suave); color: var(--texto); font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: .85em; font-variant-ligatures: none; } .formula { padding: 15px 18px; margin: 0 0 18px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--teal-400) 10%, var(--bg-suave)), var(--bg-suave)); border-left: 3px solid var(--teal-400); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; font-family: "JetBrains Mono", Consolas, monospace; font-size: .9rem; color: var(--texto) !important; } .subtitulo { margin: 30px 0 14px; font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); } /* Frase de abertura de cada componente: a essência em uma linha */ .painel__lede { padding: 16px 18px; margin: 0 0 22px !important; border-radius: var(--raio-sm); border-left: 3px solid var(--ac-400); background: color-mix(in srgb, var(--ac-400) 8%, var(--bg-suave)); font-size: 1.02rem; line-height: 1.55; color: var(--texto) !important; } /* Subtítulos internos da explicação */ .painel h4 { display: flex; align-items: center; gap: 9px; margin: 30px 0 12px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--texto); } .painel h4::before { content: ""; flex-shrink: 0; width: 5px; height: 18px; border-radius: 3px; background: linear-gradient(var(--ac-400), var(--ac-600)); } /* Passos numerados da montagem */ .montagem { counter-reset: fio; padding: 0 !important; margin: 0 0 16px !important; list-style: none; } .montagem li { position: relative; padding: 9px 0 9px 40px; margin: 0; border-bottom: 1px solid var(--borda); font-size: .92rem; color: var(--texto-medio); } .montagem li:last-child { border-bottom: 0; } .montagem li::before { counter-increment: fio; content: counter(fio); position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--bg-suave); color: var(--ac-texto); font-size: .76rem; font-weight: 800; } .montagem b { color: var(--texto); } /* Caixinha de curiosidade */ .curiosidade { display: flex; gap: 12px; padding: 15px 17px; margin: 22px 0 0; border-radius: var(--raio-sm); background: color-mix(in srgb, var(--indigo) 8%, var(--bg-elevado)); border: 1px solid color-mix(in srgb, var(--indigo) 25%, transparent); font-size: .89rem; color: var(--texto-medio); } .curiosidade::before { content: "?"; flex-shrink: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: .78rem; font-weight: 800; } .curiosidade b { color: var(--texto); } .pinagem { width: 100%; border-collapse: collapse; font-size: .88rem; } .pinagem th, .pinagem td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borda); } .pinagem th { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave); font-weight: 700; } .pinagem tbody tr { transition: background-color var(--rapido); } .pinagem tbody tr:hover { background: var(--bg-suave); } .pinagem td:first-child { font-weight: 600; white-space: nowrap; } .pinagem td:last-child { color: var(--texto-medio); } .dicas { padding: 0; margin: 0; list-style: none; } .dicas li { display: flex; gap: 11px; padding: 13px 16px; margin-bottom: 9px; background: color-mix(in srgb, var(--ambar) 9%, var(--bg-elevado)); border: 1px solid color-mix(in srgb, var(--ambar) 26%, transparent); border-radius: var(--raio-sm); font-size: .88rem; color: var(--texto-medio); transition: var(--rapido); } .dicas li:hover { border-color: color-mix(in srgb, var(--ambar) 45%, transparent); transform: translateX(3px); } .dicas li::before { content: "!"; flex-shrink: 0; display: grid; place-items: center; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: var(--ambar); color: #fff; font-size: .72rem; font-weight: 800; } /* ========================================================================= 9. BLOCO DE CÓDIGO — paleta VS Code Dark+ (a mesma da IDE do Arduino 2.x) ------------------------------------------------------------------------- As cores abaixo são as oficiais do tema Dark+ do VS Code. A ideia é que o aluno veja aqui exatamente as mesmas cores que verá ao abrir a IDE. ========================================================================= */ .codigo-bloco { --cod-fundo: #1e1e1e; --cod-barra: #252526; --cod-linha: #333338; --cod-num: #5a5a5f; --cod-texto: #d4d4d4; border: 1px solid var(--cod-linha); border-radius: var(--raio); overflow: hidden; background: var(--cod-fundo); box-shadow: var(--sombra-3); } /* Barra de título, no estilo de uma janela de editor */ .codigo-bloco__topo { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--cod-barra); border-bottom: 1px solid var(--cod-linha); color: #9b9b9f; font-size: .76rem; font-weight: 500; font-family: "JetBrains Mono", Consolas, monospace; } .codigo-bloco__pontos { display: flex; gap: 6px; flex-shrink: 0; } .codigo-bloco__pontos i { width: 11px; height: 11px; border-radius: 50%; display: block; transition: filter var(--suave); } .codigo-bloco__pontos i:nth-child(1) { background: #ff5f57; } .codigo-bloco__pontos i:nth-child(2) { background: #febc2e; } .codigo-bloco__pontos i:nth-child(3) { background: #28c840; } .codigo-bloco:hover .codigo-bloco__pontos i { filter: brightness(1.15) saturate(1.2); } .codigo-bloco__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .copiar { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; flex-shrink: 0; border: 1px solid #3c3c42; border-radius: 8px; background: #2d2d31; color: #d4d4d4; font-size: .75rem; font-weight: 600; cursor: pointer; transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido); } .copiar:hover { background: #3a3a40; border-color: #50505a; transform: translateY(-1px); } .copiar:active { transform: translateY(0); } .copiar.ok { background: #0e7a5f; border-color: #0e7a5f; color: #fff; } .codigo-bloco pre { margin: 0; padding: 18px 18px 20px; max-height: 480px; overflow: auto; font-family: "JetBrains Mono", "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-size: .82rem; line-height: 1.7; color: var(--cod-texto); tab-size: 2; font-variant-ligatures: none; /* != e >= legíveis para quem está aprendendo */ counter-reset: numlinha; } /* O

 aqui é só um recipiente semântico: nada de fundo nem de padding. */
.codigo-bloco pre > code {
  display: block; background: none; padding: 0; border-radius: 0;
  font: inherit; color: inherit;
}

/* Numeração de linha — gerada por CSS, então NÃO é copiada junto com o código */
.ln {
  display: block; position: relative;
  padding-left: 3.1em; min-height: 1.7em;
  counter-increment: numlinha;
  border-radius: 3px;
  transition: background-color var(--rapido);
}
.ln::before {
  content: counter(numlinha);
  position: absolute; left: 0; width: 2.1em;
  text-align: right; color: var(--cod-num);
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.ln:hover { background: rgba(255, 255, 255, .045); }
.ln:hover::before { color: #9b9b9f; }

/* --- Paleta oficial VS Code Dark+ --- */
.tk-com { color: #6a9955; font-style: italic; }   /* comentários  */
.tk-str { color: #ce9178; }                       /* "textos"     */
.tk-num { color: #b5cea8; }                       /* números      */
.tk-key { color: #569cd6; }                       /* int, void, const */
.tk-ctl { color: #c586c0; }                       /* if, for, return  */
.tk-fun { color: #dcdcaa; }                       /* digitalWrite()   */
.tk-cst { color: #4fc1ff; }                       /* HIGH, LOW, OUTPUT */
.tk-tip { color: #4ec9b0; }                       /* Servo, String     */
.tk-pre { color: #c586c0; }                       /* #include, #define */


/* =========================================================================
   10. MÍDIA (Tinkercad e vídeo)
   ========================================================================= */
.midia {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--bg-suave);
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra-2);
}
@supports not (aspect-ratio: 16 / 9) {
  .midia { height: 0; padding-bottom: 56.25%; }
}
.midia iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.facade {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 15px; padding: 22px; text-align: center;
  border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(140deg, #15202e, #223247);
  background-size: cover; background-position: center;
  transition: var(--suave);
}
.facade--video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 10, 18, .78), rgba(6, 10, 18, .32));
  transition: background-color var(--suave);
}
.facade:hover::after { background: linear-gradient(to top, rgba(6, 10, 18, .68), rgba(6, 10, 18, .2)); }

.facade__play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--coral); color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  transition: transform var(--mola), box-shadow var(--suave);
}
.facade__play .ico { width: 26px; height: 26px; }
.facade--tink .facade__play { background: var(--teal-500); }
/* Anel que pulsa ao redor do play */
.facade__play::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid currentColor;
  opacity: 0; animation: anelPulsa 2.4s ease-out infinite;
}
@keyframes anelPulsa {
  0%   { transform: scale(.85); opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.facade:hover .facade__play { transform: scale(1.11); box-shadow: 0 12px 36px rgba(0, 0, 0, .55); }
.facade__txt { position: relative; z-index: 1; font-size: .94rem; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.facade__sub { position: relative; z-index: 1; font-size: .8rem; opacity: .8; margin-top: -9px; }

.midia-nota { margin-top: 14px; font-size: .84rem; color: var(--texto-suave); }
.aviso {
  padding: 16px 18px; border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--violeta) 9%, var(--bg-elevado));
  border: 1px dashed color-mix(in srgb, var(--violeta) 42%, transparent);
  font-size: .88rem; color: var(--texto-medio);
}
.aviso b { color: var(--texto); }

/* =========================================================================
   12. CONTATO
   ========================================================================= */
.contato {
  display: grid; grid-template-columns: 1fr;
  background: var(--bg-elevado);
  border: 1px solid var(--borda); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
@media (min-width: 900px) { .contato { grid-template-columns: .85fr 1.15fr; } }

/* ---- Lado esquerdo: o convite ---- */
.contato__convite {
  position: relative; isolation: isolate;
  padding: clamp(30px, 4vw, 44px);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--teal-400) 18%, transparent), transparent 62%),
    radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--violeta) 16%, transparent), transparent 62%),
    var(--bg-suave);
  border-bottom: 1px solid var(--borda);
}
@media (min-width: 900px) {
  .contato__convite { border-bottom: 0; border-right: 1px solid var(--borda); }
}
/* Malha de pontos, o mesmo motivo das capas dos cards */
.contato__convite::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--texto) 8%, transparent) 1px, transparent 0);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom right, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 70%);
}

.contato__ilu {
  width: 86px; height: 86px; margin-bottom: 20px;
  color: var(--ilu-traco);
}
.contato__convite h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 3.2vw, 1.85rem); font-weight: 800;
  letter-spacing: -.032em;
}
.contato__frase {
  margin: 0 0 28px; max-width: 34ch;
  color: var(--texto-medio); font-size: .95rem; line-height: 1.6;
}

.contato__lista { padding: 0; margin: 0; list-style: none; }
.contato__lista li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 10px 12px; margin: 0 -12px 4px;
  border-radius: var(--raio-sm);
  font-size: .87rem;
  transition: background-color var(--suave), transform var(--suave);
}
.contato__lista li:hover { background: color-mix(in srgb, var(--bg-elevado) 70%, transparent); transform: translateX(3px); }
.contato__lista strong { display: block; color: var(--texto); font-weight: 600; }
.contato__lista span { color: var(--texto-suave); font-size: .84rem; }
.contato__lista i {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--bg-elevado);
  border: 1px solid var(--borda);
  color: var(--ac-texto); font-style: normal;
  box-shadow: var(--sombra-1);
  transition: transform var(--mola), border-color var(--suave);
}
.contato__lista li:hover i {
  transform: scale(1.08) rotate(-5deg);
  border-color: color-mix(in srgb, var(--teal-400) 50%, var(--borda));
}
.contato__lista i .ico { width: 18px; height: 18px; }

/* ---- Lado direito: o formulário ---- */
#formContato { padding: clamp(28px, 4vw, 44px); }

.form__linha { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__linha { grid-template-columns: 1fr 1fr; } }
.campo { margin-bottom: 18px; }
.campo label {
  display: block; margin-bottom: 8px;
  font-size: .84rem; font-weight: 600; color: var(--texto);
  transition: color var(--rapido);
}
.campo label .opc { font-weight: 400; color: var(--texto-suave); }
.campo:focus-within label { color: var(--ac-texto); }

/* Atenção: daqui para baixo usamos background-COLOR, nunca o atalho
   `background`. O atalho apagaria a seta do