:root{--red:#e30f1b;--red-d:#a30911;--bg:#070707;--bg2:#101010;--bg3:#171717;--line:#262626;--tx:#f4f4f4;--mut:#8d8d8d;--w:#fff;
--display:"Barlow","Helvetica Neue",Arial,sans-serif;--body:"Barlow","Helvetica Neue",Arial,sans-serif;--logo:"Barlow Condensed","Arial Narrow",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--tx);font-family:var(--body);font-size:1.06rem;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red)}
h1,h2,h3{font-family:var(--display);text-transform:none;line-height:1.02;letter-spacing:-.01em;font-weight:700}
h2{font-size:clamp(2.4rem,5.6vw,4.8rem);margin-bottom:22px}
h2 em{font-style:normal;color:var(--red)}
.lead{color:var(--mut);max-width:560px;font-size:1.05rem}
section{padding:120px 0;position:relative}

/* Cursor glow */
.glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(227,15,27,.13),transparent 65%);transform:translate(-50%,-50%);left:50%;top:50%;transition:opacity .3s}

/* Progress bar */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:200}

/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.35s}
header.solid{background:rgba(7,7,7,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;height:78px}
.logo img{height:58px;width:auto;display:block;transition:transform .3s,filter .3s}
.logo:hover img{transform:scale(1.04);filter:drop-shadow(0 0 14px rgba(227,15,27,.45))}
.nav-r{display:flex;align-items:center;gap:22px}
.pill{border:1px solid var(--red);background:var(--red);color:#fff;padding:12px 24px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;transition:.25s;display:inline-block;cursor:pointer}
.pill:hover{background:transparent}
.pill.out{background:transparent;border-color:#555}
.pill.out:hover{border-color:#fff;background:#fff;color:#000}
.burger{width:46px;height:46px;border:1px solid #444;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.25s}
.burger:hover{border-color:var(--red)}
.burger i{display:block;width:20px;height:2px;background:#fff;transition:.3s}
.burger.x i:first-child{transform:translateY(4px) rotate(45deg)}
.burger.x i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Fullscreen menu */
.menu{position:fixed;inset:0;background:var(--bg);z-index:90;display:flex;align-items:center;clip-path:circle(0 at calc(100% - 60px) 40px);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.menu.open{clip-path:circle(150% at calc(100% - 60px) 40px)}
.menu ul{list-style:none}
.menu li{overflow:hidden}
.menu a{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(2.4rem,7vw,5.4rem);line-height:1.08;color:#fff;transition:.3s}
.menu a:hover{color:var(--red);padding-left:22px}
.menu a span{font-size:.9rem;-webkit-text-stroke:0;color:var(--red);margin-right:16px;letter-spacing:.2em;vertical-align:top}

/* Hero */
.hero{min-height:100vh;display:flex;align-items:flex-end;padding:140px 0 70px;overflow:hidden;background:radial-gradient(ellipse at 75% 30%,#2a0508 0%,transparent 55%),var(--bg)}
.hero .gear{position:absolute;right:-8vw;top:50%;width:min(56vw,700px);transform:translateY(-50%);opacity:.9;animation:spin 60s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.streaks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.streaks i{position:absolute;height:2px;width:30vw;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.0;animation:dash 4.5s linear infinite}
@keyframes dash{0%{transform:translateX(-40vw);opacity:0}15%{opacity:.7}100%{transform:translateX(130vw);opacity:0}}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(3.6rem,12.5vw,11rem);letter-spacing:-.025em;line-height:.92;font-weight:700;margin:6px 0 28px}
.hero h1 .o{color:#fff}
.hero h1 .r{color:var(--red)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.hero-row p{max-width:480px;color:#bdbdbd;font-size:1.08rem}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.scroll{position:absolute;right:28px;bottom:26px;writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.3em;color:var(--mut);z-index:2}

/* Marquee */
.marq{border-block:1px solid var(--line);overflow:hidden;background:var(--bg2);padding:20px 0}
.marq div{display:flex;width:max-content;animation:mq 28s linear infinite}
.marq span{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;padding:0 26px;white-space:nowrap}
.marq span:nth-child(even){color:var(--red)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Two worlds */
.worlds{display:flex;height:78vh;min-height:520px;border-block:1px solid var(--line)}
.world{flex:1;position:relative;padding:44px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transition:flex .7s cubic-bezier(.7,0,.2,1);border-right:1px solid var(--line);cursor:pointer}
.world:last-child{border:0}
.world:hover{flex:1.9}
.world::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.9)),var(--bgimg);opacity:1;transition:.6s}
.world.a{--bgimg:repeating-linear-gradient(135deg,#131313 0 14px,#0f0f0f 14px 28px)}
.world.b{--bgimg:radial-gradient(circle at 70% 20%,#3a060a,#0c0c0c 70%)}
.world .n{position:absolute;top:28px;left:44px;font-family:var(--display);font-size:8rem;font-weight:800;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px #333;line-height:1;transition:.5s}
.world:hover .n{-webkit-text-stroke-color:var(--red)}
.world *{position:relative}
.world h3{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-bottom:10px}
.world p{color:#bbb;max-width:420px;max-height:0;opacity:0;overflow:hidden;transition:.6s}
.world:hover p{max-height:140px;opacity:1;margin-bottom:18px}
.world .go{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--red)}

/* Services list */
.svc-wrap{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start}
.svc-wrap .sticky{position:sticky;top:120px}
.svc{border-top:1px solid var(--line)}
.svc-i{border-bottom:1px solid var(--line);padding:26px 0;cursor:pointer;transition:.3s}
.svc-h{display:flex;align-items:center;gap:22px}
.svc-h .no{font-size:.78rem;letter-spacing:.2em;color:var(--red);font-weight:700;width:34px}
.svc-h h3{font-size:clamp(1.6rem,3vw,2.5rem);flex:1;transition:.3s}
.svc-h .pl{width:36px;height:36px;border:1px solid #444;display:grid;place-items:center;font-size:1.3rem;transition:.3s}
.svc-i:hover h3{color:var(--red);padding-left:10px}
.svc-i.open .pl{background:var(--red);border-color:var(--red);transform:rotate(45deg)}
.svc-b{max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s;padding-left:56px;color:var(--mut)}
.svc-i.open .svc-b{max-height:240px;padding-top:14px}
.svc-b ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.svc-b li{border:1px solid #333;padding:6px 14px;font-size:.78rem;color:#ccc;letter-spacing:.04em}

/* Projects carousel */
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:46px}
.arrows{display:flex;gap:10px}
.arrows button{width:54px;height:54px;border:1px solid #444;background:transparent;color:#fff;font-size:1.3rem;cursor:pointer;transition:.25s}
.arrows button:hover{background:var(--red);border-color:var(--red)}
.pcard{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#1c1c1c,#0b0b0b);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;transition:.4s}
.pcard:hover{border-color:var(--red)}
.pcard::before{content:attr(data-n);position:absolute;top:10px;right:20px;font-family:var(--display);font-size:7rem;font-weight:800;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px #2c2c2c;line-height:1}
.pcard .ph{position:absolute;inset:0;display:grid;place-items:center;color:#3b3b3b;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:30px}
.pcard h3{font-size:1.9rem;position:relative}
.pcard span{color:var(--mut);font-size:.88rem;position:relative}
.pcard::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--red);transition:.5s}
.pcard:hover::after{width:100%}

/* Turnery */
.turn{background:var(--bg2);border-block:1px solid var(--line)}
.turn-g{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.blueprint{aspect-ratio:1;border:1px solid var(--line);position:relative;background:
linear-gradient(var(--line) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/40px 40px,#0a0a0a;display:grid;place-items:center;overflow:hidden}
.blueprint svg{width:78%;height:78%}
.blueprint .dim{stroke-dasharray:6 6;animation:dm 12s linear infinite}
@keyframes dm{to{stroke-dashoffset:-240}}
.steps3{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--line)}
.steps3 div{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps3 b{font-family:var(--display);font-size:1.5rem;color:var(--red);min-width:46px}
.steps3 span{color:#cfcfcf}

/* Store */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
.sitem{background:var(--bg);padding:34px;transition:.3s;position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.sitem:hover{background:var(--bg3)}
.tag{font-size:.66rem;letter-spacing:.24em;border:1px solid var(--red);color:var(--red);padding:4px 10px;align-self:flex-start;text-transform:uppercase;font-weight:700}
.sitem h3{font-size:1.7rem;margin:50px 0 8px}
.sitem p{color:var(--mut);font-size:.9rem;margin-bottom:20px}
.sitem a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--red);align-self:flex-start;padding-bottom:3px}

/* Process */
.proc{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px;border-top:1px solid var(--line)}
.step{padding:34px 22px 0 0;position:relative}
.step::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;background:var(--red);transform:rotate(45deg)}
.step b{font-family:var(--display);font-size:3.8rem;font-weight:800;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px #444;line-height:1;display:block;transition:.4s}
.step:hover b{-webkit-text-stroke-color:var(--red);color:var(--red)}
.step h3{font-size:1.3rem;margin:8px 0}
.step p{color:var(--mut);font-size:.88rem}

/* Quote */
.quote{text-align:center;padding:150px 0;background:radial-gradient(ellipse at center,#1e0407,transparent 70%)}
.quote blockquote{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.04;max-width:1000px;margin:0 auto}
.quote blockquote em{font-style:normal;color:var(--red)}
.quote cite{display:block;margin-top:28px;color:var(--mut);font-style:normal;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase}

/* Contact */
.cg{display:grid;grid-template-columns:1.2fr 1fr;gap:70px}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
.fld{position:relative}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #444;color:#fff;padding:22px 0 10px;font:inherit;outline:none;border-radius:0;transition:.3s}
.fld select option{background:#111}
.fld label{position:absolute;left:0;top:22px;color:var(--mut);font-size:.9rem;pointer-events:none;transition:.25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--red)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label,.fld select:valid+label{top:0;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.info p{margin-bottom:26px;color:#d6d6d6}
.info strong{display:block;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.note{font-size:.78rem;color:var(--mut)}

/* Footer */
footer{padding:80px 0 30px;border-top:1px solid var(--line);overflow:hidden}
.big{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(3.4rem,16vw,14rem);line-height:.85;color:transparent;-webkit-text-stroke:1.5px #2a2a2a;white-space:nowrap;transition:.5s;margin-bottom:40px}
.big:hover{-webkit-text-stroke-color:var(--red)}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:var(--mut);font-size:.82rem}

.wa{position:fixed;right:20px;bottom:20px;z-index:80;background:#25d366;color:#04210e;border-radius:60px;padding:14px 22px;font-weight:800;font-size:.82rem;letter-spacing:.08em;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:.25s}
.wa:hover{transform:translateY(-3px)}

/* Reveal */
.rv{opacity:0;transform:translateY(44px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

@media(max-width:900px){
 .logo img{height:44px}
 section{padding:80px 0}
 .worlds{flex-direction:column;height:auto}
 .world{min-height:340px}
 .world p{max-height:140px;opacity:1;margin-bottom:18px}
 .svc-wrap,.turn-g,.cg{grid-template-columns:1fr;gap:40px}
 .svc-wrap .sticky{position:static}
 .proc{grid-template-columns:1fr 1fr;gap:34px 0;border-top:0}
 .step{border-top:1px solid var(--line)}
 .nav-r .pill{display:none}
 .scroll{display:none}
 form{grid-template-columns:1fr}
 .hero .gear{opacity:.35}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* Medios cargados dinámicamente (ver assets/js/main.js) */
.has-img::before{background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.88)),var(--bgimg-url) center/cover no-repeat!important}
.pcard.has-img{background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.88)),var(--bgimg-url) center/cover no-repeat}
.pcard.has-img .ph{display:none}
.pcard.has-img::before{display:none}
.blueprint.has-img{background:var(--bgimg-url) center/cover no-repeat}
.blueprint.has-img svg{display:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;z-index:0}
.hero.has-video .gear{opacity:.25}
.hero.has-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.55),rgba(7,7,7,.2) 40%,var(--bg));z-index:1}

/* Carrusel Swiper: profundidad con opacidad y escala */
.proj-swiper{padding:0 0 70px;overflow:hidden;cursor:grab}
.proj-swiper:active{cursor:grabbing}
.proj-swiper .swiper-slide{width:min(430px,80vw);height:auto;opacity:.32;transform:scale(.9);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s;filter:grayscale(.6)}
.proj-swiper .swiper-slide-active{opacity:1;transform:scale(1);filter:none}
.proj-swiper .swiper-slide-next,.proj-swiper .swiper-slide-prev{opacity:.55}
.proj-swiper .swiper-pagination{bottom:0;top:auto;left:28px;right:28px;width:auto;height:2px;background:var(--line)}
.proj-swiper .swiper-pagination-progressbar-fill{background:var(--red)}
.arrows button.swiper-button-disabled{opacity:.3;pointer-events:none}

/* Titulares por palabras (GSAP) */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.2em;margin-bottom:-.2em}
.sw>i{display:inline-block;font-style:normal;will-change:transform}
