:root{
  --bg:#141210;
  --ink:#F5F1EA;
  --muted:#9c9488;
  --accent:#E8935C;
  --line:rgba(245,241,234,.14);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

@media (hover:hover) and (pointer:fine){ body{ cursor:none; } }
.cursor-dot{
  position:fixed; top:0; left:0; width:14px; height:14px; margin:-7px 0 0 -7px;
  border:1px solid var(--ink); border-radius:50%; pointer-events:none; z-index:300;
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.cursor-dot.is-active{ width:46px; height:46px; margin:-23px 0 0 -23px; border-color:var(--accent); background:rgba(232,147,92,.15); }
@media (hover:none){ .cursor-dot{ display:none; } }

/* ---- Nav ---- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:1.4rem clamp(1.25rem,5vw,3rem); }
.mark{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.mark .dot{ width:34px; height:34px; border:1.5px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.95rem; }
.topbar nav{ display:flex; gap:2.2rem; }
.topbar nav a{ font-size:.85rem; position:relative; padding-bottom:.2rem; }
.topbar nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--accent); transition:width .3s var(--ease); }
.topbar nav a:hover::after{ width:100%; }
@media (max-width:760px){ .topbar nav{ display:none; } }

/* ---- Home hero with globe ---- */
.hero{ position:relative; height:100vh; min-height:640px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.hero-content{ position:relative; z-index:2; pointer-events:none; }
.hero .eyebrow{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; text-shadow:0 2px 16px rgba(20,18,16,.9); }
.hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,5vw,3.6rem); line-height:1.15; margin:0 auto 1.6rem; max-width:16ch; text-shadow:0 4px 24px rgba(20,18,16,.95), 0 2px 8px rgba(20,18,16,.9); }
.hero p.sub{ font-size:.85rem; color:var(--muted); text-shadow:0 2px 16px rgba(20,18,16,.9); }
.hint{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2; font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.hint svg{ width:14px; height:14px; }
@media (max-width:700px){
  .hero{ justify-content:flex-start; padding-top:16vh; }
  .hint{ display:none; }
}

/* ---- Simple hero (service pages) ---- */
.page-hero{ padding:clamp(9rem,16vw,11rem) clamp(1.25rem,5vw,3rem) clamp(3.5rem,7vw,5rem); max-width:1280px; margin:0 auto; }
.page-hero .back-link{ font-size:.8rem; color:var(--muted); display:inline-block; margin-bottom:1.6rem; position:relative; }
.page-hero .back-link:hover{ color:var(--ink); }
.page-hero .eyebrow{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.page-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,6vw,4.4rem); line-height:1.05; margin:0 0 1.4rem; max-width:16ch; }
.page-hero p.lead{ font-size:1.05rem; color:var(--muted); max-width:52ch; line-height:1.7; margin:0; }

/* ---- Manifesto ---- */
.manifesto{ position:relative; padding:clamp(3rem,8vw,5rem) clamp(1.25rem,5vw,3rem) clamp(5rem,10vw,7rem); border-top:1px solid var(--line); }
.manifesto-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.manifesto-cell h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.1rem,2vw,1.4rem); margin:0 0 .8rem; }
.manifesto-cell p{ font-size:.86rem; color:var(--muted); line-height:1.7; margin:0; }
@media (max-width:900px){ .manifesto-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .manifesto-grid{ grid-template-columns:1fr; } }

/* ---- Services — big overlapping stacked words ---- */
.services{ max-width:1280px; margin:0 auto; padding:clamp(4rem,9vw,6rem) clamp(1.25rem,5vw,3rem); }
.services-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.services-head h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,3.2vw,2rem); margin:0; }
.services-head .n{ font-size:.85rem; color:var(--muted); }
.service-stack{ display:flex; flex-direction:column; }
.service-line{ position:relative; border-top:1px solid var(--line); }
.service-stack .service-line:last-child{ border-bottom:1px solid var(--line); }
.service-line a{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem .5rem; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.6rem,5vw,3.4rem); line-height:1; letter-spacing:-.01em;
  transition:padding-left .35s var(--ease), color .35s var(--ease);
}
.service-line a:hover{ padding-left:1.5rem; color:var(--muted); }
.service-line .circle{
  width:52px; height:52px; border:1px solid var(--accent); color:var(--accent); border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  opacity:0; transform:scale(.6); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.service-line a:hover .circle{ opacity:1; transform:scale(1); }
@media (max-width:640px){ .service-line .circle{ display:none; } }

/* ---- Cross-links (service pages, compact) ---- */
.cross-links{ max-width:1280px; margin:0 auto; padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,3rem) clamp(4rem,8vw,5.5rem); }
.cross-links .n{ font-size:.85rem; color:var(--muted); display:block; margin-bottom:1.6rem; }
.cross-stack .service-line a{ font-size:clamp(1.3rem,3.6vw,2rem); padding:1.2rem .5rem; }
.cross-stack .circle{ width:42px; height:42px; font-size:1rem; }

