:root{--ink:#0a0a0a;--paper:#f3f1ea;--white:#fff;--blue:#2C67C5;--line:rgba(0,0,0,.16);--pad:clamp(22px,5vw,76px);--r:22px;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--sans)}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.header{height:84px;position:absolute;inset:0 0 auto;z-index:5;padding:0 var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff}
.brand{font-weight:800;letter-spacing:-.05em}
.brand span{font-weight:400}
.nav{display:flex;gap:18px;font-size:12px;white-space:nowrap}
.nav a{opacity:.8}
.nav a:hover{opacity:1}
.nav-cta{justify-self:end;background:var(--blue);padding:12px 16px;border-radius:999px;font-size:12px;font-weight:800}
.menu-button{display:none;background:none;border:0;color:inherit;width:44px;height:44px}.menu-button span{display:block;width:22px;height:1px;background:currentColor;margin:6px auto}.mobile-menu{display:none}
.hero{min-height:78svh;padding:160px var(--pad) 62px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;color:#fff;background:#111}
.hero-bg,.hero-bg:after{position:absolute;inset:0}
.hero-bg{background:var(--image) center/cover}
.hero-bg:after{content:"";background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.32)),linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%)}
.hero-content{position:relative;z-index:1;max-width:940px}
.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:900}
.hero h1,.heading{font-size:clamp(56px,9vw,142px);letter-spacing:-.08em;line-height:.82;text-transform:uppercase;margin:18px 0 26px}
.hero h1 em,.heading em{font-family:Georgia,serif;text-transform:none;font-weight:400}
.hero p{font-size:clamp(17px,1.8vw,23px);line-height:1.42;max-width:650px;margin:0;color:rgba(255,255,255,.86)}
.jump{position:absolute;z-index:2;right:var(--pad);bottom:55px;font-size:12px;font-weight:800;border-bottom:1px solid #fff;padding-bottom:7px}
.band{background:var(--blue);color:#fff;padding:14px 0;overflow:hidden;font-size:14px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.band div{width:max-content;animation:move 22s linear infinite}
@keyframes move{to{transform:translateX(-30%)}
}
section{padding:120px var(--pad)}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;background:var(--paper)}
.intro .heading{font-size:clamp(46px,6vw,90px);margin:14px 0 0}
.intro p{font-size:18px;line-height:1.58;margin:0;max-width:580px}
.services{background:var(--paper)}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.service{background:var(--paper);padding:32px;min-height:200px;position:relative}
.service b{font-size:11px;color:var(--blue);letter-spacing:.12em}
.service h3{font-size:clamp(29px,3vw,48px);letter-spacing:-.06em;line-height:.94;margin:24px 0 12px}
.service p{font-size:14px;line-height:1.5;max-width:420px;margin:0;color:#4a4a4a}
.service i{font-style:normal;position:absolute;right:30px;top:26px;font-size:24px}
.process{background:#0d0d0d;color:#fff}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid #404040}
.step{border-right:1px solid #404040;padding:25px 25px 50px 0;margin-right:25px}
.step b{font-size:11px;letter-spacing:.14em;color:#7ea5e8}
.step h3{font-size:27px;letter-spacing:-.05em;margin:22px 0 12px}
.step p{font-size:14px;line-height:1.5;color:#bbb;margin:0}
.work{background:var(--paper)}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:30px}
.work-head h2{font-size:clamp(42px,5vw,74px);line-height:.9;letter-spacing:-.07em;margin:14px 0 0}
.work-head p{max-width:430px;font-size:16px;line-height:1.5;margin:0}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:340px;gap:18px;margin-top:52px}
.work-card{grid-column:span 5;position:relative;overflow:hidden;border-radius:var(--r);color:#fff;background:#222}
.work-card.wide{grid-column:span 7}
.work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 65%)}
.work-card div{position:absolute;z-index:1;left:24px;bottom:22px}
.work-card span{font-size:10px;letter-spacing:.14em;font-weight:900}
.work-card h3{font-size:30px;letter-spacing:-.05em;margin:9px 0 0}
.cta{background:var(--blue);color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end}
.cta h2{font-size:clamp(48px,7vw,104px);letter-spacing:-.08em;line-height:.84;margin:18px 0 0}
.cta p{font-size:18px;line-height:1.55;margin:0 0 25px}
.button{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:15px 20px;font-size:13px;font-weight:900}
.footer{background:#080808;color:#aaa;padding:35px var(--pad);display:flex;justify-content:space-between;font-size:11px}
.accent{color:var(--blue)}
@media(max-width:800px){.header{grid-template-columns:1fr auto;height:70px}
.nav{display:none}
.header .nav-cta{display:none}.menu-button{display:block}.mobile-menu{position:fixed;inset:70px 0 auto;background:var(--blue);color:#fff;z-index:4;padding:30px var(--pad);display:flex;flex-direction:column;gap:18px;transform:translateY(-140%);transition:.35s}.mobile-menu.open{transform:none}.mobile-menu a{font-size:28px;font-weight:900;letter-spacing:-.04em}
.hero{min-height:74svh;padding-top:125px}
.jump{display:none}
.intro,.cta{grid-template-columns:1fr;gap:34px}
.service-grid{grid-template-columns:1fr}
.process-grid{grid-template-columns:1fr}
.step{border-right:0;border-bottom:1px solid #404040;padding-bottom:25px;margin-right:0}
.work-grid{grid-template-columns:1fr;grid-auto-rows:310px}
.work-card,.work-card.wide{grid-column:1}
.footer{gap:20px;flex-direction:column}
.header .nav-cta{font-size:11px;padding:10px 13px}
}
/* Visual service cards and header correction */
.header{position:fixed;background:rgba(10,10,10,.74);backdrop-filter:blur(12px)}
.hero{margin-top:0}
.service{background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.14)),var(--service-image) center/cover;color:#fff}
.service b{color:#bcd4ff}.service p{color:rgba(255,255,255,.82)}
.branding .service:nth-child(1){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/02/Avtek-manual-de-identidad_Mesa-de-trabajo-1.jpg')}.branding .service:nth-child(2){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/02/Avtek-manual-de-identidad-03.jpg')}.branding .service:nth-child(3){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2019/12/diseno-3.jpg')}.branding .service:nth-child(4){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/02/011820-Leslie-Dice-1024x576.jpg')}.branding .service:nth-child(5){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/03/smartmockups_k7u1mxey-1024x717.jpg')}.branding .service:nth-child(6){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/02/Avtek-manual-de-identidad-15.jpg')}
.audiovisual .service:nth-child(1){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/01/thumbnail-Enervatio.jpg')}.audiovisual .service:nth-child(2){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/01/brigadistas.jpg')}.audiovisual .service:nth-child(3){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/01/thumbnail-nattura.jpg')}.audiovisual .service:nth-child(4){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/01/infografico-tec-italy.jpg')}.audiovisual .service:nth-child(5){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/01/imac-sociales.jpg')}.audiovisual .service:nth-child(6){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/07/polaca.jpg')}
.digital .service:nth-child(1){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/02/diseno-web-300x254.png')}.digital .service:nth-child(2){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/02/realidad-virtual-300x254.png')}.digital .service:nth-child(3){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/07/arena.jpg')}.digital .service:nth-child(4){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/07/detail3.png')}.digital .service:nth-child(5){--service-image:url('https://colectivocreativo.mx/wp-content/uploads/2020/07/detail2.png')}.digital .service:nth-child(6){--service-image:url('../digital-ai/digital-ai-hero.png')}
.gallery-filters{display:flex;gap:10px;flex-wrap:wrap;margin:46px 0 24px}.gallery-filter{border:1px solid #bbb;border-radius:999px;background:transparent;padding:10px 14px;font:800 11px var(--sans);cursor:pointer}.gallery-filter.active{background:var(--ink);border-color:var(--ink);color:#fff}.video-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.video-card{display:block;position:relative;min-height:290px;overflow:hidden;border-radius:var(--r);background:#222;color:#fff}.video-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent 65%)}.video-card div{position:absolute;z-index:1;left:20px;right:20px;bottom:18px}.video-card span{font-size:10px;font-weight:900;letter-spacing:.13em}.video-card h3{font-size:25px;line-height:.95;letter-spacing:-.05em;margin:9px 0 0}.video-card.hidden{display:none}
@media(max-width:800px){.video-gallery{grid-template-columns:1fr}}