:root{
  --black:#111111;
  --cream:#fffdf7;
  --red:#ff3131;
  --orange:#fe6202;
  --yellow:#fbc217;
  --soft-yellow:#fff1b6;
  --grid:rgba(17,17,17,.09);
  --line:rgba(17,17,17,.16);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--black);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.grid-bg{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:20}
.brand img{width:82px;height:58px;object-fit:contain}
.desktop-nav{display:flex;gap:28px;align-items:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.desktop-nav a{position:relative;padding:10px 12px;isolation:isolate}
.desktop-nav a::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:var(--yellow);transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease;z-index:-1}
.desktop-nav a:hover::before{width:42px;height:42px}
.menu-btn{display:none;border:1px solid var(--black);background:white;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:700}
.hero{border-bottom:1px solid var(--line)}
.hero-inner{min-height:650px;position:relative;display:flex;flex-direction:column;justify-content:center;padding:72px 0 60px}
.hero-kicker{align-self:flex-start;background:var(--orange);color:#fff;padding:9px 13px;font-size:12px;font-weight:800;letter-spacing:.08em;margin-bottom:28px}
.hero h1{font-size:clamp(62px,9.2vw,128px);line-height:.84;letter-spacing:-.075em;margin:0;max-width:1080px}
.hero-main{font-weight:900;font-family:Inter,Arial,sans-serif}
.hero-serif{font-family:"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.05em}
.hero-bottom{margin-top:46px;display:grid;grid-template-columns:minmax(0,630px) auto;gap:32px;align-items:end}
.hero-bottom p{font-size:18px;line-height:1.55;max-width:640px}
.primary-btn{justify-self:end;background:var(--orange);color:white;border-radius:999px;padding:15px 20px;font-weight:700;font-size:14px;display:flex;gap:18px;align-items:center}
.primary-btn span{font-size:20px}
.ticker{overflow:hidden;background:var(--yellow);height:46px;display:flex;align-items:center}
.ticker-track{display:flex;gap:20px;white-space:nowrap;min-width:max-content;font-size:11px;font-weight:800;letter-spacing:.1em;animation:marquee 30s linear infinite}
.ticker-track i{font-style:normal}@keyframes marquee{to{transform:translateX(-33.333%)}}
.section{padding:100px 0}
.section-tag{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.15em;border:1px solid var(--black);border-radius:999px;padding:7px 10px;background:white;margin-bottom:16px}
.split-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;margin-bottom:44px}
.section-heading h2,.studio-title h2,.contact-intro h2{font-size:clamp(46px,6vw,80px);line-height:.9;letter-spacing:-.065em;margin:0;font-weight:900}
.section-heading h2 em,.studio-title h2 em,.contact-intro h2 em{font-family:"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.04em}
.spaced-em{display:block;margin-top:10px;letter-spacing:.01em}
.split-heading>p{font-size:17px;line-height:1.55;color:var(--orange)}
.project-viewport{
  width:100%;
  overflow:hidden;
  --project-gap:18px;
  --project-half-gap:9px;
}
.project-track{
  display:flex;
  gap:var(--project-gap);
  width:max-content;
  padding:8px 4px 12px;
  animation:projects-marquee 32s linear infinite;
  will-change:transform;
}
@keyframes projects-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - var(--project-half-gap)),0,0)}
}
.project-link{display:block;color:inherit;flex:0 0 340px}
.project-card{border:none;border-radius:26px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;background:var(--soft-yellow);transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 0 0 1px rgba(17,17,17,.06) inset}
.project-fitz{flex:0 0 340px}
.project-mensu,.project-woox,.project-fitz,.project-plickme,.project-bellab{background:var(--soft-yellow)}
.project-link:hover .project-card,.project-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(17,17,17,.08),0 0 0 1px rgba(17,17,17,.06) inset}
.project-topline{padding:16px 20px 10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--black)}
.project-logo-stage{height:150px;display:flex;align-items:center;justify-content:center;padding:18px;margin:0 16px;background-color:var(--cream);border-radius:18px}
.project-logo-stage img{width:100%;height:100%;max-width:180px;max-height:96px;object-fit:contain}
.project-copy{margin-top:auto;padding:20px 22px 24px;color:var(--black)}
.project-copy h3{font-family:Inter,Arial,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.04em;margin:0 0 10px;color:var(--black)}
.project-copy p{font-size:14px;line-height:1.55;min-height:118px}
.services{border-block:1px solid var(--line)}
.centered-heading{text-align:center;max-width:860px;margin:0 auto 48px}.centered-heading p{font-size:17px;margin-top:18px}
.service-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service-card{border:1px solid rgba(17,17,17,.18);border-radius:var(--radius);padding:24px;min-height:340px;display:flex;flex-direction:column;background:var(--soft-yellow)}
.service-icon{width:46px;height:46px;border-radius:999px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}
.service-card h3{font-size:24px;line-height:1.05;letter-spacing:-.04em;margin:34px 0 14px}.service-card p{font-size:14px;line-height:1.55}.mini-pill{margin-top:auto;align-self:flex-start;border-radius:999px;padding:8px 11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.strong-yellow{background:var(--yellow);color:var(--black)}
.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.studio-copy{padding-top:48px}.studio-copy p{font-size:16px;line-height:1.6}.studio-copy .large-copy{font-size:26px;line-height:1.35;font-family:Inter,Arial,sans-serif;font-weight:600;margin-bottom:24px}
.contact{background:var(--yellow)}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.contact-intro h2{font-size:clamp(52px,7vw,84px);line-height:1}.contact-intro .small-line{font-family:Inter,Arial,sans-serif;font-size:.56em;font-weight:700;letter-spacing:-.03em;display:inline-block;margin-right:10px}.contact-intro p{font-size:17px;line-height:1.55;margin:24px 0}
.contact-form{background:#fff;color:var(--black);border:1px solid rgba(17,17,17,.18);border-radius:26px;padding:28px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{font-size:12px;font-weight:800}.contact-form input[type="text"],.contact-form input[type="email"],.contact-form textarea{width:100%;border:1px solid rgba(17,17,17,.28);background:white;border-radius:12px;padding:13px 14px;margin-top:7px;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 2px rgba(254,98,2,.14)}.form-step{border-top:1px solid rgba(17,17,17,.16);margin-top:20px;padding-top:0}.form-step:last-of-type{border-bottom:1px solid rgba(17,17,17,.16)}.form-step summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-size:16px;font-weight:800;position:relative}.form-step summary::-webkit-details-marker{display:none}.form-step summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:500;color:var(--orange)}.form-step[open] summary::after{content:"–"}.step-content{padding:0 0 14px}.option{display:flex!important;align-items:center;gap:10px;border:1px solid rgba(17,17,17,.12);background:white;border-radius:12px;padding:10px 12px;margin:7px 0;font-weight:500!important;cursor:pointer}.option input{accent-color:var(--orange)}.message-label{display:block;margin-top:24px!important}.submit-btn{margin-top:18px;width:100%;border:0;background:var(--orange);color:white;border-radius:999px;padding:15px 18px;font-weight:800;display:flex;justify-content:space-between;cursor:pointer}
.site-footer{background:var(--black);color:white;padding:28px 0}.footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.footer-inner img{width:68px;height:52px;object-fit:contain}.footer-inner span{font-size:11px;opacity:.7}.footer-inner a{justify-self:end;font-size:11px;font-weight:800}
@media(max-width:980px){.desktop-nav{display:none}.menu-btn{display:block}.hero-inner{min-height:610px}.hero-bottom{grid-template-columns:1fr}.primary-btn{justify-self:start}.split-heading,.studio-grid,.contact-layout{grid-template-columns:1fr;gap:32px}.project-link,.project-fitz{flex:0 0 300px}.project-card{min-height:400px}.project-logo-stage{height:138px}.service-cards{grid-template-columns:1fr 1fr}.contact-intro{max-width:650px}.footer-inner{grid-template-columns:1fr auto}}
@media(max-width:620px){.shell{width:min(100% - 24px,1180px)}.site-header{height:68px}.brand img{width:68px;height:48px}.hero-inner{min-height:560px;padding:58px 0 42px}.hero h1{font-size:56px;line-height:.88}.hero-bottom{margin-top:34px}.hero-bottom p{font-size:16px}.section{padding:72px 0}.section-heading h2,.studio-title h2,.contact-intro h2{font-size:48px}.split-heading{margin-bottom:30px}.project-viewport{--project-gap:14px;--project-half-gap:7px}.project-track{padding-bottom:6px}.project-link,.project-fitz{flex:0 0 276px}.project-card{min-height:382px;border-radius:22px}.project-topline{padding:14px 16px 10px}.project-logo-stage{height:126px;padding:14px;margin:0 14px;border-radius:16px}.project-copy{padding:18px 18px 22px}.project-copy h3{font-size:22px}.project-copy p{min-height:auto;font-size:13px}.service-cards{grid-template-columns:1fr}.service-card{min-height:280px}.service-card h3{margin-top:28px}.studio-copy{padding-top:0}.studio-copy .large-copy{font-size:22px}.field-row{grid-template-columns:1fr}.contact-form{padding:18px}.footer-inner{grid-template-columns:1fr auto}.footer-inner span{display:none}.contact-intro .small-line{display:block;margin:0 0 6px 0}}
.mobile-nav-open .desktop-nav{display:flex;position:absolute;left:0;right:0;top:68px;background:var(--cream);border:1px solid var(--black);padding:20px;flex-direction:column;align-items:stretch}.mobile-nav-open .desktop-nav a{text-align:center}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Cursor sparkles — sutil, solo desktop */
.cursor-sparkle{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  pointer-events:none;
  user-select:none;
  line-height:1;
  font-family:"Times New Roman",serif;
  transform:translate(-50%,-50%) scale(.45) rotate(0deg);
  opacity:0;
  animation:sparkle-pop .9s ease-out forwards;
  will-change:transform,opacity;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.45));
}
@keyframes sparkle-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0deg)}
  18%{opacity:1;transform:translate(calc(-50% + var(--dx1)),calc(-50% + var(--dy1))) scale(1) rotate(32deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx2)),calc(-50% + var(--dy2))) scale(.15) rotate(95deg)}
}
@media(max-width:820px),(hover:none),(pointer:coarse){.cursor-sparkle{display:none!important}}
@media(prefers-reduced-motion:reduce){.cursor-sparkle{display:none!important}}

/* Carrusel automático: sigue siendo desplazable con mouse/touch */
.project-grid{scroll-behavior:smooth;cursor:grab}
.project-grid:active{cursor:grabbing}