/* ---- Service body ---- */
.service-body{ max-width:820px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem) clamp(3.5rem,7vw,5rem); display:flex; flex-direction:column; gap:2.6rem; border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,4rem); }
.service-body .n{ display:block; margin-bottom:.8rem; font-size:.85rem; color:var(--muted); }
.service-body h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 1rem; }
.service-body p{ font-size:1rem; line-height:1.75; color:var(--muted); margin:0; }
.service-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.service-list li{ display:flex; gap:.8rem; align-items:flex-start; font-size:.98rem; line-height:1.6; color:var(--ink); }
.service-list li::before{ content:"—"; color:var(--muted); flex:none; }

/* ---- Projects ---- */
.projects{ max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem) clamp(6rem,10vw,8rem); }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2.4rem; flex-wrap:wrap; gap:1rem; }
.section-head h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,3.2vw,2rem); margin:0; }
.section-head .n{ font-size:.85rem; color:var(--muted); }
.projects-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.project{ background:var(--bg); position:relative; overflow:hidden; }
.project .thumb{ aspect-ratio:4/3; overflow:hidden; }
.project .thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(.85); transition:filter .5s var(--ease), transform .6s var(--ease); }
.project:hover .thumb img{ filter:grayscale(0) brightness(1); transform:scale(1.05); }
.project .thumb.no-image{ display:flex; align-items:center; justify-content:center; }
.project .thumb.no-image svg{ width:36px; height:36px; stroke:var(--muted); }
.project .meta{ padding:1rem 1.1rem 1.3rem; }
.project .p-title{ font-family:var(--font-display); font-weight:600; font-size:1rem; margin:0 0 .2rem; }
.project .p-tag{ font-size:.75rem; color:var(--muted); }
@media (max-width:900px){ .projects-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .projects-grid{ grid-template-columns:1fr; } }

/* ---- CTA ---- */
.cta{ text-align:center; padding:clamp(6rem,12vw,9rem) clamp(1.25rem,5vw,3rem); border-top:1px solid var(--line); }
.cta .eyebrow{ font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
.cta h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,5.5vw,4rem); margin:0 0 2.2rem; }
.cta-box{ display:inline-flex; align-items:center; gap:.6rem; border:1px solid var(--line); padding:1rem 1.8rem; border-radius:2px; font-size:.95rem; transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.cta-box:hover{ border-color:var(--accent); color:var(--accent); background:rgba(232,147,92,.08); }

footer{ display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; padding:2rem clamp(1.25rem,5vw,3rem); font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); }
footer a:hover{ color:var(--ink); }

/* ---------- Casos de éxito ---------- */
.cases{ max-width:1280px; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem) clamp(3rem,6vw,4rem); }
.case-study{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  padding:clamp(3rem,7vw,4.5rem) 0; border-top:1px solid var(--line);
}
.cases .case-study:last-child{ border-bottom:1px solid var(--line); }
.case-study:nth-child(even) .case-image{ order:2; }
.case-study .case-image{ aspect-ratio:4/3; overflow:hidden; }
.case-study .case-image img{ filter:grayscale(1) contrast(1.1) brightness(.85); transition:filter .6s var(--ease), transform .7s var(--ease); }
.case-study:hover .case-image img{ filter:grayscale(0) brightness(1); transform:scale(1.04); }
.case-study .case-tag{ font-size:.8rem; color:var(--muted); margin-bottom:1rem; }
.case-study h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 1.1rem; }
.case-study p{ font-size:.98rem; line-height:1.7; color:var(--muted); max-width:44ch; margin:0 0 1.6rem; }
.case-study a.visit{ font-size:.85rem; border-bottom:1px solid var(--ink); padding-bottom:.2rem; }
.case-study a.visit:hover{ color:var(--muted); }
.case-study.no-link p{ margin-bottom:0; }
@media (max-width:800px){
  .case-study{ grid-template-columns:1fr; }
  .case-study:nth-child(even) .case-image{ order:0; }
}

/* ---------- Clientes — franja horizontal animada ---------- */
.clients{ padding:0 0 clamp(6rem,10vw,8rem); }
.clients .section-head{ max-width:1280px; margin:0 auto 2rem; padding:0 clamp(1.25rem,5vw,3rem); }
.clients-marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.6rem 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-track{
  display:flex; align-items:center; gap:clamp(2.5rem,6vw,4.5rem); width:max-content;
  animation:marquee 22s linear infinite;
}
.clients-marquee:hover .clients-track{ animation-play-state:paused; }
.client-item{
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3.4vw,2.2rem);
  color:var(--muted); white-space:nowrap; transition:color .3s var(--ease);
}
.client-item:hover{ color:var(--accent); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .clients-track{ animation:none; } }

