{"id":52,"date":"2026-06-09T12:27:09","date_gmt":"2026-06-09T12:27:09","guid":{"rendered":"https:\/\/agenciakroma.com.br\/?page_id=52"},"modified":"2026-06-12T19:44:33","modified_gmt":"2026-06-12T19:44:33","slug":"home","status":"publish","type":"page","link":"https:\/\/agenciakroma.com.br\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"52\" class=\"elementor elementor-52\" data-elementor-settings=\"{&quot;scroll_snap&quot;:&quot;yes&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9dac7f e-con-full e-flex e-con e-parent\" data-id=\"e9dac7f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a64430 elementor-widget elementor-widget-html\" data-id=\"7a64430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>KROMA Studio \u2014 Design que Move Neg\u00f3cios<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n:root{\r\n  --navy:#1a1f5e;--navy-d:#10143d;--off:#F9FAFB;--white:#fff;\r\n  --g100:#F3F4F6;--g200:#E5E7EB;--g400:#9CA3AF;--g500:#6B7280;--g600:#4B5563;\r\n  --cyan:#00C8E8;--pink:#E040FB;--yellow:#FFD94A;\r\n  --grad:linear-gradient(135deg,#00C8E8 0%,#E040FB 52%,#FFD94A 100%);\r\n  --gbtn:linear-gradient(90deg,#00C8E8 0%,#E040FB 55%,#FFD94A 100%);\r\n  --font:'Inter',sans-serif;\r\n}\r\nhtml{scroll-behavior:smooth}\r\nbody{font-family:var(--font);background:var(--white);color:var(--navy);overflow-x:hidden;line-height:1.5;padding-top:76px}\r\nimg{max-width:100%;display:block}\r\n::-webkit-scrollbar{width:3px}\r\n::-webkit-scrollbar-thumb{background:var(--gbtn);border-radius:2px}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.nav{\r\n  position:fixed;top:0;left:0;right:0;z-index:999;\r\n  height:76px;padding:0 5%;\r\n  display:flex;align-items:center;justify-content:space-between;\r\n  background:rgba(255,255,255,.97);\r\n  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);\r\n  border-bottom:1px solid rgba(26,31,94,.08);\r\n}\r\n.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}\r\n.nav-logo img{height:42px;width:auto;object-fit:contain}\r\n\r\n\/* Menu direita \u2014 sem pill, fonte navy, rainbow underline no hover *\/\r\n.nav-right{\r\n  display:flex;align-items:center;gap:4px;\r\n}\r\n.nav-right a.nl{\r\n  font-size:12px;font-weight:700;\r\n  text-transform:uppercase;letter-spacing:.08em;\r\n  color:var(--navy);\r\n  text-decoration:none;\r\n  padding:8px 16px;\r\n  border-radius:8px;\r\n  position:relative;\r\n  white-space:nowrap;\r\n  transition:color .2s;\r\n}\r\n\/* Linha rainbow sob o link \u2014 aparece no hover *\/\r\n.nav-right a.nl::after{\r\n  content:'';\r\n  position:absolute;\r\n  bottom:0;left:16px;right:16px;\r\n  height:2px;\r\n  border-radius:2px;\r\n  background:var(--grad);\r\n  transform:scaleX(0);\r\n  transform-origin:left center;\r\n  transition:transform .25s ease;\r\n}\r\n.nav-right a.nl:hover{color:var(--navy-d)}\r\n.nav-right a.nl:hover::after{transform:scaleX(1)}\r\n.nav-cta{\r\n  display:inline-flex;align-items:center;gap:8px;\r\n  background:var(--gbtn);color:#fff;\r\n  font-size:13px;font-weight:700;font-family:var(--font);\r\n  padding:11px 22px;border-radius:40px;\r\n  text-decoration:none;border:none;cursor:pointer;\r\n  transition:opacity .2s,transform .15s;white-space:nowrap;flex-shrink:0;\r\n}\r\n.nav-cta:hover{opacity:.88;transform:translateY(-1px)}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero{\r\n  position:relative;min-height:calc(100vh - 76px);\r\n  background:var(--navy-d);\r\n  display:flex;flex-direction:column;justify-content:flex-end;\r\n  overflow:hidden;\r\n}\r\n.hero-topbar{position:absolute;top:0;left:0;right:0;z-index:4;height:3px;background:var(--grad)}\r\n\r\n\/* fundo de textura *\/\r\n.hero-bg{position:absolute;inset:0;z-index:0}\r\n.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.22}\r\n.hero-bg::after{\r\n  content:'';position:absolute;inset:0;\r\n  background:\r\n    linear-gradient(0deg,rgba(16,20,61,.98) 0%,rgba(16,20,61,.75) 40%,rgba(16,20,61,.3) 70%,transparent 100%),\r\n    linear-gradient(90deg,rgba(16,20,61,.6) 0%,transparent 55%);\r\n}\r\n\r\n\/* Orbs de brilho decorativos *\/\r\n.hero-orb1{\r\n  position:absolute;top:-100px;right:5%;z-index:1;\r\n  width:520px;height:520px;border-radius:50%;\r\n  background:radial-gradient(ellipse,rgba(0,200,232,.12) 0%,transparent 65%);\r\n  pointer-events:none;\r\n}\r\n.hero-orb2{\r\n  position:absolute;bottom:-120px;left:20%;z-index:1;\r\n  width:400px;height:400px;border-radius:50%;\r\n  background:radial-gradient(ellipse,rgba(224,64,251,.08) 0%,transparent 65%);\r\n  pointer-events:none;\r\n}\r\n\r\n\/* Foto do empres\u00e1rio \u2014 PNG transparente sobreposta \u00e0 direita *\/\r\n.hero-person{\r\n  position:absolute;\r\n  right:4%;bottom:0;\r\n  z-index:2;\r\n  height:88%;\r\n  display:flex;align-items:flex-end;\r\n  pointer-events:none;\r\n}\r\n.hero-person img{\r\n  height:100%;width:auto;\r\n  object-fit:contain;object-position:bottom;\r\n  display:block;\r\n  \/* Sutil gradiente na base para fundir com o fundo *\/\r\n  -webkit-mask-image:linear-gradient(to top, transparent 0%, black 8%);\r\n  mask-image:linear-gradient(to top, transparent 0%, black 8%);\r\n}\r\n\r\n.hero-body{position:relative;z-index:3;padding:0 6% 80px;max-width:700px}\r\n\r\n.hero-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px}\r\n.hero-tag-dot{width:8px;height:8px;border-radius:50%;background:var(--gbtn);animation:blink 2.4s ease-in-out infinite}\r\n@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}\r\n.hero-tag span{font-size:12px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.14em}\r\n\r\n.hero-h1{\r\n  font-size:clamp(52px,8vw,112px);font-weight:900;color:var(--white);\r\n  line-height:.97;letter-spacing:-4px;margin-bottom:36px;\r\n}\r\n.hero-h1 em{font-style:normal;display:block;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n\r\n.hero-bottom{\r\n  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:flex-end;\r\n  padding-top:36px;border-top:1px solid rgba(255,255,255,.1);\r\n}\r\n.hero-desc{font-size:17px;color:rgba(255,255,255,.68);line-height:1.7;max-width:420px}\r\n.hero-desc strong{color:rgba(255,255,255,.95);font-weight:600}\r\n.hero-actions{margin-top:30px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}\r\n\r\n.btn-ghost-w{font-size:14px;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none;border:1.5px solid rgba(255,255,255,.25);padding:11px 24px;border-radius:40px;transition:border-color .2s,color .2s}\r\n.btn-ghost-w:hover{border-color:rgba(255,255,255,.7);color:white}\r\n\r\n.hero-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid rgba(255,255,255,.1);padding-left:40px}\r\n.hero-kpi{padding-right:28px;border-right:1px solid rgba(255,255,255,.08)}\r\n.hero-kpi:last-child{border-right:none}\r\n.hkpi-n{font-size:40px;font-weight:900;letter-spacing:-3px;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}\r\n.hkpi-l{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em}\r\n\r\n.hero-scroll{position:absolute;bottom:28px;right:6%;z-index:4;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em}\r\n.scroll-line{width:36px;height:1px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}\r\n.scroll-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--grad);animation:scanline 2s linear infinite}\r\n@keyframes scanline{from{left:-100%}to{left:100%}}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TICKER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.ticker{background:var(--navy);padding:17px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}\r\n.ticker-track{display:flex;align-items:center;width:max-content;animation:ticker 28s linear infinite}\r\n.ticker-track:hover{animation-play-state:paused}\r\n@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n.ticker-item{display:flex;align-items:center;gap:14px;padding:0 40px;white-space:nowrap;font-size:13px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em}\r\n.ticker-dot{width:6px;height:6px;border-radius:50%;background:var(--gbtn);flex-shrink:0}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION UTILS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.s{padding:120px 6%}\r\n.s--dark{background:var(--navy-d);color:var(--white)}\r\n.s--off{background:var(--off)}\r\n.s--white{background:var(--white)}\r\n\r\n.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--g500);margin-bottom:20px}\r\n.eyebrow em{font-style:normal;background:var(--gbtn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n.eyebrow--light{color:rgba(255,255,255,.35)}\r\n.eyebrow--light em{background:var(--gbtn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n\r\n.h2{font-size:clamp(32px,4.5vw,60px);font-weight:900;line-height:1.05;letter-spacing:-2.5px;color:var(--navy);margin-bottom:20px}\r\n.h2--white{color:var(--white)}\r\n.h2 em,.h2--white em{font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n.body-l{font-size:17px;color:var(--g600);line-height:1.75;max-width:540px}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVI\u00c7OS LISTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.services-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:80px}\r\n.services-intro-right{padding-top:20px;display:flex;flex-direction:column;gap:32px;justify-content:flex-end;align-items:flex-start}\r\n\r\n.service-list{display:flex;flex-direction:column;gap:0}\r\n.service-row{\r\n  display:grid;grid-template-columns:60px 1fr 80px;\r\n  align-items:center;padding:26px 0;\r\n  border-bottom:1px solid var(--g200);\r\n  cursor:pointer;\r\n  transition:padding-left .25s,background .2s;\r\n  position:relative;text-decoration:none;\r\n}\r\n.service-row::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:0;height:2px;background:var(--gbtn);transition:width .3s ease;border-radius:2px}\r\n.service-row:hover{padding-left:20px;background:rgba(26,31,94,.02)}\r\n.service-row:hover::before{width:16px}\r\n.service-row:first-child{border-top:1px solid var(--g200)}\r\n.srow-num{font-size:12px;font-weight:700;color:var(--g400);letter-spacing:.04em}\r\n.srow-name{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.5px}\r\n.srow-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--g200);display:flex;align-items:center;justify-content:center;margin-left:auto;transition:border-color .2s,background .2s}\r\n.service-row:hover .srow-arrow{border-color:var(--navy);background:var(--navy)}\r\n.service-row:hover .srow-arrow svg path{stroke:white}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SERVI\u00c7OS GRID DARK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\/* Mais contraste nos cards *\/\r\n.services-grid{\r\n  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;\r\n  background:rgba(0,200,232,.12);\r\n  border-radius:24px;overflow:hidden;margin-top:72px;\r\n}\r\n.sg-card{\r\n  padding:52px 42px;\r\n  background:#0e1236;\r\n  position:relative;overflow:hidden;\r\n  transition:background .3s;\r\n}\r\n.sg-card:hover{background:#141848}\r\n\/* Linha topo colorida sempre vis\u00edvel e mais espessa *\/\r\n.sg-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gbtn);opacity:.3;transition:opacity .25s}\r\n.sg-card:hover::after{opacity:1}\r\n\/* N\u00famero de fundo decorativo *\/\r\n.sg-card::before{\r\n  content:attr(data-num);\r\n  position:absolute;bottom:-20px;right:20px;\r\n  font-size:96px;font-weight:900;color:rgba(255,255,255,.03);\r\n  line-height:1;pointer-events:none;letter-spacing:-4px;\r\n}\r\n.sg-num{font-size:10px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:28px}\r\n.sg-icon{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:background .25s}\r\n.sg-card:hover .sg-icon{background:rgba(0,200,232,.18)}\r\n.sg-icon svg{width:28px;height:28px}\r\n\/* T\u00edtulo e desc com maior contraste *\/\r\n.sg-title{font-size:21px;font-weight:900;color:#ffffff;letter-spacing:-.5px;margin-bottom:14px;line-height:1.2}\r\n.sg-desc{font-size:14px;color:rgba(255,255,255,.7);line-height:1.72;margin-bottom:22px}\r\n.sg-tags{display:flex;flex-wrap:wrap;gap:6px}\r\n.sg-tag{font-size:10px;font-weight:700;color:var(--cyan);background:rgba(0,200,232,.12);border-radius:40px;padding:4px 11px;letter-spacing:.04em}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DIFERENCIAIS SPLIT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.diff-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:600px}\r\n.diff-photo{position:relative;overflow:hidden}\r\n.diff-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;position:absolute;inset:0}\r\n.diff-photo-ov{position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,rgba(16,20,61,.5) 100%)}\r\n.diff-content{background:var(--navy-d);padding:80px 72px;display:flex;flex-direction:column;justify-content:center}\r\n.diff-list{margin-top:48px;display:flex;flex-direction:column;gap:0}\r\n.diff-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.07)}\r\n.diff-item:first-child{border-top:1px solid rgba(255,255,255,.07)}\r\n.diff-icon{width:44px;height:44px;border-radius:12px;background:var(--gbtn);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}\r\n.diff-icon svg{width:20px;height:20px}\r\n.diff-title{font-size:16px;font-weight:800;color:var(--white);margin-bottom:5px;letter-spacing:-.2px}\r\n.diff-desc{font-size:14px;color:rgba(255,255,255,.6);line-height:1.62}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 WHITE LABEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.wl-grid{display:grid;grid-template-columns:5fr 4fr;gap:100px;align-items:center}\r\n.wl-visual{position:relative}\r\n.wl-main-img{width:100%;border-radius:24px;overflow:hidden;aspect-ratio:4\/3;position:relative}\r\n.wl-main-img img{width:100%;height:100%;object-fit:cover;display:block}\r\n.wl-badge{position:absolute;bottom:-20px;right:-20px;background:var(--navy);border:3px solid var(--white);border-radius:16px;padding:18px 22px;box-shadow:0 16px 48px rgba(26,31,94,.2)}\r\n.wl-badge-num{font-size:32px;font-weight:900;letter-spacing:-1.5px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px}\r\n.wl-badge-lbl{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.07em}\r\n.wl-list{margin-top:40px;display:flex;flex-direction:column;gap:16px}\r\n.wl-item{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:14px;border:1px solid var(--g200);transition:border-color .2s,box-shadow .2s}\r\n.wl-item:hover{border-color:rgba(0,200,232,.35);box-shadow:0 4px 20px rgba(0,200,232,.09)}\r\n.wl-dot{width:10px;height:10px;border-radius:50%;background:var(--gbtn);flex-shrink:0;margin-top:5px}\r\n.wl-item-title{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px;letter-spacing:-.2px}\r\n.wl-item-desc{font-size:13px;color:var(--g600);line-height:1.6}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 PORTFOLIO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.portfolio-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:flex-end;margin-bottom:64px}\r\n.portfolio-intro-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:24px}\r\n.port-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}\r\n.pf-btn{font-size:12px;font-weight:700;color:var(--g500);border:1.5px solid var(--g200);background:none;cursor:pointer;font-family:var(--font);padding:8px 18px;border-radius:40px;transition:all .2s}\r\n.pf-btn.active,.pf-btn:hover{color:var(--white);background:var(--navy);border-color:var(--navy)}\r\n\r\n\/* Grid masonry *\/\r\n.port-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:80px;gap:14px}\r\n.port-item{border-radius:16px;overflow:hidden;position:relative;cursor:pointer;background:var(--g100)}\r\n.port-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}\r\n.port-item:hover img{transform:scale(1.06)}\r\n.port-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(16,20,61,.9) 100%);opacity:0;transition:opacity .3s}\r\n.port-item:hover .port-ov{opacity:1}\r\n.port-info{position:absolute;bottom:0;left:0;right:0;padding:22px 20px;transform:translateY(6px);transition:transform .3s}\r\n.port-item:hover .port-info{transform:translateY(0)}\r\n.port-cat{font-size:10px;font-weight:700;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}\r\n.port-name{font-size:16px;font-weight:800;color:var(--white);letter-spacing:-.3px}\r\n\/* \u00cdcone de expand *\/\r\n.port-expand{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}\r\n.port-item:hover .port-expand{opacity:1}\r\n\r\n\/* Tamanhos das c\u00e9lulas *\/\r\n.pi-1{grid-column:span 5;grid-row:span 6}\r\n.pi-2{grid-column:span 4;grid-row:span 5}\r\n.pi-3{grid-column:span 3;grid-row:span 5}\r\n.pi-4{grid-column:span 4;grid-row:span 5}\r\n.pi-5{grid-column:span 5;grid-row:span 5}\r\n.pi-6{grid-column:span 3;grid-row:span 4}\r\n.pi-7{grid-column:span 4;grid-row:span 4}\r\n.pi-8{grid-column:span 5;grid-row:span 5}\r\n.pi-9{grid-column:span 4;grid-row:span 4}\r\n.pi-10{grid-column:span 3;grid-row:span 4}\r\n\r\n\/* Lightbox *\/\r\n.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(10,14,50,.96);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .3s}\r\n.lightbox.open{opacity:1;pointer-events:all}\r\n.lightbox-inner{position:relative;max-width:1100px;width:100%;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:20px}\r\n.lightbox-img{max-height:75vh;max-width:100%;border-radius:16px;object-fit:contain;box-shadow:0 32px 80px rgba(0,0,0,.6)}\r\n.lightbox-caption{text-align:center}\r\n.lightbox-cat{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}\r\n.lightbox-name{font-size:20px;font-weight:800;color:var(--white);letter-spacing:-.3px}\r\n.lightbox-close{position:absolute;top:-16px;right:-16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:white;transition:background .2s}\r\n.lightbox-close:hover{background:rgba(255,255,255,.22)}\r\n.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:white;transition:background .2s}\r\n.lb-nav:hover{background:rgba(255,255,255,.2)}\r\n.lb-prev{left:-60px}\r\n.lb-next{right:-60px}\r\n\r\n.port-cta{margin-top:52px;display:flex;align-items:center;justify-content:center;gap:16px}\r\n.btn-border{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-size:14px;font-weight:700;padding:14px 32px;border-radius:40px;border:2px solid var(--navy);text-decoration:none;transition:all .2s}\r\n.btn-border:hover{background:var(--navy);color:white}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 N\u00daMEROS BAND \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.numbers-band{display:grid;grid-template-columns:repeat(4,1fr)}\r\n.nb-item{padding:72px 48px;border-right:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;transition:background .25s}\r\n.nb-item:last-child{border-right:none}\r\n.nb-item:hover{background:rgba(255,255,255,.04)}\r\n.nb-n{font-size:clamp(48px,5vw,72px);font-weight:900;letter-spacing:-4px;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;display:block}\r\n.nb-label{font-size:14px;color:rgba(255,255,255,.45);font-weight:500;line-height:1.5}\r\n.nb-label strong{color:rgba(255,255,255,.85);display:block;font-size:15px;font-weight:700;margin-bottom:4px}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LOGOS CARROSSEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.logos-section{padding:60px 0;overflow:hidden;border-top:1px solid var(--g100);border-bottom:1px solid var(--g100)}\r\n.logos-label{text-align:center;font-size:11px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.14em;margin-bottom:36px}\r\n.logos-track-wrap{overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}\r\n.logos-track{display:flex;align-items:center;width:max-content;animation:logoscroll 60s linear infinite}\r\n.logos-track:hover{animation-play-state:paused}\r\n@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n.logo-chip{display:flex;align-items:center;justify-content:center;padding:0 28px;height:52px;flex-shrink:0;font-size:13px;font-weight:800;color:var(--g400);opacity:.55;transition:opacity .25s,color .25s;white-space:nowrap;border-right:1px solid var(--g200)}\r\n.logo-chip:hover{opacity:1;color:var(--navy)}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA FINAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-final{position:relative;overflow:hidden;background:var(--navy-d);padding:120px 6%;text-align:center}\r\n.cta-final::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,200,232,.09) 0%,transparent 65%);pointer-events:none}\r\n\/* Pontos de brilho decorativos *\/\r\n.cta-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}\r\n.cta-particles span{position:absolute;border-radius:50%;background:var(--gbtn);opacity:0;animation:sparkle var(--d) ease-in-out infinite var(--delay)}\r\n@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:.6;transform:scale(1)}}\r\n.cta-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:28px}\r\n.cta-tag-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:40px;padding:6px 16px;color:rgba(255,255,255,.6)}\r\n.cta-h2{font-size:clamp(44px,7vw,88px);font-weight:900;color:var(--white);line-height:.97;letter-spacing:-4px;margin-bottom:36px;position:relative;z-index:1}\r\n.cta-h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}\r\n.cta-sub{font-size:18px;color:rgba(255,255,255,.55);max-width:520px;margin:0 auto 52px;line-height:1.7;position:relative;z-index:1}\r\n.cta-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;z-index:1}\r\n.cta-note{margin-top:24px;font-size:12px;color:rgba(255,255,255,.28);position:relative;z-index:1}\r\n.btn-white{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--navy);font-size:14px;font-weight:700;font-family:var(--font);padding:14px 28px;border-radius:40px;text-decoration:none;cursor:pointer;transition:opacity .2s,transform .15s}\r\n.btn-white:hover{opacity:.9;transform:translateY(-1px)}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.footer{background:var(--navy-d);padding:80px 6% 40px;border-top:1px solid rgba(255,255,255,.08)}\r\n.footer-top{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:64px;margin-bottom:64px}\r\n.ft-logo{display:flex;align-items:center;text-decoration:none;margin-bottom:22px}\r\n.ft-logo img{height:42px;width:auto;object-fit:contain}\r\n\/* Texto do footer mais claro \u2014 rgba(255,255,255,.72) vs .45 anterior *\/\r\n.ft-desc{font-size:14px;color:rgba(255,255,255,.72);line-height:1.75;max-width:260px;margin-bottom:28px}\r\n.ft-seal{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.4);padding-top:14px;margin-bottom:24px;border-top:2px solid transparent;background-image:var(--grad);background-size:56px 2px;background-repeat:no-repeat;background-position:0 0}\r\n.ft-socials{display:flex;gap:10px}\r\n.ft-soc{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(255,255,255,.55);transition:border-color .2s,color .2s,background .2s}\r\n.ft-soc:hover{border-color:rgba(255,255,255,.5);color:white;background:rgba(255,255,255,.07)}\r\n.ft-col-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.45);margin-bottom:22px}\r\n.ft-links{list-style:none;display:flex;flex-direction:column;gap:13px}\r\n\/* Links mais claros .7 vs .5 anterior *\/\r\n.ft-links a{font-size:14px;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}\r\n.ft-links a:hover{color:rgba(255,255,255,1)}\r\n.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:32px;display:flex;justify-content:space-between;align-items:center}\r\n\/* Copy mais claro .4 vs .25 anterior *\/\r\n.ft-copy{font-size:13px;color:rgba(255,255,255,.4)}\r\n.ft-gbar{height:2px;width:56px;background:var(--grad);border-radius:2px}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<nav class=\"nav\">\r\n  <a href=\"#\" class=\"nav-logo\">\r\n    <img decoding=\"async\"\r\n      src=\"https:\/\/agenciakroma.com.br\/wp-content\/uploads\/2026\/06\/logo_transp_azul.png\"\r\n      alt=\"KROMA Studio\"\r\n      onerror=\"this.style.display='none';this.insertAdjacentHTML('afterend','<span style=\\'font-size:22px;font-weight:900;color:#1a1f5e;letter-spacing:-.5px\\'>kroma<\/span>')\">\r\n  <\/a>\r\n\r\n  <!-- Menu agrupado \u00e0 direita com pill navy contrastante -->\r\n  <div class=\"nav-right\">\r\n    <a href=\"#servicos\" class=\"nl\">Servi\u00e7os<\/a>\r\n    <a href=\"#portfolio\" class=\"nl\">Portfolio<\/a>\r\n    <a href=\"#white-label\" class=\"nl\">White Label<\/a>\r\n    <a href=\"#clientes\" class=\"nl\">Clientes<\/a>\r\n    <a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\" class=\"nav-cta\">\r\n      Falar com a equipe\r\n      <svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n    <\/a>\r\n  <\/div>\r\n<\/nav>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\">\r\n  <div class=\"hero-topbar\"><\/div>\r\n  <div class=\"hero-orb1\"><\/div>\r\n  <div class=\"hero-orb2\"><\/div>\r\n\r\n  <div class=\"hero-bg\">\r\n    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?w=1800&q=80&fit=crop&crop=center\" alt=\"\" loading=\"eager\">\r\n  <\/div>\r\n\r\n  <!-- Empres\u00e1rio sorrindo \u2014 PNG transparente lado direito\r\n       PARA SUBSTITUIR: troque o src abaixo por sua imagem PNG com fundo transparente -->\r\n  <div class=\"hero-person\">\r\n    <img decoding=\"async\"\r\n      src=\"https:\/\/agenciakroma.com.br\/wp-content\/uploads\/2026\/06\/httpstrello.comcLQH9ZQGQ2-e1781136409838.png\"\r\n      alt=\"Empres\u00e1rio parceiro KROMA\"\r\n      loading=\"eager\"\r\n      id=\"hero-person-img\"\r\n      style=\"border-radius:0\">\r\n  <\/div>\r\n\r\n  <div class=\"hero-body\">\r\n    <div class=\"hero-tag\">\r\n      <div class=\"hero-tag-dot\"><\/div>\r\n      <span>Est\u00fadio de Design \u00b7 Curitiba, Brasil<\/span>\r\n    <\/div>\r\n\r\n    <h1 class=\"hero-h1\">\r\n      Design que<br>\r\n      <em>move neg\u00f3cios.<\/em>\r\n    <\/h1>\r\n\r\n    <div class=\"hero-bottom\">\r\n      <div>\r\n        <p class=\"hero-desc\">\r\n          Somos um <strong>est\u00fadio especialista em criativos<\/strong> para ag\u00eancias de marketing, webdesign, editoras e projetos white label. Excel\u00eancia visual onde sua marca precisa crescer.\r\n        <\/p>\r\n        <div class=\"hero-actions\">\r\n          <a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\" class=\"nav-cta\">Agendar Diagn\u00f3stico Gratuito<\/a>\r\n          <a href=\"https:\/\/www.instagram.com\/agenciakroma\" target=\"_blank\" class=\"btn-ghost-w\">Ver portfolio<\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"hero-kpis\">\r\n        <div class=\"hero-kpi\"><div class=\"hkpi-n\">100+<\/div><div class=\"hkpi-l\">Marcas criadas<\/div><\/div>\r\n        <div class=\"hero-kpi\" style=\"padding-left:24px\"><div class=\"hkpi-n\">8+<\/div><div class=\"hkpi-l\">Anos de est\u00fadio<\/div><\/div>\r\n        <div class=\"hero-kpi\" style=\"padding-left:24px\"><div class=\"hkpi-n\">360\u00b0<\/div><div class=\"hkpi-l\">Cobertura criativa<\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"hero-scroll\"><div class=\"scroll-line\"><\/div>Scroll<\/div>\r\n<\/section>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TICKER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"ticker\">\r\n  <div class=\"ticker-track\">\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Branding & Identidade Visual<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Criativos para Ag\u00eancias de MKT<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Webdesign & UI\/UX<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>White Label<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Design para Editoras<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Redesenho Estrat\u00e9gico<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Motion & Anima\u00e7\u00e3o<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Social Media Design<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Branding & Identidade Visual<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Criativos para Ag\u00eancias de MKT<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Webdesign & UI\/UX<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>White Label<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Design para Editoras<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Redesenho Estrat\u00e9gico<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Motion & Anima\u00e7\u00e3o<\/div>\r\n    <div class=\"ticker-item\"><div class=\"ticker-dot\"><\/div>Social Media Design<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 SERVI\u00c7OS LISTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"s s--white\" id=\"servicos\">\r\n  <div class=\"services-intro\">\r\n    <div>\r\n      <div class=\"eyebrow\"><em>01<\/em>&nbsp;&nbsp;Especialidades<\/div>\r\n      <h2 class=\"h2\">O que o est\u00fadio<br><em>entrega.<\/em><\/h2>\r\n    <\/div>\r\n    <div class=\"services-intro-right\">\r\n      <p class=\"body-l\">Combinamos velocidade de execu\u00e7\u00e3o com rigor t\u00e9cnico para entregar criativos de alto n\u00edvel \u2014 seja para sua marca ou para a carteira de clientes da sua ag\u00eancia.<\/p>\r\n      <a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\" class=\"nav-cta\">Conversar sobre seu projeto<\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Cada .service-row tem href para p\u00e1gina espec\u00edfica \u2014 basta editar o href -->\r\n  <div class=\"service-list\">\r\n    <a href=\"\/branding\" class=\"service-row\">\r\n      <span class=\"srow-num\">01<\/span>\r\n      <span class=\"srow-name\">Branding & Identidade Visual<\/span>\r\n      <div class=\"srow-arrow\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/div>\r\n    <\/a>\r\n    <a href=\"\/criativo-agencias\" class=\"service-row\">\r\n      <span class=\"srow-num\">02<\/span>\r\n      <span class=\"srow-name\">Criativos para Ag\u00eancias de MKT<\/span>\r\n      <div class=\"srow-arrow\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/div>\r\n    <\/a>\r\n    <a href=\"\/webdesign\" class=\"service-row\">\r\n      <span class=\"srow-num\">03<\/span>\r\n      <span class=\"srow-name\">Webdesign & UI\/UX<\/span>\r\n      <div class=\"srow-arrow\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/div>\r\n    <\/a>\r\n    <a href=\"\/editorial\" class=\"service-row\">\r\n      <span class=\"srow-num\">04<\/span>\r\n      <span class=\"srow-name\">Design para Editoras de Livros<\/span>\r\n      <div class=\"srow-arrow\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/div>\r\n    <\/a>\r\n    <a href=\"\/white-label\" class=\"service-row\">\r\n      <span class=\"srow-num\">05<\/span>\r\n      <span class=\"srow-name\">White Label para Ag\u00eancias<\/span>\r\n      <div class=\"srow-arrow\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/div>\r\n    <\/a>\r\n    <a href=\"\/motion\" class=\"service-row\">\r\n      <span class=\"srow-num\">06<\/span>\r\n      <span class=\"srow-name\">Motion Design & Anima\u00e7\u00e3o<\/span>\r\n      <div class=\"srow-arrow\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/div>\r\n    <\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 SOLU\u00c7\u00d5ES DARK \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"s s--dark\">\r\n  <div class=\"eyebrow eyebrow--light\"><em>02<\/em>&nbsp;&nbsp;Solu\u00e7\u00f5es detalhadas<\/div>\r\n  <h2 class=\"h2 h2--white\">Cada entrega,<br><em>uma especialidade.<\/em><\/h2>\r\n\r\n  <div class=\"services-grid\">\r\n    <div class=\"sg-card\" data-num=\"01\">\r\n      <div class=\"sg-num\">01 \u2014 Branding<\/div>\r\n      <div class=\"sg-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"#00C8E8\" stroke-width=\"1.6\"><circle cx=\"14\" cy=\"14\" r=\"10\"\/><circle cx=\"14\" cy=\"14\" r=\"5\"\/><circle cx=\"14\" cy=\"14\" r=\"1.5\" fill=\"#00C8E8\" stroke=\"none\"\/><line x1=\"14\" y1=\"4\" x2=\"14\" y2=\"9\"\/><line x1=\"14\" y1=\"19\" x2=\"14\" y2=\"24\"\/><line x1=\"4\" y1=\"14\" x2=\"9\" y2=\"14\"\/><line x1=\"19\" y1=\"14\" x2=\"24\" y2=\"14\"\/><\/svg><\/div>\r\n      <div class=\"sg-title\">Branding & Identidade Visual<\/div>\r\n      <div class=\"sg-desc\">Cria\u00e7\u00e3o de identidades que comunicam autoridade e criam reconhecimento instant\u00e2neo no mercado. Da estrat\u00e9gia ao manual completo da marca.<\/div>\r\n      <div class=\"sg-tags\"><span class=\"sg-tag\">Logo<\/span><span class=\"sg-tag\">Manual de Marca<\/span><span class=\"sg-tag\">Identidade<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"sg-card\" data-num=\"02\">\r\n      <div class=\"sg-num\">02 \u2014 Ag\u00eancias MKT<\/div>\r\n      <div class=\"sg-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"#E040FB\" stroke-width=\"1.6\"><rect x=\"2\" y=\"6\" width=\"24\" height=\"16\" rx=\"3\"\/><path d=\"M2 11h24M8 6V4M20 6V4\"\/><circle cx=\"8\" cy=\"17\" r=\"1.5\" fill=\"#E040FB\" stroke=\"none\"\/><path d=\"M13 17h7\"\/><\/svg><\/div>\r\n      <div class=\"sg-title\">Criativos para Ag\u00eancias de MKT<\/div>\r\n      <div class=\"sg-desc\">Produ\u00e7\u00e3o em alta velocidade para ag\u00eancias que precisam de volume com qualidade. Pe\u00e7as e campanhas entregues no prazo, sempre.<\/div>\r\n      <div class=\"sg-tags\"><span class=\"sg-tag\">Social Ads<\/span><span class=\"sg-tag\">Banners<\/span><span class=\"sg-tag\">Campanhas<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"sg-card\" data-num=\"03\">\r\n      <div class=\"sg-num\">03 \u2014 Webdesign<\/div>\r\n      <div class=\"sg-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"#FFD94A\" stroke-width=\"1.6\"><rect x=\"2\" y=\"4\" width=\"24\" height=\"20\" rx=\"3\"\/><path d=\"M2 10h24M7 4v6\"\/><path d=\"M9 16l3 3 6-6\"\/><\/svg><\/div>\r\n      <div class=\"sg-title\">Webdesign & UI\/UX<\/div>\r\n      <div class=\"sg-desc\">Sites institucionais, landing pages e interfaces com foco em convers\u00e3o. Design pixel-perfect para Elementor, Webflow ou handoff para devs.<\/div>\r\n      <div class=\"sg-tags\"><span class=\"sg-tag\">Landing Pages<\/span><span class=\"sg-tag\">UI\/UX<\/span><span class=\"sg-tag\">Elementor<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"sg-card\" data-num=\"04\">\r\n      <div class=\"sg-num\">04 \u2014 Editoras<\/div>\r\n      <div class=\"sg-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"#00C8E8\" stroke-width=\"1.6\"><path d=\"M5 4h14l4 4v16H5z\"\/><path d=\"M19 4v4h4\"\/><path d=\"M9 13h10M9 17h7\"\/><\/svg><\/div>\r\n      <div class=\"sg-title\">Design para Editoras de Livros<\/div>\r\n      <div class=\"sg-desc\">Capas, diagrama\u00e7\u00e3o editorial e identidade para cole\u00e7\u00f5es. Experi\u00eancia com fic\u00e7\u00e3o, n\u00e3o-fic\u00e7\u00e3o, did\u00e1ticos e publica\u00e7\u00f5es corporativas.<\/div>\r\n      <div class=\"sg-tags\"><span class=\"sg-tag\">Capas<\/span><span class=\"sg-tag\">Diagrama\u00e7\u00e3o<\/span><span class=\"sg-tag\">Editorial<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"sg-card\" data-num=\"05\">\r\n      <div class=\"sg-num\">05 \u2014 White Label<\/div>\r\n      <div class=\"sg-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"#E040FB\" stroke-width=\"1.6\"><path d=\"M14 2l3.5 7 7.5 1-5.5 5.3 1.3 7.7L14 20l-6.8 3 1.3-7.7L3 10l7.5-1z\"\/><\/svg><\/div>\r\n      <div class=\"sg-title\">White Label para Ag\u00eancias<\/div>\r\n      <div class=\"sg-desc\">Seja nosso est\u00fadio-fantasma. Entregamos sob a sua marca com NDA, prazos curtos e qualidade premium. Para projetos cont\u00ednuos.<\/div>\r\n      <div class=\"sg-tags\"><span class=\"sg-tag\">NDA<\/span><span class=\"sg-tag\">Produ\u00e7\u00e3o Cont\u00ednua<\/span><span class=\"sg-tag\">Confidencial<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"sg-card\" data-num=\"06\">\r\n      <div class=\"sg-num\">06 \u2014 Motion<\/div>\r\n      <div class=\"sg-icon\"><svg viewBox=\"0 0 28 28\" fill=\"none\" stroke=\"#FFD94A\" stroke-width=\"1.6\"><circle cx=\"14\" cy=\"14\" r=\"11\"\/><polygon points=\"11,9 21,14 11,19\" fill=\"#FFD94A\" stroke=\"none\" opacity=\".7\"\/><\/svg><\/div>\r\n      <div class=\"sg-title\">Motion Design & Anima\u00e7\u00e3o<\/div>\r\n      <div class=\"sg-desc\">Anima\u00e7\u00f5es para social media, vinhetas de marca, apresenta\u00e7\u00f5es animadas e intros de v\u00eddeo que ampliam o impacto da identidade visual.<\/div>\r\n      <div class=\"sg-tags\"><span class=\"sg-tag\">After Effects<\/span><span class=\"sg-tag\">Reels<\/span><span class=\"sg-tag\">Vinhetas<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 DIFERENCIAIS SPLIT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"diff-wrap\">\r\n  <div class=\"diff-photo\">\r\n    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600880292203-757bb62b4baf?w=900&q=85&fit=crop&crop=top\" alt=\"Time KROMA\" loading=\"lazy\">\r\n    <div class=\"diff-photo-ov\"><\/div>\r\n  <\/div>\r\n  <div class=\"diff-content\">\r\n    <div class=\"eyebrow eyebrow--light\"><em>03<\/em>&nbsp;&nbsp;Diferenciais<\/div>\r\n    <h2 class=\"h2 h2--white\">Por que o<br><em>est\u00fadio KROMA?<\/em><\/h2>\r\n    <div class=\"diff-list\">\r\n      <div class=\"diff-item\">\r\n        <div class=\"diff-icon\"><svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M12 2l3 6.5 7 1-5 4.9 1.2 7L12 18l-6.2 3.4 1.2-7L2 9.5l7-1z\"\/><\/svg><\/div>\r\n        <div><div class=\"diff-title\">Especialistas, n\u00e3o generalistas<\/div><div class=\"diff-desc\">Cada projeto passa por profissionais s\u00eanior em sua \u00e1rea. Nada de juniors entregando seu projeto.<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"diff-item\">\r\n        <div class=\"diff-icon\"><svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><\/svg><\/div>\r\n        <div><div class=\"diff-title\">Velocidade de produ\u00e7\u00e3o<\/div><div class=\"diff-desc\">Processos \u00e1geis e fluxos de revis\u00e3o objetivos. Entregamos no prazo \u2014 sua ag\u00eancia n\u00e3o pode esperar.<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"diff-item\">\r\n        <div class=\"diff-icon\"><svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div>\r\n        <div><div class=\"diff-title\">NDA e discri\u00e7\u00e3o total<\/div><div class=\"diff-desc\">Para parcerias white label: seus clientes jamais saber\u00e3o da nossa exist\u00eancia. Sigilo garantido.<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"diff-item\">\r\n        <div class=\"diff-icon\"><svg width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M9 17H7A5 5 0 0 1 7 7h2\"\/><path d=\"M15 7h2a5 5 0 1 1 0 10h-2\"\/><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"\/><\/svg><\/div>\r\n        <div><div class=\"diff-title\">Design sist\u00eamico<\/div><div class=\"diff-desc\">Criamos sistemas de design coesos que escalam com a marca ao longo do tempo.<\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 WHITE LABEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"s s--off\" id=\"white-label\">\r\n  <div class=\"wl-grid\">\r\n    <div class=\"wl-visual\">\r\n      <div class=\"wl-main-img\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?w=900&q=85&fit=crop&crop=top\" alt=\"Parceria White Label KROMA\" loading=\"lazy\">\r\n      <\/div>\r\n      <div class=\"wl-badge\"><div class=\"wl-badge-num\">30+<\/div><div class=\"wl-badge-lbl\">Ag\u00eancias parceiras<\/div><\/div>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"eyebrow\"><em>04<\/em>&nbsp;&nbsp;White Label<\/div>\r\n      <h2 class=\"h2\">Seu est\u00fadio<br><em>invis\u00edvel.<\/em><\/h2>\r\n      <p class=\"body-l\" style=\"margin-top:16px;margin-bottom:8px\">Somos o est\u00fadio por tr\u00e1s das ag\u00eancias que crescem sem estourar a equipe. Produ\u00e7\u00e3o cont\u00ednua, qualidade premium e discri\u00e7\u00e3o total.<\/p>\r\n      <div class=\"wl-list\">\r\n        <div class=\"wl-item\"><div class=\"wl-dot\"><\/div><div><div class=\"wl-item-title\">Produ\u00e7\u00e3o sob demanda<\/div><div class=\"wl-item-desc\">Branding, criativos, webdesign e editorial entregues sob a sua marca.<\/div><\/div><\/div>\r\n        <div class=\"wl-item\"><div class=\"wl-dot\"><\/div><div><div class=\"wl-item-title\">NDA e confidencialidade<\/div><div class=\"wl-item-desc\">Assinamos acordo de sigilo e jamais revelamos a parceria.<\/div><\/div><\/div>\r\n        <div class=\"wl-item\"><div class=\"wl-dot\"><\/div><div><div class=\"wl-item-title\">Previsibilidade de custos<\/div><div class=\"wl-item-desc\">Planos mensais com volume garantido e precifica\u00e7\u00e3o justa.<\/div><\/div><\/div>\r\n        <div class=\"wl-item\"><div class=\"wl-dot\"><\/div><div><div class=\"wl-item-title\">Onboarding em 48h<\/div><div class=\"wl-item-desc\">Configuramos o processo e come\u00e7amos a produzir rapidamente.<\/div><\/div><\/div>\r\n      <\/div>\r\n      <div style=\"margin-top:36px\"><a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\" class=\"nav-cta\">Quero ser parceiro KROMA <svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 PORTFOLIO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"s s--white\" id=\"portfolio\">\r\n  <div class=\"portfolio-intro\">\r\n    <div>\r\n      <div class=\"eyebrow\"><em>05<\/em>&nbsp;&nbsp;Portfolio<\/div>\r\n      <h2 class=\"h2\">Cases que<br><em>falam por si.<\/em><\/h2>\r\n      <p class=\"body-l\" style=\"margin-top:18px\">Trabalhos reais, clientes reais. Clique em qualquer projeto para ver em destaque.<\/p>\r\n    <\/div>\r\n    <div class=\"portfolio-intro-right\">\r\n      <div class=\"port-filter\">\r\n        <button class=\"pf-btn active\" onclick=\"filterPort(this,'all')\">Todos<\/button>\r\n        <button class=\"pf-btn\" onclick=\"filterPort(this,'branding')\">Branding<\/button>\r\n        <button class=\"pf-btn\" onclick=\"filterPort(this,'web')\">Webdesign<\/button>\r\n        <button class=\"pf-btn\" onclick=\"filterPort(this,'editorial')\">Editorial<\/button>\r\n        <button class=\"pf-btn\" onclick=\"filterPort(this,'social')\">Social<\/button>\r\n      <\/div>\r\n      <a href=\"https:\/\/www.instagram.com\/agenciakroma\" target=\"_blank\" class=\"nav-cta\">Ver no Instagram <svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550 GRID MASONRY \u2550\u2550\u2550\u2550\r\n    PARA PERSONALIZAR:\r\n    1. Troque o src da <img> pelo caminho da sua imagem.\r\n    2. Edite data-cat para filtrar (branding | web | editorial | social).\r\n    3. Edite data-name e data-cat-label para o texto do lightbox.\r\n    4. Os tamanhos (pi-1 a pi-10) controlam as propor\u00e7\u00f5es do grid.\r\n  -->\r\n  <div class=\"port-grid\" id=\"portGrid\">\r\n\r\n    <div class=\"port-item pi-3\" data-cat=\"branding\" data-name=\"Transbello \u2014 Identidade Corporativa\" data-cat-label=\"Branding Corporativo\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/agenciakroma.com.br\/wp-content\/uploads\/2026\/06\/Design-sem-nome-12.jpg\" alt=\"Transbello\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Branding Corporativo<\/div><div class=\"port-name\">Mercer<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-2\" data-cat=\"branding\" data-name=\"BEMAVI Incorporadora\" data-cat-label=\"Identidade Visual\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1561070791-2526d30994b5?w=600&q=80&fit=crop\" alt=\"BEMAVI\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Identidade Visual<\/div><div class=\"port-name\">BEMAVI Incorporadora<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-3\" data-cat=\"web\" data-name=\"Oriente Im\u00f3veis \u2014 Website\" data-cat-label=\"Webdesign\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1558655146-d09347e92766?w=500&q=80&fit=crop\" alt=\"Oriente\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Webdesign<\/div><div class=\"port-name\">Oriente Im\u00f3veis<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-4\" data-cat=\"branding\" data-name=\"W-SOX Tax & Compliance\" data-cat-label=\"Branding Financeiro\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1634942537034-2531766767d1?w=600&q=80&fit=crop\" alt=\"W-SOX\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Branding Financeiro<\/div><div class=\"port-name\">W-SOX Tax & Compliance<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-5\" data-cat=\"editorial\" data-name=\"LUMI\u00c8RE \u2014 Identidade Editorial\" data-cat-label=\"Editorial & Branding\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?w=700&q=80&fit=crop\" alt=\"LUMI\u00c8RE\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Editorial & Branding<\/div><div class=\"port-name\">LUMI\u00c8RE<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-6\" data-cat=\"branding\" data-name=\"Reconstru\u00e7\u00f5es Engenharia\" data-cat-label=\"Identidade Visual\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586717791821-3f44a563fa4c?w=500&q=80&fit=crop\" alt=\"Reconstru\u00e7\u00f5es\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Identidade Visual<\/div><div class=\"port-name\">Reconstru\u00e7\u00f5es<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-7\" data-cat=\"branding\" data-name=\"Sallezza \u2014 Branding Premium\" data-cat-label=\"Branding Premium\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1614332287897-cdc485fa562d?w=600&q=80&fit=crop\" alt=\"Sallezza\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Branding Premium<\/div><div class=\"port-name\">Sallezza<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-8\" data-cat=\"branding\" data-name=\"Grupo Fontanive \u2014 Redesign\" data-cat-label=\"Redesenho Estrat\u00e9gico\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551434678-e076c223a692?w=700&q=80&fit=crop\" alt=\"Grupo Fontanive\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Redesenho Estrat\u00e9gico<\/div><div class=\"port-name\">Grupo Fontanive<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-9\" data-cat=\"web\" data-name=\"boxmob \u2014 UI Design\" data-cat-label=\"Webdesign & UI\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1630673265810-b2dafe08eb3c?w=600&q=80&fit=crop\" alt=\"boxmob\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Webdesign & UI<\/div><div class=\"port-name\">boxmob<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"port-item pi-10\" data-cat=\"social\" data-name=\"CNHWEB \u2014 Social Design\" data-cat-label=\"Social Media\" onclick=\"openLB(this)\">\r\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1598488035139-bdbb2231ce04?w=500&q=80&fit=crop\" alt=\"CNHWEB\">\r\n      <div class=\"port-ov\"><\/div>\r\n      <div class=\"port-info\"><div class=\"port-cat\">Social Media<\/div><div class=\"port-name\">CNHWEB<\/div><\/div>\r\n      <div class=\"port-expand\"><svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"white\" stroke-width=\"2\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\"\/><\/svg><\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/port-grid -->\r\n\r\n  <div class=\"port-cta\">\r\n    <a href=\"https:\/\/www.instagram.com\/agenciakroma\" target=\"_blank\" class=\"btn-border\">Ver portfolio completo no Instagram <svg width=\"14\" height=\"14\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- LIGHTBOX -->\r\n<div class=\"lightbox\" id=\"lightbox\" onclick=\"closeLBOutside(event)\">\r\n  <div class=\"lightbox-inner\">\r\n    <button class=\"lightbox-close\" onclick=\"closeLB()\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M18 6L6 18M6 6l12 12\"\/><\/svg><\/button>\r\n    <button class=\"lb-nav lb-prev\" onclick=\"navLB(-1)\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg><\/button>\r\n    <button class=\"lb-nav lb-next\" onclick=\"navLB(1)\"><svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/button>\r\n    <img decoding=\"async\" class=\"lightbox-img\" id=\"lbImg\" src=\"\" alt=\"\">\r\n    <div class=\"lightbox-caption\"><div class=\"lightbox-cat\" id=\"lbCat\"><\/div><div class=\"lightbox-name\" id=\"lbName\"><\/div><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 N\u00daMEROS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"numbers-band\" style=\"background:var(--navy-d)\">\r\n  <div class=\"nb-item\"><span class=\"nb-n\">100+<\/span><div class=\"nb-label\"><strong>Marcas criadas<\/strong>em 8 anos de est\u00fadio<\/div><\/div>\r\n  <div class=\"nb-item\"><span class=\"nb-n\">30+<\/span><div class=\"nb-label\"><strong>Ag\u00eancias parceiras<\/strong>em modelo White Label<\/div><\/div>\r\n  <div class=\"nb-item\"><span class=\"nb-n\">360\u00b0<\/span><div class=\"nb-label\"><strong>Cobertura criativa<\/strong>da estrat\u00e9gia \u00e0 execu\u00e7\u00e3o<\/div><\/div>\r\n  <div class=\"nb-item\"><span class=\"nb-n\">48h<\/span><div class=\"nb-label\"><strong>Prazo m\u00e9dio<\/strong>para criativos de campanha<\/div><\/div>\r\n<\/div>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LOGOS CARROSSEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"logos-section\" id=\"clientes\">\r\n  <div class=\"logos-label\">Empresas que j\u00e1 transformaram sua marca com a KROMA<\/div>\r\n  <div class=\"logos-track-wrap\">\r\n    <div class=\"logos-track\">\r\n      <!-- Lista completa \u2014 1\u00aa c\u00f3pia -->\r\n      <span class=\"logo-chip\">AL SULTAN<\/span><span class=\"logo-chip\">alkhadima<\/span><span class=\"logo-chip\">AMANDA BOTELHO ADV<\/span><span class=\"logo-chip\">AMIZADE CURITIBA<\/span><span class=\"logo-chip\">ARRUMAD\u00c3O<\/span><span class=\"logo-chip\">ASTRUM FINANCE<\/span><span class=\"logo-chip\">ATRIO<\/span><span class=\"logo-chip\">Acupuntura Veterin\u00e1ria<\/span><span class=\"logo-chip\">ASSINI<\/span><span class=\"logo-chip\">Banho de Ch\u00e1<\/span><span class=\"logo-chip\">Barcena<\/span><span class=\"logo-chip\">BEMAVI<\/span><span class=\"logo-chip\">BETEL ENGENHARIA<\/span><span class=\"logo-chip\">BNI<\/span><span class=\"logo-chip\">boxmob<\/span><span class=\"logo-chip\">CIRURGICA CURITIBA<\/span><span class=\"logo-chip\">CNC PLANEJADOS<\/span><span class=\"logo-chip\">CNHWEB<\/span><span class=\"logo-chip\">COL\u00c9GIO SU\u00cd\u00c7O DE CTBA<\/span><span class=\"logo-chip\">CSN CIMENTOS<\/span><span class=\"logo-chip\">CLUBE CURITIBANO<\/span><span class=\"logo-chip\">Casa do Caderno<\/span><span class=\"logo-chip\">Cris Franzon<\/span><span class=\"logo-chip\">DAVET<\/span><span class=\"logo-chip\">FLUENCE CONTABILIDADE<\/span><span class=\"logo-chip\">FOCUS<\/span><span class=\"logo-chip\">F\u00f3rmula de Recursos<\/span><span class=\"logo-chip\">GC Talentos<\/span><span class=\"logo-chip\">GRASSI ARQUITETURA<\/span><span class=\"logo-chip\">Grupo Fontanive<\/span><span class=\"logo-chip\">HANCOOK<\/span><span class=\"logo-chip\">HTSIGNS<\/span><span class=\"logo-chip\">Hotel San Marinho<\/span><span class=\"logo-chip\">IGREJA BATISTA MERC\u00caS<\/span><span class=\"logo-chip\">INOVA<\/span><span class=\"logo-chip\">KB SMART ENERGY<\/span><span class=\"logo-chip\">LADO A EDITORA<\/span><span class=\"logo-chip\">LEGATIZE<\/span><span class=\"logo-chip\">LF ADVOCACIA CRIMINAL<\/span><span class=\"logo-chip\">LM ENG<\/span><span class=\"logo-chip\">LMBS<\/span><span class=\"logo-chip\">LOGISTICCO<\/span><span class=\"logo-chip\">LUMI\u00c8RE<\/span><span class=\"logo-chip\">Luiz Carlos<\/span><span class=\"logo-chip\">MERCER<\/span><span class=\"logo-chip\">MERCER ADVG<\/span><span class=\"logo-chip\">MONERE ENGENHARIA<\/span><span class=\"logo-chip\">MONROE ADV<\/span><span class=\"logo-chip\">MUNDO A PARTE<\/span><span class=\"logo-chip\">NOVOTEL<\/span><span class=\"logo-chip\">ODONTO S\u00c3O LOUREN\u00c7O<\/span><span class=\"logo-chip\">Oriente Im\u00f3veis<\/span><span class=\"logo-chip\">PIEKAS ENGENHARIA<\/span><span class=\"logo-chip\">Piros<\/span><span class=\"logo-chip\">PONTO91<\/span><span class=\"logo-chip\">POPOLISKI SEGUROS<\/span><span class=\"logo-chip\">PROWL<\/span><span class=\"logo-chip\">PUZZLE ROOM<\/span><span class=\"logo-chip\">QLA<\/span><span class=\"logo-chip\">RAVING<\/span><span class=\"logo-chip\">RECONSTRU\u00c7\u00d5ES<\/span><span class=\"logo-chip\">REVOCON<\/span><span class=\"logo-chip\">Real Light<\/span><span class=\"logo-chip\">Renata Pereira<\/span><span class=\"logo-chip\">SEVEN SOLUTIONS IT<\/span><span class=\"logo-chip\">SONHO LAR IM\u00d3VEIS<\/span><span class=\"logo-chip\">SS ADVOCACIA<\/span><span class=\"logo-chip\">Sallezza<\/span><span class=\"logo-chip\">TALMEX<\/span><span class=\"logo-chip\">TOLEDO &amp; TOLEDO<\/span><span class=\"logo-chip\">TRANSBELLO<\/span><span class=\"logo-chip\">UNIT\u00c9 CONS\u00d3RCIOS<\/span><span class=\"logo-chip\">UNIVERSUM BOXING<\/span><span class=\"logo-chip\">VASPI<\/span><span class=\"logo-chip\">VILLA DORA ALIMENTOS<\/span><span class=\"logo-chip\">W-SOX<\/span>\r\n      <!-- 2\u00aa c\u00f3pia para loop -->\r\n      <span class=\"logo-chip\">AL SULTAN<\/span><span class=\"logo-chip\">alkhadima<\/span><span class=\"logo-chip\">AMANDA BOTELHO ADV<\/span><span class=\"logo-chip\">AMIZADE CURITIBA<\/span><span class=\"logo-chip\">ARRUMAD\u00c3O<\/span><span class=\"logo-chip\">ASTRUM FINANCE<\/span><span class=\"logo-chip\">ATRIO<\/span><span class=\"logo-chip\">Acupuntura Veterin\u00e1ria<\/span><span class=\"logo-chip\">ASSINI<\/span><span class=\"logo-chip\">Banho de Ch\u00e1<\/span><span class=\"logo-chip\">Barcena<\/span><span class=\"logo-chip\">BEMAVI<\/span><span class=\"logo-chip\">BETEL ENGENHARIA<\/span><span class=\"logo-chip\">BNI<\/span><span class=\"logo-chip\">boxmob<\/span><span class=\"logo-chip\">CIRURGICA CURITIBA<\/span><span class=\"logo-chip\">CNC PLANEJADOS<\/span><span class=\"logo-chip\">CNHWEB<\/span><span class=\"logo-chip\">COL\u00c9GIO SU\u00cd\u00c7O DE CTBA<\/span><span class=\"logo-chip\">CSN CIMENTOS<\/span><span class=\"logo-chip\">CLUBE CURITIBANO<\/span><span class=\"logo-chip\">Casa do Caderno<\/span><span class=\"logo-chip\">Cris Franzon<\/span><span class=\"logo-chip\">DAVET<\/span><span class=\"logo-chip\">FLUENCE CONTABILIDADE<\/span><span class=\"logo-chip\">FOCUS<\/span><span class=\"logo-chip\">F\u00f3rmula de Recursos<\/span><span class=\"logo-chip\">GC Talentos<\/span><span class=\"logo-chip\">GRASSI ARQUITETURA<\/span><span class=\"logo-chip\">Grupo Fontanive<\/span><span class=\"logo-chip\">HANCOOK<\/span><span class=\"logo-chip\">HTSIGNS<\/span><span class=\"logo-chip\">Hotel San Marinho<\/span><span class=\"logo-chip\">IGREJA BATISTA MERC\u00caS<\/span><span class=\"logo-chip\">INOVA<\/span><span class=\"logo-chip\">KB SMART ENERGY<\/span><span class=\"logo-chip\">LADO A EDITORA<\/span><span class=\"logo-chip\">LEGATIZE<\/span><span class=\"logo-chip\">LF ADVOCACIA CRIMINAL<\/span><span class=\"logo-chip\">LM ENG<\/span><span class=\"logo-chip\">LMBS<\/span><span class=\"logo-chip\">LOGISTICCO<\/span><span class=\"logo-chip\">LUMI\u00c8RE<\/span><span class=\"logo-chip\">Luiz Carlos<\/span><span class=\"logo-chip\">MERCER<\/span><span class=\"logo-chip\">MERCER ADVG<\/span><span class=\"logo-chip\">MONERE ENGENHARIA<\/span><span class=\"logo-chip\">MONROE ADV<\/span><span class=\"logo-chip\">MUNDO A PARTE<\/span><span class=\"logo-chip\">NOVOTEL<\/span><span class=\"logo-chip\">ODONTO S\u00c3O LOUREN\u00c7O<\/span><span class=\"logo-chip\">Oriente Im\u00f3veis<\/span><span class=\"logo-chip\">PIEKAS ENGENHARIA<\/span><span class=\"logo-chip\">Piros<\/span><span class=\"logo-chip\">PONTO91<\/span><span class=\"logo-chip\">POPOLISKI SEGUROS<\/span><span class=\"logo-chip\">PROWL<\/span><span class=\"logo-chip\">PUZZLE ROOM<\/span><span class=\"logo-chip\">QLA<\/span><span class=\"logo-chip\">RAVING<\/span><span class=\"logo-chip\">RECONSTRU\u00c7\u00d5ES<\/span><span class=\"logo-chip\">REVOCON<\/span><span class=\"logo-chip\">Real Light<\/span><span class=\"logo-chip\">Renata Pereira<\/span><span class=\"logo-chip\">SEVEN SOLUTIONS IT<\/span><span class=\"logo-chip\">SONHO LAR IM\u00d3VEIS<\/span><span class=\"logo-chip\">SS ADVOCACIA<\/span><span class=\"logo-chip\">Sallezza<\/span><span class=\"logo-chip\">TALMEX<\/span><span class=\"logo-chip\">TOLEDO &amp; TOLEDO<\/span><span class=\"logo-chip\">TRANSBELLO<\/span><span class=\"logo-chip\">UNIT\u00c9 CONS\u00d3RCIOS<\/span><span class=\"logo-chip\">UNIVERSUM BOXING<\/span><span class=\"logo-chip\">VASPI<\/span><span class=\"logo-chip\">VILLA DORA ALIMENTOS<\/span><span class=\"logo-chip\">W-SOX<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA FINAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"cta-final\">\r\n  <!-- Part\u00edculas de brilho -->\r\n  <div class=\"cta-particles\">\r\n    <span style=\"width:8px;height:8px;top:15%;left:10%;--d:3.2s;--delay:0s\"><\/span>\r\n    <span style=\"width:5px;height:5px;top:25%;left:20%;--d:4s;--delay:.8s\"><\/span>\r\n    <span style=\"width:6px;height:6px;top:60%;left:8%;--d:3.5s;--delay:1.2s\"><\/span>\r\n    <span style=\"width:9px;height:9px;top:40%;right:12%;--d:4.2s;--delay:.3s\"><\/span>\r\n    <span style=\"width:5px;height:5px;top:20%;right:22%;--d:3s;--delay:1.6s\"><\/span>\r\n    <span style=\"width:7px;height:7px;top:70%;right:18%;--d:3.8s;--delay:.6s\"><\/span>\r\n    <span style=\"width:4px;height:4px;top:80%;left:35%;--d:4.5s;--delay:2s\"><\/span>\r\n    <span style=\"width:6px;height:6px;top:10%;left:50%;--d:3.3s;--delay:1s\"><\/span>\r\n    <span style=\"width:8px;height:8px;top:85%;right:40%;--d:3.6s;--delay:.4s\"><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"cta-tag\"><span class=\"cta-tag-pill\">Vamos come\u00e7ar<\/span><\/div>\r\n  <h2 class=\"cta-h2\">Sua marca<br>merece design<br><em>de verdade.<\/em><\/h2>\r\n  <p class=\"cta-sub\">Sem compromisso. Em 30 minutos mostramos exatamente o que o est\u00fadio pode fazer pelo seu neg\u00f3cio \u2014 ou pelo da sua ag\u00eancia.<\/p>\r\n  <div class=\"cta-actions\">\r\n    <a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\" class=\"btn-white\">\r\n      <svg width=\"15\" height=\"15\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2.2\"><path d=\"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z\"\/><\/svg>\r\n      Agendar via WhatsApp\r\n    <\/a>\r\n    <a href=\"https:\/\/www.instagram.com\/agenciakroma\" target=\"_blank\" class=\"btn-ghost-w\">Ver portfolio no Instagram<\/a>\r\n  <\/div>\r\n  <p class=\"cta-note\">Primeira reuni\u00e3o gratuita \u00b7 Sem compromisso \u00b7 Resposta em at\u00e9 2h<\/p>\r\n<\/section>\r\n\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<footer class=\"footer\">\r\n  <div class=\"footer-top\">\r\n    <div>\r\n      <a href=\"#\" class=\"ft-logo\">\r\n        <img decoding=\"async\"\r\n          src=\"https:\/\/agenciakroma.com.br\/wp-content\/uploads\/2026\/04\/logo_transp_branca-e1777495005191.png\"\r\n          alt=\"KROMA Studio\"\r\n          style=\"height:42px;width:auto\"\r\n          onerror=\"this.style.display='none';this.insertAdjacentHTML('afterend','<span style=\\'font-size:22px;font-weight:900;color:white;letter-spacing:-.5px\\'>kroma<\/span>')\">\r\n      <\/a>\r\n      <p class=\"ft-desc\">Mais que marketing \u2014 um sistema completo de cria\u00e7\u00e3o. Est\u00fadio de Design especializado em Branding, Criativos para Ag\u00eancias, Webdesign e White Label.<\/p>\r\n      <div class=\"ft-seal\">Design e Estrat\u00e9gia para o Futuro<\/div>\r\n      <div class=\"ft-socials\">\r\n        <a href=\"https:\/\/www.instagram.com\/agenciakroma\" class=\"ft-soc\" aria-label=\"Instagram\" target=\"_blank\"><svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\" stroke=\"none\"\/><\/svg><\/a>\r\n        <a href=\"https:\/\/www.linkedin.com\/in\/iberajunior\" class=\"ft-soc\" aria-label=\"LinkedIn\"><svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" viewBox=\"0 0 24 24\"><path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z\"\/><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg><\/a>\r\n        <a href=\"https:\/\/www.facebook.com\/profile.php?id=100092746599522\" target=\"_blank\" class=\"ft-soc\" aria-label=\"Facebook\"><svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M22 12.07c0-5.52-4.48-10-10-10s-10 4.48-10 10c0 4.99 3.66 9.12 8.44 9.87v-6.98h-2.54v-2.9h2.54V9.79c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.22.19 2.22.19v2.44h-1.25c-1.24 0-1.63.77-1.63 1.56v1.86h2.78l-.44 2.9h-2.34v6.98c4.78-.75 8.44-4.88 8.44-9.87z\"\/><\/svg><\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"ft-col-title\">Servi\u00e7os<\/div>\r\n      <ul class=\"ft-links\">\r\n        <li><a href=\"\/branding\">Branding & Identidade<\/a><\/li>\r\n        <li><a href=\"\/criativo-agencias\">Criativos para Ag\u00eancias<\/a><\/li>\r\n        <li><a href=\"\/webdesign\">Webdesign & UI\/UX<\/a><\/li>\r\n        <li><a href=\"\/editorial\">Design para Editoras<\/a><\/li>\r\n        <li><a href=\"\/white-label\">White Label<\/a><\/li>\r\n        <li><a href=\"\/motion\">Motion Design<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"ft-col-title\">Est\u00fadio<\/div>\r\n      <ul class=\"ft-links\">\r\n        <li><a href=\"#\">Sobre a KROMA<\/a><\/li>\r\n        <li><a href=\"https:\/\/www.instagram.com\/agenciakroma\" target=\"_blank\">Portfolio<\/a><\/li>\r\n        <li><a href=\"#\">Metodologia<\/a><\/li>\r\n        <li><a href=\"#\">Blog<\/a><\/li>\r\n        <li><a href=\"#\">Carreiras<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n    <div>\r\n      <div class=\"ft-col-title\">Contato<\/div>\r\n      <ul class=\"ft-links\">\r\n        <li><a href=\"mailto:contato@agenciakroma.com.br\">contato@agenciakroma.com.br<\/a><\/li>\r\n        <li><a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\">+55 41 99122-4090<\/a><\/li>\r\n        <li><a href=\"#\">Curitiba, PR \u00b7 Brasil<\/a><\/li>\r\n        <li><a href=\"https:\/\/www.instagram.com\/agenciakroma\" target=\"_blank\">@agenciakroma<\/a><\/li>\r\n        <li><a href=\"http:\/\/wa.me\/41991224090\" target=\"_blank\">Agendar Diagn\u00f3stico<\/a><\/li>\r\n      <\/ul>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"footer-bottom\">\r\n    <div class=\"ft-copy\">\u00a9 2026 Est\u00fadio KROMA. Todos os direitos reservados.<\/div>\r\n    <div class=\"ft-gbar\"><\/div>\r\n  <\/div>\r\n<\/footer>\r\n\r\n\r\n<script>\r\n\/* \u2550\u2550 FILTRO DO PORTFOLIO \u2550\u2550 *\/\r\nfunction filterPort(btn, cat) {\r\n  document.querySelectorAll('.pf-btn').forEach(b => b.classList.remove('active'));\r\n  btn.classList.add('active');\r\n  document.querySelectorAll('.port-item').forEach(item => {\r\n    const match = cat === 'all' || item.dataset.cat === cat;\r\n    item.style.opacity = match ? '1' : '0.2';\r\n    item.style.pointerEvents = match ? 'auto' : 'none';\r\n  });\r\n}\r\n\r\n\/* \u2550\u2550 LIGHTBOX \u2550\u2550 *\/\r\nconst allItems = () => Array.from(document.querySelectorAll('.port-item'));\r\nlet currentIdx = 0;\r\n\r\nfunction openLB(el) {\r\n  const items = allItems();\r\n  currentIdx = items.indexOf(el);\r\n  loadLB(items[currentIdx]);\r\n  document.getElementById('lightbox').classList.add('open');\r\n  document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction loadLB(el) {\r\n  const img = el.querySelector('img');\r\n  document.getElementById('lbImg').src = img.src;\r\n  document.getElementById('lbImg').alt = el.dataset.name || '';\r\n  document.getElementById('lbCat').textContent = el.dataset.catLabel || el.dataset.cat || '';\r\n  document.getElementById('lbName').textContent = el.dataset.name || '';\r\n}\r\n\r\nfunction navLB(dir) {\r\n  const items = allItems();\r\n  currentIdx = (currentIdx + dir + items.length) % items.length;\r\n  loadLB(items[currentIdx]);\r\n}\r\n\r\nfunction closeLB() {\r\n  document.getElementById('lightbox').classList.remove('open');\r\n  document.body.style.overflow = '';\r\n}\r\n\r\nfunction closeLBOutside(e) {\r\n  if (e.target === document.getElementById('lightbox')) closeLB();\r\n}\r\n\r\ndocument.addEventListener('keydown', e => {\r\n  const lb = document.getElementById('lightbox');\r\n  if (!lb.classList.contains('open')) return;\r\n  if (e.key === 'Escape') closeLB();\r\n  if (e.key === 'ArrowRight') navLB(1);\r\n  if (e.key === 'ArrowLeft') navLB(-1);\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>KROMA Studio \u2014 Design que Move Neg\u00f3cios Servi\u00e7os Portfolio White Label Clientes Falar com a equipe Est\u00fadio de Design \u00b7 Curitiba, Brasil Design que move neg\u00f3cios. Somos um est\u00fadio especialista em criativos para ag\u00eancias de marketing, webdesign, editoras e projetos white label. Excel\u00eancia visual onde sua marca precisa crescer. Agendar Diagn\u00f3stico Gratuito Ver portfolio 100+Marcas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":115,"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/agenciakroma.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}