/* * Ecommerce360 — tema público (site.css) * * Layout e ritmo derivados do template "nanoSEO" (TemplateMonster wt_prod-27862), * recriados em CSS puro (sem Bootstrap/jQuery, sem imagens do template) e * vestidos com a identidade original: âmbar #E8A33D, fundo escuro quente, * logo com o anel âmbar, Inter + IBM Plex Mono. * * Duas "temas de página" (classe no , ver base.html): * .page-light home, cases, 404 — seções claras alternando com blocos escuros * .page-dark /parcerias/* — landing pages autocontidas, 100% escuras * * O painel /admin NÃO usa este arquivo (continua em main.css + admin.css). * Trocar a identidade = editar só os tokens abaixo. */ :root{ /* --- marca --- */ --amber:#E8A33D; --amber-hi:#F2B85C; --amber-deep:#9A5A08; /* âmbar legível sobre fundo claro (AA) */ --amber-soft:rgba(232,163,61,.15); --copper:#C97A3D; --on-amber:#1A1006; /* texto sobre âmbar */ /* --- escuro (identidade original; também consumido pelas /parcerias) --- */ --bg:#14110D; --surface:#1D1712; --surface-2:#241D16; --border:#33291E; --text:#F2ECE4; --text-soft:#C9BFB2; --muted:#9C9080; --accent:#E8A33D; --accent-dim:#5E441E; --accent-ink:#1A1006; /* --- claro (template) --- */ --paper:#ffffff; --mist:#FAF6EE; --line:#ECE4D6; --ink:#282829; /* mesmo cinza-grafite do logo preto */ --ink-soft:#5E574D; --ink-faint:#8B8377; --grad-text:linear-gradient(to right,#9A5A08 0%,#C97A1A 100%); /* palavra de destaque em fundo claro */ --grad-text-dark:linear-gradient(to right,#F2B85C 0%,#E8A33D 45%,#C97A3D 100%); /* em fundo escuro */ --shadow-card:0 0 35px rgba(120,90,40,.13); --shadow-lift:0 22px 50px rgba(90,60,10,.18); --radius-xl:40px; --radius-lg:28px; --header-h:84px; --ease:cubic-bezier(.22,.7,.28,1); --font:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --serif:'Playfair Display',serif; } *,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); } body{ font-family:var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } ul{ list-style:none; } :focus-visible{ outline:3px solid var(--amber); outline-offset:3px; border-radius:6px; } .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .sr-only:focus{ position:fixed; z-index:200; top:8px; left:8px; width:auto; height:auto; clip:auto; padding:10px 16px; background:var(--amber); color:var(--on-amber); border-radius:8px; } /* ---------- temas de página ---------- */ .page-light{ font-size:16px; line-height:1.7; color:var(--ink); background:var(--paper); } .page-light h1,.page-light h2,.page-light h3,.page-light h4{ font-weight:700; line-height:1.22; color:var(--ink); letter-spacing:-.015em; } .page-light h1,.page-light h2{ text-wrap:balance; } .page-light h1{ font-size:clamp(36px,5vw,62px); } .page-light h2{ font-size:clamp(28px,3.5vw,42px); } .page-light h3{ font-size:21px; } .page-dark{ font-size:18px; line-height:1.55; color:var(--text); background:var(--bg); } .page-dark h1,.page-dark h2,.page-dark h3{ font-weight:600; letter-spacing:-.01em; } .page-dark .wrap{ max-width:1120px; } /* palavra de destaque: Playfair itálico com gradiente âmbar (assinatura do template) */ .title-styling,.hero h1 .hl{ font-family:var(--serif); font-weight:900; font-style:italic; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding:0 .06em .04em 0; } .on-dark .title-styling,.on-dark .hl,.hero h1 .hl{ background-image:var(--grad-text-dark); } /* linhas verticais pontilhadas (template: .line-custom), só em páginas claras */ .page-light::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: repeating-linear-gradient(to bottom,rgba(232,163,61,.20) 0 7px,transparent 7px 19px), repeating-linear-gradient(to bottom,rgba(154,90,8,.12) 0 7px,transparent 7px 19px), repeating-linear-gradient(to bottom,rgba(232,163,61,.20) 0 7px,transparent 7px 19px), repeating-linear-gradient(to bottom,rgba(154,90,8,.12) 0 7px,transparent 7px 19px); background-size:2px 100%; background-repeat:no-repeat; background-position:9% 0,36% 0,64% 0,91% 0; } @media (max-width:1100px){ .page-light::before{ display:none; } } main,.site-footer{ position:relative; z-index:1; } /* ---------- botões (template "zakaria": preenchimento que sobe no hover) ---------- */ .button{ position:relative; z-index:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 30px; border:2px solid transparent; border-radius:50px; overflow:hidden; font:600 15px/1.2 var(--font); letter-spacing:.01em; cursor:pointer; white-space:nowrap; transition:color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out; } .button::after{ content:''; position:absolute; z-index:-1; inset:0; transform:translateY(101%); border-radius:inherit; transition:transform .35s var(--ease); } .button:hover::after,.button:focus-visible::after{ transform:none; } .button .chev{ transition:transform .25s var(--ease); } .button:hover .chev{ transform:translateX(4px); } .button-lg{ padding:16px 36px; font-size:16px; } .button-primary{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); } .button-primary::after{ background:var(--bg); } .button-primary:hover,.button-primary:focus-visible{ color:#fff; box-shadow:0 10px 26px rgba(232,163,61,.32); } .button-outline{ border-color:rgba(255,255,255,.4); color:#fff; background:transparent; } .button-outline::after{ background:var(--amber); } .button-outline:hover,.button-outline:focus-visible{ color:var(--on-amber); border-color:var(--amber); } .button-outline-dark{ border-color:var(--ink); color:var(--ink); background:transparent; } .button-outline-dark::after{ background:var(--ink); } .button-outline-dark:hover,.button-outline-dark:focus-visible{ color:#fff; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:100; height:var(--header-h); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .25s,box-shadow .25s,background .25s; } .site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 8px 28px rgba(90,60,10,.08); } .site-header .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; } .brand{ display:inline-flex; align-items:center; } .brand img{ height:68px; width:auto; } .logo-light{ display:none; } /* logo branco: só em contexto escuro */ .page-dark .logo-ink{ display:none; } .page-dark .logo-light{ display:block; } .site-nav{ display:flex; align-items:center; gap:6px; } .nav-link{ position:relative; padding:8px 16px; font-size:14.5px; font-weight:500; color:var(--ink); transition:color .2s; } .nav-link::after{ content:''; position:absolute; left:16px; right:16px; bottom:2px; height:2px; border-radius:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .nav-link:hover,.nav-link.is-active{ color:var(--amber-deep); } .nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1); } .site-nav .button{ margin-left:14px; padding:11px 24px; font-size:14px; } .nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:#fff; align-items:center; justify-content:center; cursor:pointer; } .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .3s,background .3s; } .nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; } .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; } .nav-open .nav-toggle span{ background:transparent; } .nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); } .nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); } /* header em páginas escuras (/parcerias) */ .page-dark .site-header{ background:rgba(20,17,13,.92); } .page-dark .site-header.is-stuck{ border-bottom-color:var(--border); box-shadow:0 8px 28px rgba(0,0,0,.35); } .page-dark .nav-link{ color:var(--text-soft); } .page-dark .nav-link:hover,.page-dark .nav-link.is-active{ color:var(--amber); } .page-dark .nav-toggle{ background:var(--surface); border-color:var(--border); } .page-dark .nav-toggle span,.page-dark .nav-toggle span::before,.page-dark .nav-toggle span::after{ background:var(--text); } .page-dark.nav-open .nav-toggle span{ background:transparent; } @media (max-width:991px){ .brand img{ height:56px; } .nav-toggle{ display:inline-flex; } .site-nav{ position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:#fff; padding:8px 24px 24px; border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(90,60,10,.12); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s,transform .25s,visibility .25s; } .page-dark .site-nav{ background:var(--bg); border-bottom-color:var(--border); } .nav-open .site-nav{ opacity:1; visibility:visible; transform:none; } .nav-link{ padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px; } .page-dark .nav-link{ border-bottom-color:var(--border); } .nav-link::after{ display:none; } .site-nav .button{ margin:18px 0 0; } } /* ---------- revelação ao rolar (só com JS) ---------- */ .js [data-reveal]{ opacity:0; transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--d,0s); } .js [data-reveal="up"]{ transform:translate3d(0,34px,0); } .js [data-reveal="left"]{ transform:translate3d(-42px,0,0); } .js [data-reveal="right"]{ transform:translate3d(42px,0,0); } .js [data-reveal="zoom"]{ transform:scale(.94); } .js [data-reveal].is-in{ opacity:1; transform:none; } /* ---------- seções ---------- */ .section{ position:relative; padding:110px 0; overflow-x:clip; } /* recorta o deslocamento inicial dos [data-reveal] laterais */ .section-head{ max-width:720px; margin:0 auto 56px; text-align:center; } .section-head p{ margin-top:18px; color:var(--ink-soft); } .eyebrow{ display:inline-block; margin-bottom:14px; font:500 12.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--amber-deep); } .on-dark .eyebrow{ color:var(--amber); } .on-dark{ color:var(--text); } .on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; } /* ---------- hero (escuro, identidade original) ---------- */ .hero{ position:relative; color:var(--text); overflow:hidden; isolation:isolate; padding:56px 0 0; background:var(--bg); } .hero-glow{ position:absolute; inset:-10%; z-index:-2; pointer-events:none; background: radial-gradient(46% 60% at 22% 18%,rgba(232,163,61,.18),transparent 68%), radial-gradient(30% 42% at 82% 6%,rgba(94,68,30,.28),transparent 70%), radial-gradient(1px 1px at center,rgba(242,236,228,.06) 40%,transparent 41%); background-size:auto,auto,26px 26px; animation:glow-in 1.1s ease-out both; } @keyframes glow-in{ from{ opacity:0; } to{ opacity:1; } } .hero-lines{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; overflow:visible; pointer-events:none; } .hero-line,.hero-line-glow{ fill:none; stroke-linecap:round; } .hero-line{ stroke-width:2.5; } .hero-line-glow{ stroke-width:7; } .hero-line-1,.hero-line-glow-1{ stroke:#E8A33D; } .hero-line-2,.hero-line-glow-2{ stroke:#C97A3D; } .hero-line-3,.hero-line-glow-3{ stroke:#E4C88F; } .hero-line-4,.hero-line-glow-4{ stroke:#B5715E; } .hero-line-5,.hero-line-glow-5{ stroke:#6E7A8A; } /* linhas "se organizam" conforme o scroll: --mx-line-t escrito por site.js */ .hero-line,.hero-line-glow{ transform-origin:center; transform:translate3d(calc(var(--mx-line-jx,0px) * (1 - var(--mx-line-t,.15))),calc(var(--mx-line-jy,0px) * (1 - var(--mx-line-t,.15))),0) rotate(calc(var(--mx-line-jr,0deg) * (1 - var(--mx-line-t,.15)))); } .hero-line{ stroke-dasharray:var(--mx-line-len,1500); stroke-dashoffset:calc(var(--mx-line-len,1500) * (1 - var(--mx-line-t,.15))); opacity:calc(.45 + .4 * var(--mx-line-t,.15)); } .hero-line-glow{ opacity:calc(.12 + .28 * var(--mx-line-t,.15)); } .hero-line-1,.hero-line-glow-1{ --mx-line-len:1550; --mx-line-jx:-26px; --mx-line-jy:30px; --mx-line-jr:-5deg; } .hero-line-2,.hero-line-glow-2{ --mx-line-len:1600; --mx-line-jx:28px; --mx-line-jy:-24px; --mx-line-jr:4deg; } .hero-line-3,.hero-line-glow-3{ --mx-line-len:1520; --mx-line-jx:-20px; --mx-line-jy:-28px; --mx-line-jr:6deg; } .hero-line-4,.hero-line-glow-4{ --mx-line-len:1580; --mx-line-jx:22px; --mx-line-jy:26px; --mx-line-jr:-7deg; } .hero-line-5,.hero-line-glow-5{ --mx-line-len:1560; --mx-line-jx:-24px; --mx-line-jy:18px; --mx-line-jr:3deg; } /* formas flutuantes com parallax do mouse (template: .decor__element) */ .decor{ position:absolute; inset:0; z-index:-1; pointer-events:none; } .decor-shape{ position:absolute; will-change:transform; transform:translate3d(calc(var(--px,0) * var(--depth,0) * 260px),calc(var(--py,0) * var(--depth,0) * 260px),0) rotate(var(--rot,0deg)); transition:transform .35s ease-out; } .shape-sq{ border-radius:30%; background:linear-gradient(160deg,#3A2A14 0%,#241D16 60%,#17130E 100%); border:1px solid rgba(232,163,61,.22); box-shadow:0 30px 60px rgba(0,0,0,.35); } .shape-orb{ border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(232,163,61,.42),rgba(201,122,61,.14) 60%,transparent 72%); } .shape-ring{ border-radius:50%; border:2px solid rgba(232,163,61,.3); } .s1{ --depth:.115; --rot:12deg; width:120px; height:120px; right:5%; top:9%; } .s2{ --depth:-.15; --rot:-14deg; width:84px; height:84px; right:34%; top:58%; opacity:.9; } .s3{ --depth:.2; width:220px; height:220px; left:-90px; top:36%; } .s4{ --depth:-.1; width:56px; height:56px; left:56%; top:5%; } .s5{ --depth:.08; width:320px; height:320px; right:-140px; top:34%; opacity:.8; } .hero .wrap{ position:relative; z-index:1; } .hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; padding-bottom:48px; } .hero h1{ margin-top:6px; color:#fff; font-size:clamp(36px,5vw,60px); line-height:1.16; font-weight:700; letter-spacing:-.02em; } .hero .lede{ margin-top:24px; max-width:600px; font-size:18px; color:var(--text-soft); } .hero .lede p + p{ margin-top:14px; } .hero .ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; } .hero-visual{ display:flex; align-items:center; justify-content:center; } .hero-visual img{ width:100%; max-width:460px; height:auto; filter:drop-shadow(0 30px 50px rgba(0,0,0,.4)); } .hero-wave{ position:absolute; left:0; right:0; bottom:-1px; z-index:0; width:100%; height:clamp(50px,7vw,110px); display:block; pointer-events:none; } /* faixa de plataformas (marquee) dentro do bloco escuro do hero */ #brands{ position:relative; z-index:1; padding:40px 0 clamp(90px,10vw,150px); border-top:1px solid rgba(232,163,61,.14); } .brands-label{ font:500 12.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:28px; } .brands-track{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent); mask-image:linear-gradient(to right,transparent,#000 64px,#000 calc(100% - 64px),transparent); } .brands-scroll{ display:flex; width:max-content; animation:brands-marquee 32s linear infinite; } .brands-track:hover .brands-scroll{ animation-play-state:paused; } .brands-group{ display:flex; align-items:center; flex-shrink:0; gap:72px; padding-right:72px; } .brands-group img{ height:30px; width:auto; object-fit:contain; filter:grayscale(1) opacity(.55) brightness(1.4); transition:filter .2s ease; } .brands-group img:hover{ filter:none; } @keyframes brands-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-25%); } } @media (max-width:991px){ .hero{ padding-top:36px; } .hero-grid{ grid-template-columns:1fr; gap:36px; } .hero-visual img{ max-width:340px; } .s1,.s3,.s5{ opacity:.5; } .brands-group{ gap:44px; padding-right:44px; } .brands-group img{ height:24px; } } /* ---------- parcerias (cards escuros sobre seção clara) ---------- */ .partners{ padding:70px 0 90px; } .partners .brands-label{ color:var(--amber-deep); } .partnership-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; padding:16px 4px 4px; } .partnership-card{ position:relative; width:320px; max-width:100%; padding:34px 28px 30px; border-radius:var(--radius-lg); background:var(--bg); color:var(--text); border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; box-shadow:0 18px 40px rgba(20,17,13,.22); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .partnership-card:hover{ transform:translateY(-8px); box-shadow:0 26px 50px rgba(20,17,13,.32); } .partnership-card img{ height:34px; width:auto; object-fit:contain; } .partnership-card p{ font-size:15px; color:var(--text-soft); line-height:1.55; } .partnership-card .seal{ position:absolute; top:-18px; right:-14px; width:72px; height:72px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); } .partnership-card .button{ padding:10px 24px; font-size:14px; } /* ---------- convergência (capítulo escuro com scroll pinado) ---------- */ .hero-convergence{ background:var(--bg); color:var(--text); position:relative; } .convergence-track{ height:300vh; position:relative; } .convergence-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:calc(var(--header-h) + 36px) 24px 0; } .convergence-copy{ text-align:center; max-width:640px; margin:0 auto 8px; padding:0 24px; } .convergence-copy h2{ margin-top:14px; font-size:clamp(28px,3.4vw,42px); line-height:1.22; } .convergence-copy .lede{ margin:16px auto 0; color:var(--text-soft); font-size:18px; } .convergence-svg{ width:100%; aspect-ratio:1440 / 600; height:auto; display:block; } .conv-thread-crisp,.conv-thread-glow{ fill:none; stroke-linecap:round; } .conv-thread-crisp{ stroke-width:2.5; stroke-dasharray:var(--mx-thread-len,1000); stroke-dashoffset:calc(var(--mx-thread-len,1000) * (1 - var(--mx-thread-t,0))); opacity:calc(.45 + .4 * var(--mx-thread-t,0)); } .conv-thread-glow{ stroke-width:7; opacity:calc(.12 + .28 * var(--mx-thread-t,0)); } .conv-thread-crisp-1{ stroke:#F97066; --mx-thread-len:800; } .conv-thread-crisp-2{ stroke:#F0B429; --mx-thread-len:755; } .conv-thread-crisp-3{ stroke:#60A5FA; --mx-thread-len:710; } .conv-thread-crisp-4{ stroke:#A78BFA; --mx-thread-len:735; } .conv-thread-crisp-5{ stroke:#34D399; --mx-thread-len:795; } .conv-thread-glow-1{ stroke:#F97066; } .conv-thread-glow-2{ stroke:#F0B429; } .conv-thread-glow-3{ stroke:#60A5FA; } .conv-thread-glow-4{ stroke:#A78BFA; } .conv-thread-glow-5{ stroke:#34D399; } .conv-marker-line{ stroke:var(--border); stroke-width:1; stroke-dasharray:4 6; } .conv-marker-dot{ fill:var(--text); opacity:calc(.3 + .7 * var(--mx-merged-t,0)); } .conv-marker-badge{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; opacity:calc(.3 + .7 * var(--mx-merged-t,0)); } .conv-marker-badge img{ height:128px; width:auto; display:block; } .conv-merged-crisp{ stroke:var(--amber); stroke-width:6; stroke-linecap:round; fill:none; stroke-dasharray:var(--mx-merged-len,750); stroke-dashoffset:calc(var(--mx-merged-len,750) * (1 - var(--mx-merged-t,0))); } .conv-merged-glow{ stroke:var(--amber); stroke-width:10; opacity:.15; fill:none; } .convergence-cue{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:var(--muted); line-height:0; animation:cue-bounce 1.6s ease-in-out infinite; opacity:var(--mx-cue-opacity,1); transition:opacity .3s; } @keyframes cue-bounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } } @media (max-width:760px){ .convergence-track{ height:auto; } .convergence-sticky{ position:static; height:auto; padding:64px 0; --mx-thread-t:1; --mx-merged-t:1; } .convergence-cue{ display:none; } } /* ---------- números (contadores animados) ---------- */ .counters{ padding:90px 0 40px; } .counters-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; } .counter-num{ display:block; font-family:var(--serif); font-style:italic; font-weight:900; font-size:clamp(32px,3.8vw,48px); line-height:1.15; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding:0 .08em .06em; font-variant-numeric:tabular-nums; text-wrap:balance; } .counter-label{ margin:12px auto 0; font-size:15px; color:var(--ink-soft); line-height:1.55; max-width:290px; } @media (max-width:767px){ .counters-grid{ grid-template-columns:1fr; gap:38px; } } /* ---------- CTA com URL + diagrama ---------- */ .cta-url{ overflow:hidden; } .cta-url .grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; } .cta-url p{ margin-top:18px; color:var(--ink-soft); max-width:480px; } .url-form{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-top:34px; } .url-form .field{ flex:1 1 260px; } .url-form label{ display:block; margin-bottom:2px; font:500 12px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); } .url-form input{ width:100%; padding:10px 2px; font:400 16px var(--font); color:var(--ink); background:transparent; border:none; border-bottom:2px solid rgba(139,131,119,.55); border-radius:0; transition:border-color .25s; } .url-form input:focus{ outline:none; border-bottom-color:var(--amber); } .diagram svg{ width:100%; height:auto; overflow:visible; } .diagram .link{ fill:none; stroke:url(#dg-line); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:6 9; animation:dash 2.4s linear infinite; } .diagram .node{ fill:#fff; stroke:var(--line); stroke-width:1.5; filter:drop-shadow(0 12px 22px rgba(90,60,10,.14)); } .diagram .node-t{ font:600 15px var(--font); fill:var(--ink); text-anchor:middle; } .diagram .hub{ fill:var(--bg); stroke:var(--amber); stroke-width:3; } .diagram .hub-t{ font:700 13px var(--font); fill:#fff; text-anchor:middle; } .diagram .pulse{ fill:none; stroke:var(--amber); stroke-width:2; opacity:.5; transform-origin:300px 200px; animation:pulse 3.2s ease-out infinite; } .diagram .pulse-2{ animation-delay:1.6s; } @keyframes dash{ to{ stroke-dashoffset:-30; } } @keyframes pulse{ from{ transform:scale(.7); opacity:.6; } to{ transform:scale(1.7); opacity:0; } } @media (max-width:991px){ .cta-url .grid{ grid-template-columns:1fr; gap:40px; } } @media (max-width:640px){ .diagram .node-t{ font-size:21px; } .diagram .hub-t{ font-size:14.5px; } } /* ---------- serviços ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .service{ position:relative; display:flex; flex-direction:column; padding:34px 26px 30px; border-radius:var(--radius-xl); border:1px solid transparent; transition:all .35s var(--ease); } .service:hover{ background:#fff; border-color:var(--line); box-shadow:var(--shadow-lift); transform:translateY(-6px); } .service .filerow{ display:flex; justify-content:space-between; margin-bottom:22px; font:500 12px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); } .service .filerow .num{ color:var(--amber-deep); } .icon-tile{ width:72px; height:72px; border-radius:26px; display:grid; place-items:center; margin-bottom:24px; background:var(--amber-soft); color:var(--amber-deep); transition:transform .4s var(--ease),background .3s; } .icon-tile svg{ width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .service:hover .icon-tile{ transform:rotate(-6deg) scale(1.06); background:rgba(232,163,61,.28); } .service h3{ font-size:19px; margin-bottom:8px; } .service .desc{ font-size:14.5px; color:var(--ink-soft); margin-bottom:16px; } .service ul{ padding-top:16px; border-top:1px dashed var(--line); } .service li{ position:relative; padding-left:24px; margin-bottom:9px; font-size:14px; line-height:1.55; } .service li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--amber-deep); font-weight:700; } @media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } } /* ---------- trabalhos: seção escura + carrossel ---------- */ .portfolio{ color:var(--text); background:linear-gradient(180deg,var(--bg),var(--surface)); overflow:hidden; isolation:isolate; padding-bottom:120px; } .portfolio .section-head p{ color:var(--text-soft); } .tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px; } .tab{ padding:9px 22px; border-radius:50px; border:1px solid rgba(255,255,255,.22); background:transparent; color:var(--text-soft); font:500 14px var(--font); cursor:pointer; transition:all .25s; } .tab:hover{ border-color:var(--amber); color:#fff; } .tab.active{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); font-weight:600; } .carousel{ position:relative; } .track{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 4px 26px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .track::-webkit-scrollbar{ display:none; } .card{ flex:0 0 calc((100% - 52px) / 3); scroll-snap-align:start; min-width:0; display:flex; flex-direction:column; background:#fff; color:var(--ink); border-radius:var(--radius-lg); padding:14px 14px 26px; box-shadow:0 24px 50px rgba(0,0,0,.4); transition:transform .4s var(--ease); } .card[hidden]{ display:none; } .card:hover{ transform:translateY(-6px); } .card .thumb{ position:relative; display:block; aspect-ratio:16/10; border-radius:20px; overflow:hidden; background:var(--mist); margin-bottom:20px; } .card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .card:hover .thumb img{ transform:scale(1.05); } .card .tag{ align-self:flex-start; margin:0 12px 10px; padding:2px 12px; border-radius:50px; background:var(--amber-soft); color:var(--amber-deep); font:600 12px var(--mono); letter-spacing:.04em; } .card h3{ margin:0 12px 8px; font-size:19px; color:var(--ink); } .card .card-md{ margin:0 12px; font-size:14.5px; color:var(--ink-soft); } .card .card-md p{ margin-bottom:8px; } .card .card-md strong{ color:var(--amber-deep); font-weight:700; } .card .status{ align-self:flex-start; margin:8px 12px 0; padding:3px 12px; border-radius:50px; background:var(--amber-soft); color:var(--amber-deep); font-size:12.5px; font-weight:700; } .card .card-cta{ margin:10px 12px 0; padding-top:10px; border-top:1px solid var(--line); font-size:13.5px; color:var(--ink-faint); } .card .more{ margin:auto 12px 0; padding-top:16px; font-size:14px; font-weight:600; color:var(--amber-deep); display:inline-flex; gap:6px; align-items:center; } .card .more:hover{ color:var(--ink); } .car-controls{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:14px; } .car-btn{ width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; transition:all .25s; } .car-btn:hover:not(:disabled){ background:var(--amber); border-color:var(--amber); color:var(--on-amber); } .car-btn:disabled{ opacity:.3; cursor:default; } .car-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .car-dots{ display:flex; gap:8px; } .car-dot{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.28); cursor:pointer; padding:0; transition:all .25s; } .car-dot.is-on{ width:26px; border-radius:6px; background:var(--amber); } .portfolio-empty{ text-align:center; color:var(--text-soft); padding:20px 0; } .carousel.is-static .car-controls{ display:none; } @media (max-width:991px){ .card{ flex-basis:calc((100% - 26px) / 2); } } @media (max-width:640px){ .card{ flex-basis:88%; } } /* ---------- sobre ---------- */ .about{ background:var(--mist); } .about-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px; align-items:start; } .about h2{ font-size:clamp(26px,3vw,36px); margin-bottom:22px; } .about p{ margin-bottom:16px; color:var(--ink-soft); } .about strong{ color:var(--ink); font-weight:600; background:linear-gradient(transparent 62%,rgba(232,163,61,.38) 62%); } .skills{ display:flex; flex-wrap:wrap; gap:10px; } .skill{ padding:8px 18px; border-radius:50px; background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:500; transition:all .25s; } .skill:hover{ border-color:var(--amber); color:var(--amber-deep); transform:translateY(-2px); box-shadow:0 8px 18px rgba(90,60,10,.1); } @media (max-width:991px){ .about-grid{ grid-template-columns:minmax(0,1fr); gap:44px; } } .about-grid > *{ min-width:0; } .about p,.about h2{ overflow-wrap:anywhere; } /* ---------- contato ---------- */ .contact{ color:var(--text); background:linear-gradient(160deg,var(--surface) 0%,var(--bg) 60%); overflow:hidden; isolation:isolate; } .contact-glow{ position:absolute; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(50% 60% at 85% 20%,rgba(232,163,61,.14),transparent 70%),radial-gradient(40% 50% at 5% 90%,rgba(94,68,30,.28),transparent 70%); } .contact .section-head p{ color:var(--text-soft); } .contact-cta-line{ text-align:center; margin-bottom:38px; font-size:18px; color:var(--text-soft); } .contact-cta-line strong{ color:var(--amber); font-weight:600; } .contact-alert{ max-width:820px; margin:0 auto 28px; padding:16px 24px; border-radius:20px; font-size:15px; } .contact-alert-ok{ background:rgba(232,163,61,.14); border:1px solid rgba(232,163,61,.55); color:var(--amber-hi); } .contact-alert-error{ background:rgba(255,99,99,.12); border:1px solid rgba(255,120,120,.55); color:#ffc2c2; } .contact-alert-error ul{ padding-left:20px; list-style:disc; } .contact-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:64px; align-items:center; } .contact-logo{ display:flex; align-items:center; justify-content:center; } .contact-logo img{ width:100%; max-width:420px; height:auto; opacity:.92; } .cform{ position:relative; } .cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 36px; } .cform-field{ position:relative; margin-bottom:32px; } .cform-field input,.cform-field textarea,.cform-field select{ width:100%; padding:22px 2px 8px; font:400 16px var(--font); color:#fff; background:transparent; border:none; border-bottom:2px solid rgba(242,236,228,.28); border-radius:0; transition:border-color .25s; -webkit-appearance:none; appearance:none; } .cform-field textarea{ resize:vertical; min-height:120px; line-height:1.6; } .cform-field select{ cursor:pointer; padding:28px 28px 8px 2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23C9BFB2' stroke-width='2'%3E%3Cpath d='m1 1 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center; } .cform-field select option{ color:var(--ink); } .cform-field input:focus,.cform-field textarea:focus,.cform-field select:focus{ outline:none; border-bottom-color:var(--amber); } .cform-field label{ position:absolute; left:2px; top:22px; font-size:16px; color:var(--muted); pointer-events:none; transform-origin:left top; transition:transform .25s var(--ease),color .25s; } .cform-field input:focus + label,.cform-field textarea:focus + label, .cform-field input:not(:placeholder-shown) + label,.cform-field textarea:not(:placeholder-shown) + label, .cform-field.is-select label{ transform:translateY(-20px) scale(.78); color:var(--amber); } .cform .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .cform .submit{ margin-top:6px; } @media (max-width:991px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } .contact-logo{ order:-1; } .contact-logo img{ max-width:260px; } } @media (max-width:640px){ .cform-row{ grid-template-columns:1fr; } } /* ---------- footer ---------- */ .site-footer{ background:#0E0C09; color:var(--muted); padding:44px 0; font-size:14px; } .site-footer .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; } .site-footer .logo-ink{ display:none; } .site-footer .logo-light{ display:block; } .site-footer .brand img{ height:64px; } .footer-nav{ display:flex; flex-wrap:wrap; gap:6px 22px; } .footer-nav a{ color:var(--text-soft); transition:color .2s; } .footer-nav a:hover{ color:var(--amber); } .footer-copy{ width:100%; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; } /* ---------- case (claro) ---------- */ .case-hero{ position:relative; padding:56px 0 30px; background:linear-gradient(180deg,var(--mist),#fff); } .case-back{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .2s; } .case-back:hover{ color:var(--amber-deep); } .case-back .arrow{ display:inline-block; transition:transform .2s; } .case-back:hover .arrow{ transform:translateX(-4px); } .case-hero .tag{ display:inline-block; margin-top:26px; padding:3px 14px; border-radius:50px; background:var(--amber-soft); color:var(--amber-deep); font:600 12.5px var(--mono); letter-spacing:.05em; } .case-hero h1{ margin-top:14px; font-size:clamp(32px,4.4vw,52px); max-width:860px; } .case-hero .lede{ margin-top:18px; max-width:700px; font-size:18px; color:var(--ink-soft); } .case-meta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .case-meta .item{ padding:14px 24px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; } .case-meta .label{ font:500 11.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .case-meta .value{ font-size:16px; font-weight:600; } .case-meta .item-result .value{ color:var(--amber-deep); font-size:18px; } .case-cover{ position:relative; aspect-ratio:16/9; margin-top:44px; border-radius:var(--radius-xl); overflow:hidden; background:var(--mist); box-shadow:var(--shadow-lift); } .case-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .case-page-body{ padding:70px 0 40px; } .case-body{ max-width:780px; margin:0 auto; display:grid; gap:26px; } .case-section{ padding:38px 40px; border-radius:var(--radius-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card); } .case-section .eyebrow{ margin-bottom:10px; } .case-section h2{ font-size:26px; margin-bottom:14px; } .case-section p{ margin-bottom:14px; color:var(--ink-soft); } .case-section ul{ margin:10px 0 4px; } .case-section li{ position:relative; padding-left:28px; margin-bottom:10px; color:var(--ink-soft); } .case-section li::before{ content:'✓'; position:absolute; left:0; top:0; color:var(--amber-deep); font-weight:700; } .case-section-result{ background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--amber),var(--copper)) border-box; border:2px solid transparent; } .case-section-result strong{ color:var(--amber-deep); font-weight:700; } .case-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; } .case-gallery .thumb{ position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden; background:var(--mist); } .case-gallery .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .case-cover img,.case-gallery .thumb img{ cursor:zoom-in; } .case-cover::after,.case-gallery .thumb::after{ content:'⤢'; position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(20,17,13,.7); color:#fff; display:grid; place-items:center; font-size:15px; opacity:0; pointer-events:none; transition:opacity .2s; } .case-cover:hover::after,.case-gallery .thumb:hover::after{ opacity:1; } .case-cta{ max-width:780px; margin:32px auto 0; padding:36px 40px; border-radius:var(--radius-xl); color:var(--text); background:linear-gradient(160deg,var(--surface),var(--bg)); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; } .case-cta p{ font-size:17px; max-width:420px; color:var(--text-soft); } .case-nav{ max-width:780px; margin:0 auto; padding:34px 0 20px; } .case-nav a{ display:inline-flex; gap:8px; font-weight:500; font-size:15px; color:var(--ink-soft); transition:color .2s; } .case-nav a:hover{ color:var(--amber-deep); } @media (max-width:640px){ .case-section{ padding:28px 22px; } .case-gallery{ grid-template-columns:1fr; } .case-cta{ padding:28px 24px; flex-direction:column; align-items:flex-start; } } /* 404 */ .not-found{ padding:130px 0; text-align:center; } .not-found .big{ display:inline-block; font-family:var(--serif); font-style:italic; font-weight:900; font-size:clamp(90px,16vw,170px); line-height:1.05; } /* lightbox */ dialog.lightbox{ border:none; padding:0; background:transparent; max-width:min(92vw,1100px); max-height:92vh; margin:auto; } dialog.lightbox::backdrop{ background:rgba(20,17,13,.9); backdrop-filter:blur(3px); } dialog.lightbox .lightbox-img{ display:block; width:100%; height:auto; max-height:92vh; object-fit:contain; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.5); } dialog.lightbox .lightbox-close{ position:fixed; top:20px; right:20px; width:44px; height:44px; border-radius:50%; border:none; background:#fff; color:var(--ink); font-size:18px; cursor:pointer; display:grid; place-items:center; transition:background .2s,color .2s; } dialog.lightbox .lightbox-close:hover{ background:var(--amber); color:var(--on-amber); } body.lightbox-open{ overflow:hidden; } /* ---------- banner de cookies (LGPD) ---------- */ .cc{ position:fixed; z-index:300; left:16px; right:16px; bottom:16px; display:flex; justify-content:center; pointer-events:none; } .cc[hidden]{ display:none; } .cc-inner{ pointer-events:auto; width:100%; max-width:880px; padding:24px 26px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(232,163,61,.18); font:400 14.5px/1.6 var(--font); animation:cc-in .4s var(--ease) both; } .cc .cc-title{ margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:#fff; } /* .cc: vence .page-light h2 */ .cc-text{ margin:0; color:var(--text-soft); } .cc-text strong{ color:#fff; font-weight:600; } .cc-text a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; } .cc-prefs{ margin-top:16px; border-top:1px solid var(--border); } .cc-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 0; border-bottom:1px solid var(--border); } .cc-row strong{ display:block; color:#fff; font-weight:600; font-size:14.5px; } .cc-row span{ display:block; color:var(--text-soft); font-size:13px; line-height:1.5; } .cc-switch{ position:relative; flex:none; width:46px; height:26px; } .cc-switch input{ position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .cc-switch i{ position:absolute; inset:0; border-radius:26px; background:#4a3f31; transition:background .2s; } .cc-switch i::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); } .cc-switch input:checked + i{ background:var(--amber); } .cc-switch input:checked + i::after{ transform:translateX(20px); } .cc-switch input:disabled{ cursor:not-allowed; } .cc-switch input:disabled + i{ opacity:.55; } .cc-switch input:focus-visible + i{ outline:3px solid var(--amber); outline-offset:3px; } .cc-actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:18px; } .cc-btn{ padding:12px 22px; border:2px solid transparent; border-radius:50px; font:600 14px/1.2 var(--font); cursor:pointer; transition:background .2s,border-color .2s,color .2s; } .cc-btn-fill{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); } /* aceitar */ .cc-btn-fill:hover{ background:var(--amber-hi); border-color:var(--amber-hi); } .cc-btn-alt{ background:var(--text); border-color:var(--text); color:var(--bg); } /* recusar: mesmo peso visual */ .cc-btn-alt:hover{ background:#fff; border-color:#fff; } .cc-btn-line{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; } .cc-btn-line:hover{ border-color:var(--amber); color:var(--amber); } .cc-hide{ display:none; } @keyframes cc-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @media (max-width:640px){ .cc{ left:8px; right:8px; bottom:8px; } .cc-inner{ max-height:calc(100vh - 16px); overflow-y:auto; padding:20px 18px; } .cc-actions{ flex-direction:column; } .cc-btn{ width:100%; padding:14px 20px; } } @media print{ .cc{ display:none; } } /* botão "Gerenciar cookies" no rodapé */ .footer-nav button{ padding:0; border:0; background:none; color:var(--text-soft); font:inherit; cursor:pointer; transition:color .2s; } .footer-nav button:hover{ color:var(--amber); } /* nota de privacidade no formulário de contato */ .cform-note{ margin-top:18px; max-width:520px; font-size:13px; line-height:1.6; color:var(--muted); } .cform-note a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; } /* ---------- Instagram ---------- */ .nav-social{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-left:6px; border-radius:50%; color:var(--ink); transition:color .2s,background .2s,transform .25s var(--ease); } .nav-social svg,.footer-social svg,.social-pill svg{ flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .nav-social svg{ width:22px; height:22px; } .nav-social:hover{ color:var(--amber-deep); background:var(--amber-soft); transform:translateY(-2px); } .nav-social-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* só ícone no desktop */ .page-dark .nav-social{ color:var(--text-soft); } .page-dark .nav-social:hover{ color:var(--amber); background:rgba(232,163,61,.14); } @media (max-width:991px){ .nav-social{ width:auto; height:auto; margin:0; padding:14px 4px; justify-content:flex-start; gap:10px; border-radius:0; border-bottom:1px solid var(--line); font-size:16px; } .page-dark .nav-social{ border-bottom-color:var(--border); } .nav-social:hover{ background:none; transform:none; } .nav-social-label{ position:static; width:auto; height:auto; clip:auto; overflow:visible; } } .footer-nav .footer-social{ display:inline-flex; align-items:center; gap:7px; } .footer-social svg{ width:17px; height:17px; } .contact-logo{ flex-direction:column; gap:30px; } .social-pill{ display:inline-flex; align-items:center; gap:14px; padding:14px 26px 14px 18px; border-radius:50px; color:#fff; border:1px solid rgba(232,163,61,.45); background:rgba(232,163,61,.08); font-weight:600; font-size:16px; line-height:1.25; transition:background .25s,border-color .25s,transform .3s var(--ease); } .social-pill svg{ width:30px; height:30px; color:var(--amber); } .social-pill small{ display:block; font-size:12px; font-weight:400; color:var(--text-soft); } .social-pill:hover{ background:rgba(232,163,61,.18); border-color:var(--amber); transform:translateY(-3px); } /* ---------- página de política de privacidade ---------- */ .legal-hero{ padding:56px 0 34px; background:linear-gradient(180deg,var(--mist),#fff); } .legal-hero h1{ margin-top:14px; font-size:clamp(30px,4vw,46px); } .legal-hero .updated{ margin-top:14px; font:500 12.5px var(--mono); letter-spacing:.06em; color:var(--ink-soft); } .legal-body{ padding:34px 0 90px; } .legal{ max-width:800px; margin:0 auto; } .legal h2{ margin:44px 0 12px; font-size:24px; } .legal h3{ margin:24px 0 8px; font-size:18px; } .legal p,.legal li{ color:var(--ink-soft); } .legal p{ margin-bottom:14px; } .legal ul{ margin:0 0 16px; padding-left:22px; list-style:disc; } .legal li{ margin-bottom:6px; } .legal a{ color:var(--amber-deep); text-decoration:underline; text-underline-offset:3px; } .legal strong{ color:var(--ink); font-weight:600; } .legal .toc{ margin:26px 0 0; padding:20px 26px; background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-lg); } .legal .toc ol{ margin:8px 0 0; padding-left:20px; columns:2; column-gap:32px; } .legal .toc a{ text-decoration:none; } .legal .table-wrap{ overflow-x:auto; margin:8px 0 20px; border:1px solid var(--line); border-radius:16px; } .legal table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; } .legal th,.legal td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .legal th{ background:var(--mist); font:600 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .legal tr:last-child td{ border-bottom:none; } .legal .manage{ margin:6px 0 0; } @media (max-width:640px){ .legal .toc ol{ columns:1; } } /* ---------- compatibilidade: /parcerias/* (tokens acima + peças do main.css legado) ---------- */ .page-dark .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:10px; font-size:16px; font-weight:600; font-family:var(--font); box-shadow:0 2px 10px -2px rgba(0,0,0,.4),inset 0 1px .5px .5px rgba(255,255,255,.12); } .page-dark .btn-primary{ background:var(--accent); color:var(--accent-ink); } .page-dark .btn-primary:hover{ background:#F2B85C; } .page-dark .contact-alert{ margin-top:28px; padding:13px 18px; border-radius:8px; font-size:15px; max-width:none; } .page-dark .contact-alert-ok{ background:rgba(232,163,61,.12); border:1px solid var(--accent-dim); color:var(--accent); } .page-dark .contact-alert-error{ background:rgba(194,69,69,.1); border:1px solid #5E2A2A; color:#F0A5A5; } .page-dark .contact-alert-error ul{ padding-left:18px; } .page-dark .contact-form{ max-width:640px; } .page-dark .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } .page-dark .cf-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; } .page-dark .cf-row .cf-field{ margin-bottom:0; } .page-dark .cf-field label{ font-size:14px; font-weight:500; color:var(--text-soft); } .page-dark .cf-field input,.page-dark .cf-field textarea,.page-dark .cf-field select{ width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:13px 15px; font-family:var(--font); font-size:17px; -webkit-appearance:none; appearance:none; transition:border-color .15s,box-shadow .15s; } .page-dark .cf-field input::placeholder,.page-dark .cf-field textarea::placeholder{ color:var(--muted); } .page-dark .cf-field input:hover,.page-dark .cf-field textarea:hover,.page-dark .cf-field select:hover{ border-color:var(--muted); } .page-dark .cf-field input:focus,.page-dark .cf-field textarea:focus,.page-dark .cf-field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,163,61,.18); } .page-dark .cf-field select{ cursor:pointer; } .page-dark .cf-field textarea{ resize:vertical; line-height:1.5; } .page-dark .contact-form .cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .page-dark .contact-form button[type=submit]{ margin-top:4px; } @media (max-width:640px){ .page-dark .cf-row{ grid-template-columns:1fr; } } /* ---------- responsivo geral ---------- */ @media (max-width:767px){ .decor .shape-ring{ display:none; } .section{ padding:80px 0; } .section-head{ margin-bottom:40px; } .hero .ctas .button{ flex:1 1 100%; } } /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js [data-reveal]{ opacity:1; transform:none; } .decor-shape{ transform:rotate(var(--rot,0deg)); } .brands-scroll{ animation:none; } .hero-lines{ --mx-line-t:1; } .hero-line,.hero-line-glow{ transform:none; } .convergence-track{ height:auto; } .convergence-sticky{ position:static; height:auto; padding:64px 0; --mx-thread-t:1; --mx-merged-t:1; } .convergence-cue{ display:none; } }