/* ══════════════════════════════════════════════════════════════════════════ JEOR CENOGRAFIA — folha de estilo única Ordem: 1 tokens · 2 base · 3 utilitários · 4 header · 5 hero · 6 seções 7 componentes · 8 footer/flutuantes · 9 animações · 10 responsivo ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ───────────────────────────────────────────────────────────── Para trocar a paleta, mude só estas variáveis. */ :root{ --black:#0A0A0A; /* fundo principal / textos */ --black-2:#1A1A1A; /* variação do preto */ --black-3:#242424; /* bordas sobre fundo escuro */ --white:#FFFFFF; --grey:#F4F4F4; /* seções alternadas claras */ --grey-2:#E3E3E3; /* bordas sobre fundo claro */ --ink-soft:#A8A8A8; /* texto secundário sobre preto */ --ink-soft-d:#5A5A5A; /* texto secundário sobre claro */ --y:#FFCA0A; /* destaque */ --y-d:#E0B209; /* hover do destaque */ --f-d:'Poppins',system-ui,-apple-system,sans-serif; --f-m:'JetBrains Mono',ui-monospace,monospace; --wrap:1280px; --pad:clamp(20px,5vw,64px); --sec-y:clamp(72px,10vw,140px); --r:4px; /* raio padrão — marca é geométrica */ --r-lg:14px; --ease:cubic-bezier(.22,.61,.36,1); --hdr-h:78px; } /* ── 2. BASE ───────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);-webkit-text-size-adjust:100%} body{ font-family:var(--f-d);font-weight:400;font-size:clamp(15px,1.05vw,17px); line-height:1.65;color:var(--white);background:var(--black); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} h1,h2,h3{font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance} p{text-wrap:pretty} ::selection{background:var(--y);color:var(--black)} :focus-visible{outline:3px solid var(--y);outline-offset:3px;border-radius:2px} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--y);color:var(--black); padding:14px 22px;font-weight:700} .skip:focus{left:12px;top:12px} /* ── 3. UTILITÁRIOS ────────────────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .wrap--narrow{max-width:900px} .y{color:var(--y)} .w{color:var(--white)} /* Botões */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:13px 24px;border-radius:var(--r);font-weight:700;font-size:.94rem; letter-spacing:-.01em;white-space:nowrap;position:relative; transition:transform .18s var(--ease),background-color .18s,color .18s,box-shadow .18s; } .btn--y{background:var(--y);color:var(--black);box-shadow:0 0 0 0 rgba(255,202,10,.5)} .btn--y:hover{background:var(--y-d);transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(255,202,10,.75)} .btn--ghost{border:2px solid rgba(255,255,255,.28);color:var(--white)} .btn--ghost:hover{border-color:var(--y);color:var(--y);transform:translateY(-2px)} .btn--lg{padding:17px 34px;font-size:1.02rem} .btn--full{width:100%} .btn:active{transform:translateY(0) scale(.985)} /* Rótulos técnicos em mono */ .eyebrow,.snum{ font-family:var(--f-m);font-weight:700;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--y);display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .eyebrow i,.snum i{font-style:normal;opacity:.45} .snum--dark{color:var(--black)} /* ── 4. HEADER ─────────────────────────────────────────────────────────── */ .hdr{ position:fixed;inset:0 0 auto;z-index:100; background:rgba(10,10,10,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s; } .hdr.is-stuck{background:rgba(10,10,10,.94);border-bottom-color:var(--black-3)} .hdr__in{ max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad); height:var(--hdr-h);display:flex;align-items:center;gap:22px; } .hdr__bar{height:2px;width:0;background:var(--y);transition:width .1s linear} .logo{display:flex;align-items:center;gap:12px;margin-right:auto;flex-shrink:0} .logo__mark{border-radius:9px;transition:transform .35s var(--ease)} .logo:hover .logo__mark{transform:rotate(-6deg) scale(1.06)} .logo__txt{display:flex;flex-direction:column;line-height:1} .logo__name{font-weight:700;font-size:1.42rem;letter-spacing:-.045em} .logo__name i{font-style:normal;color:var(--y)} .logo__sub{font-family:var(--f-m);font-weight:500;font-size:.56rem;letter-spacing:.32em; text-transform:uppercase;color:var(--ink-soft);margin-top:4px} .nav{display:flex;align-items:center;gap:6px} .nav>a:not(.btn){ padding:9px 13px;font-size:.9rem;font-weight:500;color:#D6D6D6;border-radius:var(--r); position:relative;transition:color .2s; } .nav>a:not(.btn)::after{ content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--y); transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease); } .nav>a:not(.btn):hover,.nav>a.is-active{color:var(--white)} .nav>a:not(.btn):hover::after,.nav>a.is-active::after{transform:scaleX(1)} .nav__cta{display:none} .hdr__cta{margin-left:8px} .burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center; align-items:center;gap:6px;border-radius:var(--r)} .burger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ── 5. HERO ───────────────────────────────────────────────────────────── */ .hero{ position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column; justify-content:flex-end;padding-top:calc(var(--hdr-h) + 60px);overflow:hidden; background: radial-gradient(120% 80% at 78% 8%,rgba(255,202,10,.14),transparent 58%), var(--black); } /* malha técnica de fundo */ .hero__grid{ position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:76px 76px; -webkit-mask-image:radial-gradient(90% 70% at 40% 30%,#000 30%,transparent 100%); mask-image:radial-gradient(90% 70% at 40% 30%,#000 30%,transparent 100%); } .hero__in{position:relative;padding-bottom:clamp(56px,8vw,104px)} .hero__h{font-size:clamp(2.7rem,8.4vw,7.2rem);letter-spacing:-.045em;margin:22px 0 0} .hero__h2{color:var(--y)} .hero__h2 .y{color:var(--white)} .hero__p{max-width:56ch;margin-top:26px;font-size:clamp(1rem,1.35vw,1.18rem);color:#C9C9C9} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} /* faixa animada */ .ticker{position:relative;border-block:1px solid var(--black-3);background:var(--black-2);overflow:hidden;padding:16px 0} .ticker__track{display:flex;align-items:center;gap:26px;width:max-content;animation:slide 42s linear infinite} .ticker span{font-family:var(--f-m);font-weight:500;font-size:.78rem;letter-spacing:.2em; text-transform:uppercase;color:#8E8E8E;white-space:nowrap} .ticker i{width:7px;height:7px;background:var(--y);flex-shrink:0;transform:rotate(45deg)} @keyframes slide{to{transform:translateX(-50%)}} /* ── 6. SEÇÕES ─────────────────────────────────────────────────────────── */ .sec{padding-block:var(--sec-y);position:relative} .sec--dark{background:var(--black)} .sec--light{background:var(--grey);color:var(--black)} .sec--y{background:var(--y);color:var(--black)} .shead{max-width:900px;margin-bottom:clamp(42px,5vw,72px)} .shead--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none} .shead__note{font-family:var(--f-m);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-soft-d);white-space:nowrap} .sh{font-size:clamp(1.85rem,4.2vw,3.4rem);margin-top:16px} .sh--dark{color:var(--black)} .sec--light .sh{color:var(--black)} /* ── 7. COMPONENTES ────────────────────────────────────────────────────── */ /* 7.1 Diferenciais — grid assimétrico (o 1º card ocupa duas colunas) */ .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--black-3); border:1px solid var(--black-3);border-radius:var(--r-lg);overflow:hidden} .feat{background:var(--black);padding:clamp(26px,3vw,42px);position:relative;transition:background-color .3s} .feat--wide{grid-column:span 2} .feat:hover{background:var(--black-2)} .feat__n{font-family:var(--f-m);font-weight:700;font-size:.74rem;letter-spacing:.2em;color:var(--y)} .feat h3{font-size:clamp(1.15rem,1.8vw,1.55rem);margin:18px 0 12px} .feat p{color:var(--ink-soft);font-size:.97rem} .feat--y{background:var(--y);color:var(--black)} .feat--y:hover{background:var(--y-d)} .feat--y .feat__n{color:var(--black);opacity:.6} .feat--y p{color:#2E2609} /* 7.2 Serviços — lista zigue-zague com numeral gigante */ .svcs{list-style:none;display:grid;gap:2px;background:var(--grey-2); border-block:1px solid var(--grey-2)} .svc{background:var(--grey);display:grid;grid-template-columns:minmax(120px,.22fr) 1fr; gap:clamp(20px,4vw,60px);padding:clamp(28px,4vw,52px) 0;transition:background-color .3s} .svc:hover{background:var(--white)} .svc__n{font-family:var(--f-m);font-weight:700;font-size:clamp(2.4rem,5vw,4.2rem); line-height:.9;color:var(--grey-2);transition:color .3s} .svc:hover .svc__n{color:var(--y)} .svc__c{max-width:72ch} .svc h3{font-size:clamp(1.35rem,2.6vw,2.1rem);color:var(--black)} .svc p{margin-top:14px;color:#454545} .tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .tags li{font-family:var(--f-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; padding:7px 12px;border:1px solid var(--grey-2);border-radius:100px;color:#5A5A5A;background:var(--white)} /* 7.3 Sobre */ .sobre__in{display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,80px);align-items:center} .sobre__txt p{color:var(--ink-soft);margin-top:20px;max-width:58ch} .vals{margin-top:38px;display:grid;gap:2px;background:var(--black-3);border:1px solid var(--black-3);border-radius:var(--r-lg);overflow:hidden} .vals>div{background:var(--black);padding:20px 24px;display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:baseline} .vals dt{font-family:var(--f-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--y)} .vals dd{color:#D0D0D0;font-size:.96rem} .sobre__fig{border:1px solid var(--black-3);border-radius:var(--r-lg);overflow:hidden;background:var(--black-2)} .sobre__fig img{width:100%} .sobre__fig figcaption{font-family:var(--f-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);padding:16px 20px;border-top:1px solid var(--black-3)} /* 7.4 Portfólio — grid editorial com tiles de tamanhos diferentes */ .port{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)} /* tesselação: 1 destaque 4x2 · 2 verticais 2x1 · 2 médios 3x1 · 1 horizontal 6x1 */ .port__i{grid-column:span 2} .port__i--big{grid-column:span 4;grid-row:span 2} .port__i--half{grid-column:span 3} .port__i--wide{grid-column:span 6} .port__i--wide .port__btn{display:grid;grid-template-columns:1.15fr 1fr;align-items:center} .port__i--wide .port__btn img{height:100%;aspect-ratio:16/9} .port__btn{display:block;width:100%;text-align:left;background:var(--white);border-radius:var(--r-lg); overflow:hidden;border:1px solid var(--grey-2);height:100%; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s} .port__btn:hover{transform:translateY(-6px);border-color:var(--black); box-shadow:0 24px 48px -24px rgba(10,10,10,.42)} .port__btn img{width:100%;aspect-ratio:10/7;object-fit:cover;transition:transform .55s var(--ease)} .port__i--big .port__btn img{aspect-ratio:auto;height:auto} .port__btn:hover img{transform:scale(1.035)} .port__btn figcaption{padding:clamp(18px,2vw,28px)} .port__cli{font-family:var(--f-m);font-weight:700;font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--ink-soft-d)} .port__btn h3{font-size:clamp(1.05rem,1.7vw,1.5rem);color:var(--black);margin:10px 0 10px} .port__btn p{color:#565656;font-size:.93rem} .port__i:not(.port__i--big):not(.port__i--wide):not(.port__i--half) .port__btn p{font-size:.88rem} /* 7.5 Depoimentos — carrossel com scroll-snap */ .carr{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:12px;scrollbar-width:none} .carr::-webkit-scrollbar{display:none} .dep{flex:0 0 clamp(280px,34vw,420px);scroll-snap-align:start;background:var(--black-2); border:1px solid var(--black-3);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px); display:flex;flex-direction:column;justify-content:space-between;gap:28px;transition:border-color .3s} .dep:hover{border-color:#3B3B3B} .dep p{font-size:clamp(1rem,1.35vw,1.16rem);color:#E4E4E4;font-weight:500;line-height:1.5} .dep footer{display:flex;align-items:center;gap:14px} .dep__av{width:46px;height:46px;border-radius:50%;background:var(--y);color:var(--black); display:grid;place-items:center;font-family:var(--f-m);font-weight:700;font-size:.82rem;flex-shrink:0} .dep footer b{display:block;font-size:.95rem;font-weight:600} .dep footer i{display:block;font-style:normal;font-family:var(--f-m);font-size:.68rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px} .carr__ctl{display:flex;gap:10px} .carr__b{width:48px;height:48px;border:2px solid var(--black-3);border-radius:var(--r); display:grid;place-items:center;color:var(--white);transition:.22s var(--ease)} .carr__b svg{width:20px;height:20px} .carr__b:hover{background:var(--y);border-color:var(--y);color:var(--black)} /* 7.6 Processo (faixa amarela) */ .steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px; background:rgba(10,10,10,.16);border:1px solid rgba(10,10,10,.16);border-radius:var(--r-lg);overflow:hidden} .steps li{background:var(--y);padding:clamp(24px,2.6vw,36px);transition:background-color .3s} .steps li:hover{background:#FFD53D} .steps span{font-family:var(--f-m);font-weight:700;font-size:.74rem;letter-spacing:.2em;opacity:.55} .steps h3{font-size:clamp(1.1rem,1.7vw,1.45rem);color:var(--black);margin:16px 0 10px} .steps p{color:#332A06;font-size:.94rem} /* 7.7 FAQ (acordeão) */ .faq{border-top:1px solid var(--grey-2)} .faq__i{border-bottom:1px solid var(--grey-2)} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px; padding:26px 0;text-align:left;font-weight:700;font-size:clamp(1rem,1.6vw,1.25rem); letter-spacing:-.02em;color:var(--black);transition:color .2s} .faq__q:hover{color:#3D3200} .faq__ic{position:relative;width:20px;height:20px;flex-shrink:0} .faq__ic::before,.faq__ic::after{content:"";position:absolute;inset:0;margin:auto;background:var(--y); border-radius:2px;transition:transform .3s var(--ease)} .faq__ic::before{width:20px;height:3px} .faq__ic::after{width:3px;height:20px} .faq__q[aria-expanded="true"] .faq__ic::after{transform:rotate(90deg) scaleX(0)} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)} .faq__q[aria-expanded="true"]+.faq__a{grid-template-rows:1fr} .faq__a>div{overflow:hidden} .faq__a p{color:#4C4C4C;padding-bottom:26px;max-width:70ch} /* 7.8 CTA final + formulário */ .cta{overflow:hidden} .stripe{ position:absolute;inset:0 0 auto;height:14px; background:repeating-linear-gradient(-45deg,var(--y) 0 18px,var(--black) 18px 36px); } .cta__in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,80px);align-items:start;padding-top:22px} .cta__l>p{color:var(--ink-soft);margin-top:-24px;max-width:46ch} .cta__links{list-style:none;margin-top:32px;display:grid;gap:2px; background:var(--black-3);border:1px solid var(--black-3);border-radius:var(--r-lg);overflow:hidden} .cta__links a{display:block;background:var(--black);padding:18px 22px;font-weight:600; transition:background-color .25s,color .25s,padding-left .25s} .cta__links a:hover{background:var(--y);color:var(--black);padding-left:30px} .form{background:var(--black-2);border:1px solid var(--black-3);border-radius:var(--r-lg); padding:clamp(24px,3vw,40px);display:grid;gap:18px} .f__row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .f{display:grid;gap:8px} .f label{font-family:var(--f-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} .f input,.f select,.f textarea{ width:100%;background:var(--black);border:1px solid #303030;border-radius:var(--r); padding:14px 16px;font-size:.95rem;color:var(--white);transition:border-color .2s,background-color .2s; } .f textarea{resize:vertical;min-height:112px} .f input::placeholder,.f textarea::placeholder{color:#616161} .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--y);outline:none;background:#111} .f input:user-invalid{border-color:#8A5A00} .f select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFCA0A' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px} .hp{position:absolute;left:-9999px} .form__note{font-size:.78rem;color:#6E6E6E;text-align:center} .form__msg{font-size:.9rem;font-weight:600;text-align:center;display:none} .form__msg.is-ok{display:block;color:var(--y)} .form__msg.is-err{display:block;color:#FF8A8A} .form.is-sending .btn--y{opacity:.6;pointer-events:none} /* ── 8. FOOTER + FLUTUANTES ────────────────────────────────────────────── */ .ft{background:var(--black-2);border-top:1px solid var(--black-3);padding-top:clamp(52px,6vw,80px)} .ft__in{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:clamp(32px,4vw,60px);padding-bottom:52px} .ft__brand p{color:var(--ink-soft);margin-top:20px;max-width:34ch;font-size:.94rem} .ft h2{font-family:var(--f-m);font-weight:700;font-size:.7rem;letter-spacing:.22em; text-transform:uppercase;color:var(--y);margin-bottom:18px} .ft__nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .ft__nav a,.ft__contact a{color:#C4C4C4;font-size:.94rem;transition:color .2s} .ft__nav a:hover,.ft__contact a:hover{color:var(--y)} .ft__contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .ft__contact p{color:#6B6B6B;font-size:.82rem;margin-top:8px} .ft__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-block:24px;border-top:1px solid var(--black-3);font-size:.82rem;color:#6B6B6B} .ft__made{font-family:var(--f-m);letter-spacing:.06em} .wa{ position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:90; width:58px;height:58px;border-radius:50%;background:var(--y);color:var(--black); display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(255,202,10,.55); transition:transform .25s var(--ease),background-color .25s; } .wa:hover{transform:scale(1.09) rotate(-6deg);background:var(--white)} .wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--y); animation:pulse 2.6s ease-out infinite} @keyframes pulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.55);opacity:0}} /* Lightbox */ .lb{position:fixed;inset:0;z-index:150;background:rgba(10,10,10,.93); backdrop-filter:blur(6px);display:grid;place-items:center;padding:clamp(16px,4vw,56px); animation:fade .25s var(--ease)} .lb[hidden]{display:none} .lb figure{max-width:1100px;width:100%} .lb img{width:100%;border-radius:var(--r-lg);border:1px solid var(--black-3)} .lb figcaption{font-family:var(--f-m);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--y);margin-top:18px;text-align:center} .lb__x{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px); width:52px;height:52px;font-size:2rem;line-height:1;color:var(--white);border-radius:var(--r); border:2px solid var(--black-3);transition:.2s} .lb__x:hover{background:var(--y);color:var(--black);border-color:var(--y)} @keyframes fade{from{opacity:0}to{opacity:1}} /* ── 9. ANIMAÇÕES DE ENTRADA ───────────────────────────────────────────── */ /* só esconde se o JS estiver ativo (ver