/* landings.css — componentes das 4 landing pages (eadgo/conecta/consulta/pedidos). Complementa site.css: usa SOMENTE os tokens de lá e reaproveita .term/.pk/.howl/.symp/.rv etc. Mobile-first: base = 1 coluna; media queries min-width abrem o layout. */ /* ---------- hero de landing (.lhero + variante claro|escuro) ---------- */ .lhero{padding:72px 0 56px} .lhero.escuro{background:var(--noite);color:#EAF3EE;position:relative;overflow:hidden} .lhero.claro{background:var(--papel);color:var(--tinta);border-bottom:1px solid var(--linha)} .lhero h1{font-family:var(--disp);font-weight:800;font-size:clamp(32px,5vw,54px);line-height:1.04;letter-spacing:-.03em;margin:0 0 18px} .lhero h1 em{font-style:normal} .lhero.escuro h1{color:#fff} .lhero.escuro h1 em{color:var(--menta)} .lhero.claro h1 em{color:var(--verde-d)} .lhero .lead{font-size:17px;max-width:480px;margin:0 0 28px} .lhero.escuro .lead{color:var(--nevoa)} .lhero.claro .lead{color:var(--tinta2)} .lhero.escuro .eyeb{color:var(--menta)} .lhero .acts{display:flex;gap:12px;flex-wrap:wrap} .lhero.claro .hmeta{color:var(--cinza)} .lhero.claro .hmeta i{background:var(--verde)} .lgrid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;position:relative} @media (min-width:841px){ .lhero{padding:96px 0 76px} .lgrid{grid-template-columns:1.05fr .95fr;gap:56px} } /* ---------- faixa de garantias (.gbar) ---------- */ .gbar{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--cinza);padding:18px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)} .gbar span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .gbar i{width:6px;height:6px;border-radius:50%;background:var(--verde);flex:none} .dk .gbar,.lhero.escuro .gbar{color:var(--nevoa);border-color:var(--linha-d)} .dk .gbar i,.lhero.escuro .gbar i{background:var(--menta)} /* No celular, o flex centralizado quebrava os chips em linhas desalinhadas com o último item sozinho e centralizado (parecia acidental). Vira uma grade de 2 colunas alinhada à esquerda: linhas retas, chips começando na mesma margem, sem item solto no meio. Feedback do dono 04/jul. */ @media (max-width:560px){ .gbar{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch;gap:12px 18px;padding:16px 4px} .gbar span{white-space:normal} } /* ---------- grade de features (.feats > .feat) — acabamento premium ---------- Traço menta no topo sempre visível, profundidade real e ícone com anel/brilho. Funciona no claro (landings) e no escuro (.dk, seção "o que está incluso"). Só tokens do design system. */ .feats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .feat{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF,#F8FAF8);border:1px solid #DCE5DE;border-radius:22px;padding:30px 26px 28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 24px 50px -30px rgba(10,20,17,.20), 0 6px 16px -10px rgba(10,20,17,.10); transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s} .feat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--verde),var(--menta));opacity:1} .feat:hover{transform:translateY(-5px);border-color:rgba(143,235,196,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 36px 64px -28px rgba(12,166,120,.28), 0 8px 20px -8px rgba(10,20,17,.12)} .feat .fic{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px; background:linear-gradient(135deg,rgba(12,166,120,.18),var(--menta-soft));border:1px solid rgba(143,235,196,.45); box-shadow:0 10px 22px -10px rgba(12,166,120,.45);transition:transform .3s} .feat:hover .fic{transform:scale(1.06) rotate(-3deg)} .feat h3{font-family:var(--disp);font-weight:700;font-size:18.5px;letter-spacing:-.015em;margin:0 0 7px} .feat p{font-size:13.5px;line-height:1.6;color:var(--cinza);margin:0} @media (prefers-reduced-motion:reduce){.feat,.feat:hover,.feat .fic,.feat:hover .fic{transform:none}} /* variante escura (seção "o que está incluso", .dk): fundo levemente acima do --noite da seção pra o card ganhar corpo, borda menta sutil mais definida, brilho interno no topo e sombra escura profunda. O traço menta e o ícone premium herdam de cima. */ .dk .feat{background:linear-gradient(180deg,#13271E,#0E1F17);border:1px solid rgba(143,235,196,.16); box-shadow:inset 0 1px 0 rgba(143,235,196,.10), 0 30px 60px -28px rgba(0,0,0,.6), 0 8px 20px -10px rgba(0,0,0,.4)} .dk .feat:hover{border-color:rgba(143,235,196,.4); box-shadow:inset 0 1px 0 rgba(143,235,196,.14), 0 40px 72px -26px rgba(12,166,120,.28), 0 10px 24px -10px rgba(0,0,0,.5)} .dk .feat .fic{background:linear-gradient(135deg,rgba(12,166,120,.28),rgba(143,235,196,.12));border-color:rgba(143,235,196,.3); box-shadow:0 10px 24px -10px rgba(12,166,120,.5)} .dk .feat h3{color:#fff} .dk .feat p{color:var(--nevoa)} /* ---------- como funciona: reuso de .howl/.how (site.css) + variante escura ---------- */ .dk .how{background:var(--musgo);border-color:var(--linha-d)} .dk .how::before{color:var(--menta)} .dk .how b{color:#fff} .dk .how p{color:var(--nevoa)} /* ---------- planos (.planos: 3 colunas, .pk.hot no meio) ---------- */ .planos{display:grid;gap:26px 18px;grid-template-columns:1fr;align-items:stretch;padding-top:14px} .planos .li{display:flex;gap:10px;font-size:14px;padding:7px 0;color:var(--tinta2)} .planos .li svg{flex:none;margin-top:4px;color:var(--verde)} .planos .lis{margin:0 0 22px} /* As 3 colunas entram já no TABLET (≥700px), não só no desktop. Antes só virava 3-col em 880px, então no iPad em pé (768px) os 3 planos viravam UMA coluna esticada (712px) e o card "MAIS ESCOLHIDO" perdia o destaque — o dono notou. A 700px cada card fica ~225px, largura que o card já suporta (no celular ele roda em ~300px). O realce do .pk.hot só entra quando há espaço de sobra (≥880px), pra não encostar nos vizinhos no tablet apertado. */ @media (min-width:700px){ .planos{grid-template-columns:repeat(3,1fr)} } @media (min-width:880px){ .planos .pk.hot{transform:scale(1.03)} .planos .pk.hot:hover{transform:scale(1.03) translateY(-4px)} } /* ---------- FAQ (details.faq dentro de .faqs) — acabamento premium ---------- Cartões com profundidade sutil sobre o fundo papel, botão circular menta pro +/-, hover elevado e o item aberto ganha traço menta no topo. Só tokens do design system. */ .faqs{max-width:760px;margin:0 auto;display:grid;gap:14px} details.faq{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF,#FCFDFC);border:1px solid #E1E7E2;border-radius:18px; box-shadow:0 14px 34px -26px rgba(10,20,17,.28), 0 3px 10px -8px rgba(10,20,17,.08); transition:border-color .25s,box-shadow .25s,transform .25s} /* traço menta no topo, some quando fechado e acende ao abrir (assinatura premium sem poluir) */ details.faq::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--verde),var(--menta));opacity:0;transition:opacity .25s} details.faq:hover{border-color:#CFE0D6;box-shadow:0 20px 42px -24px rgba(10,20,17,.3), 0 4px 12px -8px rgba(10,20,17,.1);transform:translateY(-2px)} details.faq[open]{border-color:rgba(143,235,196,.7);box-shadow:0 22px 46px -22px rgba(12,166,120,.28), 0 4px 12px -8px rgba(10,20,17,.1)} details.faq[open]::before{opacity:1} details.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--tinta);display:flex;justify-content:space-between;align-items:center;gap:16px} details.faq summary::-webkit-details-marker{display:none} /* botão circular menta com o "+" (via ícone SVG data-uri girado): premium e claro */ details.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%; background:var(--menta-soft);border:1px solid rgba(143,235,196,.5); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A8B66' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center;background-size:15px; transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .25s,border-color .25s} details.faq:hover summary::after{background-color:rgba(143,235,196,.22)} details.faq[open] summary::after{transform:rotate(135deg);background-color:var(--verde);border-color:var(--verde); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")} details.faq .fbd{padding:0 22px 20px;font-size:14.5px;line-height:1.65;color:var(--tinta2)} details.faq .fbd p{margin:0 0 10px} details.faq .fbd p:last-child{margin-bottom:0} @media (prefers-reduced-motion:reduce){details.faq,details.faq:hover,details.faq summary::after{transform:none}} /* variante escura (.dk), caso o FAQ apareça em seção escura */ .dk details.faq{background:linear-gradient(180deg,#13271E,#0E1F17);border-color:rgba(143,235,196,.16); box-shadow:0 24px 50px -28px rgba(0,0,0,.55)} .dk details.faq:hover{border-color:rgba(143,235,196,.32)} .dk details.faq[open]{border-color:rgba(143,235,196,.5)} .dk details.faq summary{color:#fff} .dk details.faq .fbd{color:var(--nevoa)} .dk details.faq summary::after{background-color:rgba(143,235,196,.14)} /* ---------- CTA final escuro (.ctaf, dentro de section.sec.dk) ---------- */ .ctaf{text-align:center;max-width:640px;margin:0 auto;position:relative;z-index:1} .ctaf h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.6vw,36px);letter-spacing:-.025em;line-height:1.08;margin:0 0 10px;color:#fff} .ctaf p{font-size:16px;color:var(--nevoa);margin:0 0 28px} .ctaf .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .ctaf .vivo,.ctaf .term{margin:36px auto 0;text-align:left;max-width:520px} /* ---------- moldura do elemento vivo (.vivo) ---------- */ /* Mesma "casca" do .term (site.css), mas com corpo livre para cartões de demo (inbox, fila de espera, fila de produção). Para demo em formato terminal, use .term direto. */ .vivo{background:linear-gradient(180deg,rgba(19,39,30,.9),rgba(15,31,24,.9));border:1px solid var(--linha-d);border-radius:var(--r);box-shadow:0 40px 90px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(143,235,196,.12);overflow:hidden;color:#EAF3EE} .vivo .vbar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--linha-d)} .vivo .vbody{padding:18px 20px;min-height:220px} .vrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--linha-d);border-radius:13px;background:rgba(10,20,17,.55);margin-bottom:9px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s,border-color .3s} .vrow.on{opacity:1;transform:none} .vrow.hi{border-color:rgba(143,235,196,.3)} .vrow:last-child{margin-bottom:0} .vrow .vt{min-width:0;flex:1} .vrow .vt b{display:block;font-size:13.5px;font-weight:600;color:#EAF3EE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vrow .vt span{display:block;font-size:12px;color:var(--nevoa);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vst{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid var(--linha-d);color:var(--nevoa);flex:none;transition:color .3s,background .3s,border-color .3s} .vst.ok{background:var(--menta-soft);border-color:rgba(143,235,196,.3);color:var(--menta)} .vst.run{background:rgba(12,166,120,.16);border-color:rgba(12,166,120,.45);color:var(--verde)} .vst.warn{background:rgba(255,107,90,.12);border-color:rgba(255,107,90,.3);color:#FFB3A8} .vmsg{font-size:13px;color:#CFE6DA;background:rgba(10,20,17,.55);border:1px solid var(--linha-d);border-radius:13px;border-bottom-left-radius:4px;padding:10px 14px;margin-bottom:9px;max-width:88%;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s} .vmsg.me{margin-left:auto;border-bottom-left-radius:13px;border-bottom-right-radius:4px;background:rgba(12,166,120,.16);border-color:rgba(12,166,120,.35)} .vmsg.on{opacity:1;transform:none} .vmsg .vh{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--menta);margin-bottom:3px} /* ---------- botão de pausa das demos vivas (.vpausa, WCAG 2.2.2) ---------- */ /* Injetado via JS — só existe quando a animação de fato roda: loops de hero das landings (conecta/consulta/pedidos, block extra_js) e termCycle do eadgo (static/js/site.js). */ /* Alvo de toque confortável (≥44px, WCAG 2.5.8): antes era 62×24px, pequeno pra tocar no celular (o dono/audit apontou). Agora inline-flex com min-height:44 e padding maior — a pílula inteira é a área de toque, sem esticar visualmente demais na barra do terminal. */ .vpausa{margin-left:10px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:99px;border:1px solid var(--linha-d);background:transparent;color:var(--nevoa);cursor:pointer;flex:none;transition:border-color .25s,color .25s,background .25s} .vpausa:hover,.vpausa:focus-visible{border-color:var(--menta);color:var(--menta);background:var(--menta-soft)} @media (prefers-reduced-motion:reduce){ .vrow,.vmsg{opacity:1;transform:none} } /* fix: .btn2 dentro de seções .escuro ficava com texto escuro sobre fundo escuro (a regra de cor clara só existia para .dk) — reportado pelo dono 03/jul/2026 */ .escuro .btn2{border-color:rgba(143,235,196,.3);color:var(--menta)} .escuro .btn2:hover{border-color:var(--menta);background:var(--menta-soft)} /* ---------- nav do protótipo (partials/nav.html, compartilhada por todas as páginas) ---------- Base visual em site.css (.nav/.navin/.nlink); aqui só o que o protótipo não previa: no protótipo os links eram , no portal são e precisam perder o sublinhado. */ .nav a.nlink,.nav a.brand{text-decoration:none} /* Celular (≤760px): a fileira de links do desktop dá lugar ao botão sanduíche + gaveta premium (.mnav) — todo o visual e a lógica moram em site.css/nav.js. Aqui só garantimos que a barra fica em UMA linha (marca à esquerda, sanduíche à direita), anulando o antigo layout que quebrava marca/links/botão em várias linhas (o "menu ruim" que o dono relatou 04/jul). Ver partials/nav.html e a seção "menu do celular (gaveta premium)" em site.css. */ @media (max-width:760px){ .navin{flex-wrap:nowrap;padding:12px 16px} .navin .brand{flex:0 1 auto} /* marca no seu tamanho, sem esticar a linha */ } /* ---------- itens de plano (.pk .li) fora de .planos/.duo ---------- Home e páginas de hospedagem/segurança usam .li em grades .grid.g3; site.css só estilizava .planos .li e .duo .li. Cores do .pk.hot .li já vêm de site.css. */ .pk .li{display:flex;gap:10px;font-size:14px;padding:7px 0;color:var(--tinta2)} .pk .li svg{flex:none;margin-top:4px;color:var(--verde)} /* ---------- especificações do servidor no card de plano (.pk .specs) ---------- Exigência do dono (03/jul): todo card de dedicado mostra vCPU, memória, disco, região e sistema operacional. Usado na home e em /hospedagem/. */ .pk .specs{margin:0 0 22px;border-top:1px dashed var(--linha);padding-top:12px} .pk .specs .sr{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--cinza);padding:4px 0} .pk .specs .sr b{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--tinta);text-align:right} .pk.hot .specs{border-top-color:var(--linha-d)} .pk.hot .specs .sr{color:var(--nevoa)} .pk.hot .specs .sr b{color:var(--menta)} /* ---------- servidores dedicados: grupos por região + toggle (.dedi) ---------- Home: JS adiciona .js à raiz .dedi e as pílulas (.dedi-toggle, reuso de .row/.seg de site.css) passam a alternar os grupos. Sem JS (ou em /hospedagem/, onde as duas regiões ficam sempre visíveis por decisão do dono): pílulas escondidas e grupos empilhados, cada um com o título da região (.dedi-titulo). */ .dedi-toggle{display:none} .dedi-titulo{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-d);text-align:center;margin:38px 0 8px} .dedi.js .dedi-toggle{display:flex} .dedi.js .dedi-titulo{display:none} .dedi.js .dedi-grupo{display:none} .dedi.js .dedi-grupo.on{display:block} /* ---------- resumo de dedicados na home (feedback do dono 03/jul) ---------- Dois cartões de entrada por região, alinhados (align-items:stretch no .g2), levando à /hospedagem/. Substituem os 6 cards + toggle que pesavam na home. */ .grid.g2{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:760px){.grid.g2{grid-template-columns:1fr 1fr}} .rescard{position:relative;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,#FFFFFF,#FCFEFD);border:1px solid var(--linha);border-radius:22px;padding:30px 28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 26px 54px -32px rgba(10,20,17,.24), 0 4px 14px -8px rgba(10,20,17,.08); transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s} .rescard::before{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--verde),var(--menta));opacity:0;transition:opacity .3s} .rescard:hover{transform:translateY(-4px);border-color:rgba(143,235,196,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 36px 66px -30px rgba(12,166,120,.3), 0 6px 18px -8px rgba(10,20,17,.1)} .rescard:hover::before{opacity:1} .rescard-h{display:flex;align-items:center;gap:12px;margin-bottom:16px} .rescard-ic{width:44px;height:44px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;background:linear-gradient(135deg,rgba(12,166,120,.16),var(--menta-soft));border:1px solid var(--linha);box-shadow:0 8px 20px -10px rgba(12,166,120,.4);transition:transform .3s} .rescard:hover .rescard-ic{transform:scale(1.08) rotate(-3deg)} .rescard-badge{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--papel);border:1px solid var(--linha);color:var(--tinta2)} .rescard h3{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em;margin:0 0 6px;color:var(--tinta)} .rescard-desc{font-size:14px;color:var(--cinza);margin:0 0 18px;min-height:42px;line-height:1.5} .rescard-price{margin-top:auto;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .rescard-price > span{font-size:12.5px;color:var(--cinza)} .rescard .val{margin:0} .rescard-spec{font-family:var(--mono);font-size:12px;color:var(--tinta2);margin-top:14px;border-top:1px dashed var(--linha);background:var(--papel);border-radius:0 0 12px 12px;padding:14px 12px 0;margin-left:-12px;margin-right:-12px} /* títulos de região na /hospedagem/ (empilhados, sem toggle): premium, com nota lateral. Respiro generoso acima (separa do grupo anterior) e abaixo (antes dos cards), pra o título não grudar nas caixas. O grid abaixo não leva mais padding-top: o espaçamento é só daqui. */ .dedi-titulo{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;color:var(--tinta);text-align:left;margin:64px 0 32px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} /* o 1º título ("Servidores na Europa") vem logo APÓS os 2 cards de intro; respiro grande pra ele não grudar nos cards de cima (o problema que o dono apontou). */ .dedi-titulo:first-of-type{margin-top:76px} /* cards de intro por região (Europa / Brasil) na /hospedagem/. Como a seção #dedicados tem fundo BRANCO, um card branco com sombra clara "some" no fundo. Solução premium: fundo levemente off-white (gradiente sutil), traço menta SEMPRE visível no topo (assinatura premium), borda com leve tom, e sombra em camadas mais definida pra dar profundidade real sobre o branco. Ícone com anel e brilho; no hover, eleva com sombra esverdeada. Só tokens do design system. */ .card-intro{position:relative;overflow:hidden;border-radius:22px;padding:34px 30px 32px; background:linear-gradient(180deg,#FFFFFF,#F8FAF8);border:1px solid #DCE5DE; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 28px 56px -28px rgba(10,20,17,.22), 0 8px 18px -10px rgba(10,20,17,.13); transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s} /* traço menta de ponta a ponta no topo (como os cards de preço .pk), sempre visível: assinatura premium */ .card-intro::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--verde),var(--menta));opacity:1} .card-intro:hover{transform:translateY(-5px);border-color:rgba(143,235,196,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 40px 70px -28px rgba(12,166,120,.32), 0 8px 20px -8px rgba(10,20,17,.12)} .card-intro .ic{width:54px;height:54px;border-radius:16px;font-size:25px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(12,166,120,.18),var(--menta-soft));border:1px solid rgba(143,235,196,.45); box-shadow:0 10px 22px -10px rgba(12,166,120,.45);transition:transform .3s;margin-bottom:20px} .card-intro:hover .ic{transform:scale(1.06) rotate(-3deg)} .card-intro h3{font-size:20px;font-weight:700;margin-bottom:8px} .card-intro p{font-size:14.5px;line-height:1.6} @media (prefers-reduced-motion:reduce){ .card-intro,.card-intro:hover,.card-intro .ic,.card-intro:hover .ic{transform:none} } .dedi-nota{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--verde-d);background:var(--menta-soft);border-radius:999px;padding:4px 12px} /* ---------- página de checkout premium (feedback do dono 03/jul) ---------- */ .ckgrid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:14px} @media(min-width:860px){.ckgrid{grid-template-columns:1.15fr .85fr;align-items:start}} .ckcol{display:flex;flex-direction:column;gap:20px} .ckbox{position:relative;background:linear-gradient(180deg,#FFFFFF,#FCFEFD);border:1px solid var(--linha);border-radius:24px;padding:30px 30px;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 26px 54px -32px rgba(10,20,17,.24), 0 4px 14px -8px rgba(10,20,17,.08); transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s} .ckbox::before{content:"";position:absolute;top:0;left:30px;right:30px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--verde),var(--menta))} .ckbox:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 34px 64px -30px rgba(10,20,17,.3), 0 6px 18px -8px rgba(10,20,17,.1)} .ckbox .eyeb{margin-bottom:20px} .cklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .cklist li{display:flex;align-items:center;gap:13px;font-size:14.5px;color:var(--tinta2);line-height:1.45} .cklist li svg{flex:0 0 auto;width:24px;height:24px;padding:5px;box-sizing:border-box;color:var(--verde);background:var(--menta-soft);border-radius:50%} .ckspecs{display:flex;flex-direction:column;gap:2px} .ckspecs .sr{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--cinza);padding:12px 0;border-bottom:1px dashed var(--linha)} .ckspecs .sr:last-child{border-bottom:none} .ckspecs .sr b{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--tinta);text-align:right;background:var(--papel);padding:4px 10px;border-radius:8px} @media (prefers-reduced-motion: reduce){.ckbox,.ckbox:hover{transform:none;transition:none}} .ckgrid > aside{align-self:start} .ckresumo{padding:30px 28px} /* resumo do pedido fixo enquanto rola a coluna de benefícios (só no layout de 2 colunas; no mobile de 1 coluna não gruda). top=90px folga abaixo da nav sticky. */ @media(min-width:860px){.ckresumo{position:sticky;top:90px}} .ckresumo .val{margin:6px 0 0} .ckgar{display:flex;flex-direction:column;gap:10px;margin:18px 0 22px;padding-top:18px;border-top:1px solid var(--linha-d)} .ckgar span{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--nevoa)} .ckresumo .btn{width:100%;justify-content:center} .cknota{font-size:12.5px;color:var(--nevoa);margin:14px 0 0;line-height:1.5} /* ---------- formulário de pagamento no card de resumo (Asaas) ---------- */ .ckform{display:flex;flex-direction:column;gap:15px;margin:20px 0 4px;padding-top:20px;border-top:1px solid var(--linha-d)} .ckf{display:flex;flex-direction:column;gap:6px} .ckf label{font-family:var(--body);font-size:13px;font-weight:600;color:var(--tinta2)} .ckfield{width:100%;font-family:var(--body);font-size:15px;color:var(--tinta);background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;transition:border-color .2s,box-shadow .2s} .ckfield::placeholder{color:var(--cinza);opacity:.75} .ckfield:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--menta-soft)} .ckform .btn{width:100%;justify-content:center;margin-top:4px} /* erros de campo: o Django imprime