/* ---------- Proceso ---------- */
.process{ max-width:1280px; margin:0 auto; padding:clamp(3rem,7vw,4.5rem) clamp(1.25rem,5vw,3rem); border-top:1px solid var(--line); }
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,5vw,3rem); margin-top:2.4rem; }
.process-cell .num{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); font-weight:600; color:var(--accent); display:block; margin-bottom:1rem; }
.process-cell h3{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin:0 0 .7rem; }
.process-cell p{ font-size:.92rem; color:var(--muted); line-height:1.65; margin:0; max-width:32ch; }
@media (max-width:760px){ .process-grid{ grid-template-columns:1fr; } }

/* ---------- Cifras ---------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-row{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(2.4rem,5vw,3.2rem) clamp(1rem,3vw,1.5rem); border-right:1px solid var(--line); text-align:center; }
.stats-row .stat:last-child{ border-right:none; }
.stat .num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,5vw,3.2rem); margin-bottom:.5rem; }
.stat .label{ font-size:.8rem; color:var(--muted); }
@media (max-width:760px){ .stats-row{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2){ border-right:none; } .stat{ border-bottom:1px solid var(--line); } }

/* ---------- FAQ ---------- */
.faq{ max-width:900px; margin:0 auto; padding:clamp(4rem,8vw,6rem) clamp(1.25rem,5vw,3rem); }
.faq .section-head{ max-width:none; padding:0; margin-bottom:2.2rem; }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--line); padding:1.5rem 0; }
.faq-list .faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; font-family:var(--font-display); font-weight:500; font-size:clamp(1.05rem,2.2vw,1.3rem); transition:color .3s var(--ease); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; color:var(--muted); flex:none; transition:color .3s var(--ease); }
.faq-item:hover summary{ color:var(--accent); }
.faq-item[open] summary::after{ content:"–"; color:var(--accent); }
.faq-item p{ font-size:.95rem; color:var(--muted); line-height:1.75; margin:1rem 0 0; max-width:60ch; }

/* ---------- Mobile menu ---------- */
.menu-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;
  padding:.5rem; z-index:110; position:relative;
}
.menu-toggle span{ width:22px; height:2px; background:var(--ink); display:block; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; background:var(--bg); z-index:100;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
  padding:2rem clamp(1.5rem,8vw,3rem);
  transform:translateY(-100%); transition:transform .45s var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--font-display); font-weight:500; font-size:1.9rem; color:var(--ink); }
.mobile-menu a:hover{ color:var(--accent); }

@media (max-width:760px){
  .topbar nav{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ---------- Hero: fix mobile overlap with globe ---------- */
@media (max-width:760px){
  .hero{ justify-content:flex-start; padding-top:7rem; }
  .hero-content{ background:radial-gradient(ellipse at center, rgba(20,18,16,.75) 0%, rgba(20,18,16,.4) 60%, rgba(20,18,16,0) 100%); padding:1.5rem 1rem 3rem; border-radius:12px; }
  .hint{ display:none; }
}

/* ---------- Portafolio — carrusel automático ---------- */
.portfolio{ padding:0 0 clamp(6rem,10vw,8rem); }
.portfolio .section-head{ max-width:1280px; margin:0 auto 2.2rem; padding:0 clamp(1.25rem,5vw,3rem); }
.portfolio-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.portfolio-track{
  display:flex; gap:1.4rem; width:max-content; padding:0 clamp(1.25rem,5vw,3rem);
  animation:portfolio-scroll 36s linear infinite;
}
.portfolio-marquee:hover .portfolio-track{ animation-play-state:paused; }
@keyframes portfolio-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .portfolio-track{ animation:none; } }

.portfolio-card{
  position:relative; display:block; overflow:hidden; border-radius:4px;
  background:#0a0908; flex:none; width:min(78vw, 380px); aspect-ratio:4/3;
}
.portfolio-card img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(.6) brightness(.72);
  transition:filter .6s var(--ease), transform .6s var(--ease);
}
.portfolio-card:hover img{ filter:grayscale(0) brightness(.6); transform:scale(1.06); }
.portfolio-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.portfolio-fallback svg{ width:56px; height:56px; stroke:var(--muted); }
.portfolio-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.3rem; background:linear-gradient(0deg, rgba(20,18,16,.94) 0%, rgba(20,18,16,.25) 65%, rgba(20,18,16,0) 100%);
}
.portfolio-overlay h3{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:0; color:var(--ink); }
.portfolio-extra{ max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .35s var(--ease), margin-top .4s var(--ease); }
.portfolio-card:hover .portfolio-extra{ max-height:140px; opacity:1; margin-top:.6rem; }
.portfolio-extra .tag{ font-size:.72rem; color:var(--muted); margin:0 0 .35rem; text-transform:uppercase; letter-spacing:.04em; }
.portfolio-extra .desc{ font-size:.85rem; color:var(--muted); line-height:1.5; margin:0 0 .6rem; }
.portfolio-extra .visit{ font-size:.82rem; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:.15rem; }
.portfolio-extra .visit.muted{ color:var(--muted); border-color:var(--line); }
@media (max-width:560px){ .portfolio-extra{ max-height:140px; opacity:1; margin-top:.6rem; } }