:root{
  --bg:#0b0b0b;
  --paper:#f2f1ec;
  --text:#f5f5f2;
  --muted:#8b8b8f;
  --line:#2a2a2d;
  --accent:#e6ff00;
  --ink:#111;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:20;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4vw;
  background:rgba(11,11,11,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{
  font-family:"Archivo Black";
  color:var(--accent);
  font-size:28px;
  line-height:1;
}
.brand span{
  font-size:8px;
  letter-spacing:.2em;
  font-weight:700;
}
nav{display:flex;gap:34px}
nav a{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:#bdbdc0;
}
nav a:hover{color:#fff}
.header-cta{
  border:1px solid var(--accent);
  padding:11px 16px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
}
.header-cta:hover{background:var(--accent);color:#111}
.hero{
  min-height:100vh;
  padding:145px 5vw 54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.eyebrow,.section-label{
  margin:0;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}
.hero h1{
  margin:40px 0;
  max-width:1100px;
  font-family:"Archivo Black";
  font-size:clamp(72px,10vw,168px);
  line-height:.84;
  letter-spacing:-.06em;
}
.hero h1 span{color:var(--accent)}
.hero-bottom{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:end;
}
.hero-bottom>p{
  max-width:560px;
  color:#a8a8ac;
  font-size:17px;
  line-height:1.7;
}
.hero-actions{display:flex;gap:10px}
.btn{
  padding:15px 20px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}
.btn-primary{background:var(--accent);color:#111}
.btn-outline{border:1px solid #3a3a3d}
.statement{
  background:var(--paper);
  color:var(--ink);
  padding:100px 5vw;
}
.statement .section-label{color:#5c5c5f}
.statement h2{
  margin:28px 0 60px;
  font-family:"Archivo Black";
  font-size:clamp(58px,7vw,110px);
  line-height:.92;
  letter-spacing:-.05em;
}
.statement h2 span{color:#b8ca00}
.statement-copy{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  max-width:950px;
  margin-left:auto;
}
.statement-copy p{
  font-size:16px;
  line-height:1.7;
  color:#4b4b4f;
}
.services{
  padding:100px 5vw 120px;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:60px;
}
.section-head h2{
  margin:0;
  max-width:900px;
  font-family:"Archivo Black";
  font-size:clamp(50px,6vw,90px);
  line-height:.95;
  letter-spacing:-.05em;
}
.service-list{border-top:1px solid var(--line)}
.service-list article{
  display:grid;
  grid-template-columns:80px minmax(220px,1fr) 1.2fr;
  gap:30px;
  align-items:center;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  transition:.2s ease;
}
.service-list article:hover{
  padding-left:16px;
  background:#101011;
}
.service-num{
  color:var(--accent);
  font-family:"Archivo Black";
  font-size:20px;
}
.service-title{
  font-family:"Archivo Black";
  font-size:clamp(28px,3vw,48px);
}
.service-desc{
  color:#8e8e92;
  font-size:13px;
  line-height:1.6;
}
.approach{
  background:var(--paper);
  color:var(--ink);
  padding:100px 5vw;
}
.approach .section-label{color:#5d5d60}
.approach-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  margin-top:30px;
}
.approach-main h2{
  margin:0;
  font-family:"Archivo Black";
  font-size:clamp(58px,7vw,105px);
  line-height:.9;
  letter-spacing:-.05em;
}
.approach-main h2 span{color:#b8ca00}
.steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #c9c9c6;
  border-left:1px solid #c9c9c6;
}
.steps article{
  min-height:220px;
  padding:22px;
  border-right:1px solid #c9c9c6;
  border-bottom:1px solid #c9c9c6;
}
.steps span{
  color:#8fa000;
  font-size:11px;
  font-weight:800;
}
.steps h3{
  margin:60px 0 10px;
  font-size:17px;
}
.steps p{
  margin:0;
  color:#55555a;
  font-size:13px;
  line-height:1.55;
}
.manifesto{
  padding:120px 5vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.manifesto-line{
  margin:0;
  font-family:"Archivo Black";
  font-size:clamp(56px,7vw,110px);
  line-height:.95;
  letter-spacing:-.055em;
}
.manifesto-line.muted{color:#5b5b60}
.manifesto-line span{color:var(--accent)}
.contact{
  padding:110px 5vw 100px;
}
.contact h2{
  margin:26px 0 56px;
  font-family:"Archivo Black";
  font-size:clamp(56px,7vw,108px);
  line-height:.92;
  letter-spacing:-.055em;
}
.contact h2 span{color:var(--accent)}
.contact-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
}
.contact-grid p{
  max-width:560px;
  color:#9b9ba0;
  font-size:16px;
  line-height:1.7;
}
.contact-button{
  background:var(--accent);
  color:#111;
  padding:18px 22px;
  font-size:10px;
  font-weight:900;
}
footer{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:30px;
  align-items:center;
  padding:30px 5vw;
  border-top:1px solid var(--line);
  color:#6f6f74;
  font-size:8px;
  letter-spacing:.12em;
}
.footer-brand strong{
  display:block;
  color:var(--accent);
  font-family:"Archivo Black";
  font-size:24px;
  line-height:1;
}
.footer-brand span{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:7px;
}
@media(max-width:900px){
  nav{display:none}
  .hero-bottom,
  .statement-copy,
  .approach-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .section-head{display:block}
  .section-head h2{margin-top:20px}
  .service-list article{
    grid-template-columns:60px 1fr;
  }
  .service-desc{
    grid-column:2;
  }
  footer{grid-template-columns:1fr}
}
@media(max-width:600px){
  .header{height:68px;padding:0 20px}
  .brand span{display:none}
  .hero,
  .statement,
  .services,
  .approach,
  .manifesto,
  .contact{
    padding-left:20px;
    padding-right:20px;
  }
  .hero{padding-top:110px}
  .hero h1{font-size:64px}
  .hero-bottom>p{font-size:15px}
  .hero-actions{flex-direction:column}
  .statement h2,
  .approach-main h2,
  .manifesto-line,
  .contact h2{font-size:50px}
  .steps{grid-template-columns:1fr}
  .service-list article{
    grid-template-columns:48px 1fr;
    gap:15px;
  }
  .service-title{font-size:28px}
  .service-desc{font-size:12px}
}


/* =========================================================
   UH! Motion System — brutalismo digital
   ========================================================= */

html { scroll-behavior: auto; }

body.is-loading { overflow: hidden; }

.preloader{
  position:fixed;inset:0;z-index:9999;
  background:#050505;color:var(--accent);
  display:grid;place-items:center;
  transition:opacity .16s steps(2,end), visibility .16s steps(2,end);
}
.preloader.is-hidden{opacity:0;visibility:hidden}
.preloader-logo{
  font-family:"Archivo Black";font-size:clamp(92px,18vw,280px);
  letter-spacing:-.08em;line-height:.75;
  animation:preBlink .17s steps(2,end) infinite;
}
.preloader-count{
  position:absolute;right:28px;bottom:24px;
  font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;color:#fff;
}
@keyframes preBlink{0%,47%{opacity:1;transform:translate(0,0)}48%,70%{opacity:.25;transform:translate(3px,-1px)}71%,100%{opacity:1;transform:translate(-1px,1px)}}

/* Cursor */
@media (pointer:fine){
  body, a, button { cursor:none; }
  .custom-cursor{
    position:fixed;left:0;top:0;z-index:9998;
    width:34px;height:34px;border-radius:50%;
    background:var(--accent);
    pointer-events:none;
    transform:translate(-50%,-50%);
    mix-blend-mode:difference;
    transition:width .08s steps(2,end),height .08s steps(2,end),border-radius .08s steps(2,end);
  }
  .custom-cursor.is-active{width:68px;height:68px;border-radius:2px}
}

/* Header progression */
.header{
  transition:height .12s steps(3,end),background .12s linear,padding .12s steps(3,end);
}
.header.is-scrolled{
  height:60px;
  background:rgba(11,11,11,.68);
  backdrop-filter:blur(18px);
  border-bottom-color:rgba(255,255,255,.14);
}

/* Menu glitch */
.glitch-link{position:relative;display:inline-block}
.glitch-link::before,.glitch-link::after{
  content:attr(data-text);
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
}
.glitch-link:hover::before{
  opacity:.85;color:#00f0ff;transform:translate(-2px,1px);
  clip-path:inset(0 0 52% 0);
  animation:glitchA .18s steps(2,end) 2;
}
.glitch-link:hover::after{
  opacity:.85;color:#ff2b91;transform:translate(2px,-1px);
  clip-path:inset(54% 0 0 0);
  animation:glitchB .18s steps(2,end) 2;
}
@keyframes glitchA{0%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}100%{transform:translate(-1px,0)}}
@keyframes glitchB{0%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}100%{transform:translate(1px,0)}}

/* Header HABLEMOS: vertical mechanical loop */
.marquee-button{overflow:hidden;height:38px;display:flex;align-items:center}
.marquee-stack{display:flex;flex-direction:column;line-height:38px;transition:transform .18s steps(4,end)}
.marquee-button:hover .marquee-stack{transform:translateY(-38px)}
.marquee-button:hover{border-width:3px}

/* ALGO interaction */
.algo-word{
  display:inline-block;
  position:relative;
  padding:0 .05em;
  transition:color .1s steps(2,end),background .1s steps(2,end),transform .1s steps(2,end);
}
.algo-word:hover{
  background:var(--accent);
  color:#111 !important;
  transform:skewX(-3deg) translateX(3px);
}
.algo-word::after{
  content:"";
  position:absolute;
  right:.03em;bottom:.05em;
  width:.12em;height:.12em;border-radius:50%;
  background:currentColor;
  transform:scale(0);
  transform-origin:center;
}
.algo-word:hover::after{animation:algoPulse .42s steps(5,end)}
@keyframes algoPulse{0%{transform:scale(0)}55%{transform:scale(7)}100%{transform:scale(0)}}

/* Hero tagline activation */
.hero-tagline span{
  color:#2a2a2d;
  transition:color .08s steps(2,end),text-shadow .08s steps(2,end);
}
.hero-tagline b{color:#252529;padding:0 8px}
.hero-tagline span.is-active{color:var(--accent);text-shadow:0 0 16px rgba(230,255,0,.18)}

/* Mechanical reveal */
.reveal-section{
  opacity:0;
  transform:translateY(36px);
  filter:contrast(1.4) blur(5px);
}
.reveal-section.is-visible{
  opacity:1;
  transform:translateY(0);
  filter:none;
  transition:
    opacity .16s steps(3,end),
    transform .2s cubic-bezier(.2,.9,.2,1),
    filter .12s steps(3,end);
}

/* Brutal hover on service rows */
.service-list article:hover{
  transform:translateX(7px);
  transition:transform .08s steps(2,end),background .08s steps(2,end),padding .08s steps(2,end);
}
.service-title{transition:letter-spacing .08s steps(2,end)}
.service-list article:hover .service-title{letter-spacing:.02em}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .preloader-logo,.glitch-link:hover::before,.glitch-link:hover::after,.algo-word:hover::after{animation:none!important}
  .reveal-section{opacity:1;transform:none;filter:none}
  .marquee-stack,.header,.hero-tagline span{transition:none!important}
  .custom-cursor{display:none}
}


/* ===== FIX V3: botón HABLEMOS superior ===== */
.header .header-talk{
  width:auto;
  min-width:118px;
  height:38px;
  padding:0 17px;
  border:1px solid var(--accent);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  overflow:hidden;
  color:#fff;
  background:transparent;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.05em;
  white-space:nowrap;
  transition:
    background .09s steps(2,end),
    color .09s steps(2,end),
    border-width .09s steps(2,end),
    transform .09s steps(2,end);
}
.header .header-talk span,
.header .header-talk b{
  display:block;
  position:static;
  transform:none;
  line-height:1;
}
.header .header-talk b{
  color:var(--accent);
  font-size:13px;
  font-weight:900;
  transition:transform .1s steps(2,end),color .1s steps(2,end);
}
.header .header-talk:hover{
  background:var(--accent);
  color:#111;
  border-width:1px;
  transform:translateY(-1px);
}
.header .header-talk:hover b{
  color:#111;
  transform:translate(3px,-3px);
}

/* neutraliza cualquier regla del marquee anterior */
.header .header-talk .marquee-stack{transform:none!important}
@media(max-width:600px){
  .header .header-talk{
    min-width:102px;
    height:36px;
    padding:0 13px;
    font-size:9px;
  }
}


/* =========================================================
   V4 FINAL — Mobile polish + no-arrow UI
   ========================================================= */

/* No flechas decorativas en botones */
.header .header-talk{
  min-width:116px;
  justify-content:center;
  gap:0;
}
.header .header-talk b{display:none!important}
.header .header-talk:hover{
  transform:none;
}

/* Evita cualquier overflow horizontal global */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
main,section,header,footer{
  max-width:100%;
}

/* Tipografía segura: evita palabras gigantes saliendo del viewport */
.statement h2,
.approach-main h2,
.manifesto-line,
.contact h2{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* ===== MOBILE ===== */
@media(max-width:640px){

  /* header más limpio y estable */
  .header{
    height:70px;
    padding:0 20px;
    gap:12px;
  }
  .brand{
    min-width:0;
  }
  .brand strong{
    font-size:28px;
    white-space:nowrap;
  }
  .header .header-talk{
    min-width:112px;
    width:auto;
    height:40px;
    padding:0 16px;
    font-size:10px;
    line-height:1;
    flex:0 0 auto;
  }

  /* hero */
  .hero{
    min-height:auto;
    padding:112px 20px 64px;
  }
  .hero h1{
    font-size:clamp(52px,14.5vw,68px);
    line-height:.91;
    letter-spacing:-.055em;
    margin:34px 0 30px;
  }
  .hero-bottom{
    gap:26px;
  }
  .hero-bottom>p{
    font-size:15px;
    line-height:1.62;
    margin:0;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
  }
  .btn{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
  }

  /* tagline no se rompe feo */
  .hero-tagline{
    display:flex;
    flex-wrap:wrap;
    gap:6px 8px;
    line-height:1.5;
  }
  .hero-tagline b{
    padding:0 1px;
  }

  /* sección blanca: título bien contenido */
  .statement{
    padding-top:74px;
    padding-bottom:78px;
  }
  .statement h2{
    font-size:clamp(44px,12vw,58px);
    line-height:.94;
    letter-spacing:-.05em;
    margin:24px 0 42px;
  }
  .statement-copy{
    gap:18px;
  }
  .statement-copy p{
    margin:0;
    font-size:15px;
  }

  /* servicios */
  .services{
    padding-top:74px;
    padding-bottom:78px;
  }
  .section-head{
    margin-bottom:40px;
  }
  .section-head h2{
    font-size:clamp(42px,11vw,54px);
    line-height:.95;
  }
  .service-list article{
    grid-template-columns:42px minmax(0,1fr);
    padding:24px 0;
    gap:12px;
  }
  .service-title{
    font-size:clamp(25px,7vw,32px);
    min-width:0;
  }
  .service-desc{
    grid-column:2;
    font-size:12px;
    line-height:1.55;
  }

  /* ENFOQUE: corrección principal del screenshot */
  .approach{
    padding-top:74px;
    padding-bottom:80px;
  }
  .approach-grid{
    margin-top:26px;
    gap:44px;
  }
  .approach-main{
    width:100%;
    min-width:0;
  }
  .approach-main h2{
    width:100%;
    max-width:100%;
    font-size:clamp(42px,11.4vw,54px);
    line-height:.92;
    letter-spacing:-.055em;
    white-space:normal;
  }
  .steps{
    width:100%;
    max-width:100%;
    border-left:1px solid #c9c9c6;
  }
  .steps article{
    width:100%;
    min-height:auto;
    padding:30px 22px;
  }
  .steps h3{
    margin:36px 0 10px;
    font-size:17px;
  }
  .steps p{
    font-size:14px;
    line-height:1.5;
  }

  /* manifiesto */
  .manifesto{
    padding-top:80px;
    padding-bottom:80px;
  }
  .manifesto-line{
    font-size:clamp(40px,10.7vw,52px);
    line-height:.95;
  }

  /* contacto */
  .contact{
    padding-top:80px;
    padding-bottom:84px;
  }
  .contact h2{
    font-size:clamp(44px,11.5vw,56px);
    line-height:.93;
    margin:24px 0 38px;
  }
  .contact-grid{
    gap:28px;
  }
  .contact-grid p{
    margin:0;
    font-size:15px;
    line-height:1.6;
  }
  .contact-button{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    text-align:center;
  }

  /* footer */
  footer{
    gap:24px;
    padding-top:34px;
    padding-bottom:34px;
  }
  footer>div:nth-child(2){
    line-height:1.7;
  }

  /* Cursor custom: no se muestra en touch/mobile */
  .custom-cursor{
    display:none!important;
  }
}

/* Extra safe para móviles muy angostos */
@media(max-width:390px){
  .hero h1{
    font-size:50px;
  }
  .statement h2,
  .approach-main h2,
  .contact h2{
    font-size:42px;
  }
  .manifesto-line{
    font-size:39px;
  }
  .header{
    padding-left:16px;
    padding-right:16px;
  }
  .header .header-talk{
    min-width:104px;
    padding:0 12px;
  }
}

/* Pantallas touch: nada de cursor custom o hovers "pegados" */
@media(hover:none), (pointer:coarse){
  .custom-cursor{display:none!important}
  body,a,button{cursor:auto!important}
  .glitch-link:hover::before,
  .glitch-link:hover::after{display:none!important}
  .algo-word:hover{
    background:transparent;
    color:var(--accent)!important;
    transform:none;
  }
}