/* ================================================================
   REYESGRAPHIC v2 — sistema visual
   Orden: tokens → reset → utilidades → capas fijas → secciones
   ================================================================ */

:root{
  --ink:        #060606;
  --ink-2:      #0C0C0C;
  --ink-3:      #131313;
  --ink-4:      #1B1B1B;
  --lime:       #CCFF00;
  --lime-deep:  #A8D400;
  --paper:      #F4F4EF;
  --paper-mid:  rgba(244,244,239,.56);
  --paper-dim:  rgba(244,244,239,.48);
  --hairline:   rgba(244,244,239,.09);
  --hairline-2: rgba(244,244,239,.18);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --radius:  14px;
  --radius-l: 24px;

  --out:     cubic-bezier(.16,1,.3,1);
  --inout:   cubic-bezier(.76,0,.24,1);
  --spring:  linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938,1.017,1.077,1.121,1.149 19.8%,1.159,1.163,1.161,1.154 22.9%,1.129 24.6%,1.051 28.2%,1.017 30%,.991,.977 34.1%,.972 36.2%,.973 38%,.994 44.7%,1.007 51.7%,1.001 62.1%,.999);

  --gut:     clamp(20px, 5vw, 72px);
  --maxw:    1440px;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  background: var(--ink);
  -webkit-text-size-adjust:100%;
  scrollbar-color: var(--ink-4) var(--ink);
}
html.js-smooth{ scroll-behavior:auto; }

body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight:300;
  font-size: clamp(15px, .95rem + .2vw, 17px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img,svg,canvas,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--lime); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed; top:12px; left:12px; z-index:100000;
  transform:translateY(-200%);
  background:var(--lime); color:var(--ink);
  padding:10px 18px; border-radius:999px; font-weight:600;
}
.skip-link:focus{ transform:none; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- tipografía ---------- */
.display{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:none;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--lime);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:var(--lime); flex:none;
}

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section{ padding-block: clamp(90px, 13vh, 180px); position:relative; }

/* ================================================================
   CURSOR
   ================================================================ */
/* El punto marca el clic exacto; el bot va detras con inercia, un poco abajo
   a la derecha para no tapar lo que se esta señalando. */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9500;
  pointer-events:none;
  will-change:transform;
  transition:opacity .2s;
}
body:not(.has-cursor) .cursor-dot,
body:not(.has-cursor) .cursor-ring{ display:none; }
.cursor-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--paper);
  margin:-3px 0 0 -3px;
  mix-blend-mode:difference;
}
.cursor-ring{ width:0; height:0; }

.cursor-bot{
  position:absolute; left:10px; top:12px;
  width:46px; height:46px;
  rotate:var(--tilt, 0deg);
  transform-origin:20% 20%;
  transition:scale .45s var(--spring);
}
.cursor-bot svg{
  width:100%; height:100%; overflow:visible;
  animation:botFloat 2.8s ease-in-out infinite;
}
.bot-line{ fill:none; stroke:var(--lime); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.bot-fill{ fill:var(--lime); }
.bot-head{ fill:var(--ink-2); stroke:var(--lime); stroke-width:2.6; }
.bot-screen{ fill:#000; }
.bot-mouth{ stroke-width:1.8; }
.bot-hand{
  transform-box:fill-box; transform-origin:100% 100%;   /* gira desde el hombro */
  animation:botWave 2.6s ease-in-out infinite;
}
.bot-eyes{
  transform-box:fill-box; transform-origin:center;
  animation:botBlink 4.2s infinite;
  transition:transform .2s;
}
.bot-glow{ animation:botGlow 1.4s ease-in-out infinite alternate; }

/* sobre un enlace o boton: crece, entrecierra los ojos y señala */
body.cursor-link .cursor-bot{ scale:1.15; }
body.cursor-link .bot-hand{ animation:botPoke .55s ease-in-out infinite alternate; }
body.cursor-link .bot-eyes{ animation:none; transform:scaleY(.45); }
body.cursor-press .cursor-bot{ scale:.86; }

.cursor-ring b{
  position:absolute; left:62px; top:24px;
  background:var(--lime); color:var(--ink);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
  opacity:0; transform:translateX(-6px);
  transition:opacity .2s, transform .3s var(--out);
}
body.cursor-view .cursor-ring b{ opacity:1; transform:none; }
body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring{ opacity:0; }

@keyframes botFloat{ 50%{ transform:translateY(-3px); } }
@keyframes botWave{
  0%,55%,100%{ rotate:0deg; }
  8%{ rotate:-24deg; } 18%{ rotate:16deg; } 28%{ rotate:-20deg; }
  38%{ rotate:12deg; } 47%{ rotate:-6deg; }
}
@keyframes botPoke{
  from{ rotate:-4deg; translate:0 0; }
  to{ rotate:2deg; translate:-3px -3px; }
}
@keyframes botBlink{ 0%,90%,100%{ transform:scaleY(1); } 94%{ transform:scaleY(.1); } }
@keyframes botGlow{ from{ opacity:.45; } to{ opacity:1; } }
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor *{ cursor:none; }
}

/* ================================================================
   NAV
   ================================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:8000;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding: 18px var(--gut);
  transition: background-color .4s var(--out), border-color .4s, padding .4s var(--out);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background: rgba(6,6,6,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hairline);
  padding-block:12px;
}
.nav.is-hidden{ transform:translateY(-100%); }
.nav{ transition: transform .5s var(--out), background-color .4s var(--out), border-color .4s, padding .4s var(--out); }
.nav-logo img{ height:26px; width:auto; filter:brightness(0) invert(1); }
.nav-menu{
  display:flex; align-items:center; gap:clamp(16px,2vw,34px);
  list-style:none;
  font-size:.86rem;
}
.nav-menu a{ position:relative; padding-block:4px; color:var(--paper-mid); transition:color .3s; }
.nav-menu a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--lime); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--out);
}
.nav-menu a:hover{ color:var(--paper); }
.nav-menu a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--lime); color:var(--ink);
  padding:11px 22px; border-radius:999px;
  font-weight:600; font-size:.85rem;
  white-space:nowrap;
}
.nav-burger{ display:none; width:44px; height:44px; place-items:center; }
.nav-burger span{
  display:block; width:22px; height:1.5px; background:var(--paper);
  transition:transform .4s var(--out), opacity .3s;
}
.nav-burger span+span{ margin-top:6px; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.nav-drawer{
  position:fixed; inset:0; z-index:7900;
  background:var(--ink-2);
  display:grid; align-content:center;
  padding: 0 var(--gut);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--inout);
  visibility:hidden;
}
.nav-drawer.is-open{ clip-path: inset(0 0 0 0); visibility:visible; }
.nav-drawer a{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,9vw,3.6rem); line-height:1.06;
  letter-spacing:-.04em;
  padding-block:6px;
  opacity:0; transform:translateY(28px);
  transition:opacity .5s var(--out), transform .5s var(--out), color .3s;
}
.nav-drawer.is-open a{ opacity:1; transform:none; }
.nav-drawer a:hover{ color:var(--lime); }

@media (max-width: 900px){
  .nav-menu, .nav > .nav-cta{ display:none; }
  .nav-burger{ display:grid; }
}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; flex-direction:column;
  padding: 104px var(--gut) clamp(24px,4vh,44px);
  overflow:hidden;
  isolation:isolate;
}
#heroCanvas{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  opacity:0; transition:opacity 1.2s linear;
}
#heroCanvas.is-live{ opacity:1; }
.hero-fallback{
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(58% 44% at 22% 30%, rgba(204,255,0,.16), transparent 68%),
    radial-gradient(46% 40% at 82% 70%, rgba(120,180,0,.11), transparent 70%),
    var(--ink);
}
.hero-veil{
  position:absolute; inset:0; z-index:-1;
  background:
    /* oscurece la columna donde vive el texto sin tapar la lluvia de la derecha */
    linear-gradient(to right, rgba(6,6,6,.88) 0%, rgba(6,6,6,.44) 40%, rgba(6,6,6,0) 68%),
    linear-gradient(to bottom, rgba(6,6,6,.90) 0%, rgba(6,6,6,.20) 30%, rgba(6,6,6,.40) 62%, rgba(6,6,6,.90) 100%);
  pointer-events:none;
}
.hero-noise{
  position:absolute; inset:0; z-index:-1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* El hero ocupa la pantalla entera. Si el contenido se pega abajo queda un
   vacio enorme bajo el menu, asi que el sobrante se reparte: cinta arriba,
   titular al centro y la pista de scroll al fondo. */
.hero-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.hero-ticker{ flex:none; }
.hero-title{ margin-top:auto; }
.hero-scroll{ margin-top:auto; }
.hero-ticker{
  overflow:hidden; margin-bottom:clamp(22px,4vh,42px);
  border-block:1px solid var(--hairline);
  padding-block:9px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.hero-ticker-track{
  display:flex; gap:0; width:max-content;
  animation: tickerSlide 34s linear infinite;
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--paper-mid);
}
.hero-ticker-track span{ padding-inline:22px; white-space:nowrap; }
.hero-ticker-track span::after{ content:'◆'; color:var(--lime); margin-left:22px; font-size:.5em; vertical-align:middle; }
@keyframes tickerSlide{ to{ transform:translateX(-50%); } }

.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size: clamp(2.6rem, 7.4vw, 7.4rem);
  line-height:.88; letter-spacing:-.05em;
  margin-bottom: clamp(24px,4vh,44px);
}
.hero-title .ln{ display:block; overflow:hidden; }
.hero-title .ln > span{ display:block; will-change:transform; }
.hero-title em{ font-style:normal; color:var(--lime); }

/* palabra rotativa */
.rotator{
  display:inline-grid; vertical-align:baseline;
  overflow:hidden;
  padding-bottom:.10em; margin-bottom:-.10em;
}
.rotator > span{
  grid-area:1/1;
  color:var(--lime);
  opacity:0;
  transform:translateY(105%) rotate(4deg);
  /* la opacidad va mas rapida que el desplazamiento: si no, la palabra que
     sale se ve a medio camino y parece un fantasma detras de la nueva */
  transition:opacity .26s linear, transform .7s var(--out);
}
.rotator > span.is-in{ opacity:1; transform:none; }
.rotator > span.is-out{ opacity:0; transform:translateY(-105%) rotate(-3deg); }

.hero-foot{
  display:grid; gap:clamp(20px,3vw,54px);
  grid-template-columns: minmax(0,1fr) auto;
  align-items:end;
}
.hero-lede{
  max-width:46ch; color:var(--paper-mid); font-size:clamp(.98rem,1.05vw,1.13rem);
}
.hero-lede strong{ color:var(--paper); font-weight:500; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.hero-scroll{
  margin-top:clamp(26px,5vh,52px);
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--paper-dim);
}
.hero-scroll i{
  display:block; width:52px; height:1px; background:var(--hairline-2);
  position:relative; overflow:hidden;
}
.hero-scroll i::after{
  content:''; position:absolute; inset:0; background:var(--lime);
  transform:translateX(-100%);
  animation: scrollCue 2.4s var(--inout) infinite;
}
@keyframes scrollCue{ 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

@media (max-width: 820px){
  .hero-foot{ grid-template-columns:1fr; align-items:start; }
}

/* ================================================================
   BOTONES
   ================================================================ */
.btn{
  --btn-bg: var(--lime);
  --btn-fg: var(--ink);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:.92rem; letter-spacing:-.01em;
  isolation:isolate;
  will-change:transform;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--paper);
  transform:translateY(101%);
  transition:transform .55s var(--out);
}
.btn:hover::before{ transform:translateY(0); }
.btn svg{ transition:transform .45s var(--out); }
.btn:hover svg{ transform:translateX(4px); }
.btn--ghost{
  --btn-bg: transparent; --btn-fg: var(--paper);
  border:1px solid var(--hairline-2);
}
.btn--ghost::before{ background:var(--lime); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--lime); }

/* ================================================================
   MARQUEE DE CLIENTES — la velocidad la modula el scroll (JS)
   ================================================================ */
.trust{
  border-block:1px solid var(--hairline);
  padding-block:26px;
  overflow:hidden;
  background:var(--ink);
}
.trust-track{
  display:flex; align-items:center; gap:clamp(38px,6vw,86px);
  width:max-content;
  will-change:transform;
}
.trust-track img{
  height:clamp(22px,2.4vw,32px); width:auto;
  filter:brightness(0) invert(1); opacity:.4;
  transition:opacity .4s, filter .4s;
}
.trust-track img:hover{ opacity:1; }

/* ================================================================
   MANIFIESTO — texto que se enciende palabra por palabra con el scroll
   ================================================================ */
.manifesto{ padding-block: clamp(110px,18vh,230px); }
.manifesto p{
  font-family:var(--font-display); font-weight:500;
  font-size: clamp(1.6rem, 4.6vw, 4.1rem);
  line-height:1.12; letter-spacing:-.035em;
  max-width:19ch;
}
.manifesto .w{ color:rgba(244,244,239,.38); transition:color .18s linear; }
.manifesto .w.lit{ color:var(--paper); }
.manifesto .w.key.lit{ color:var(--lime); }

/* ================================================================
   PILARES (los 2 servicios que vendemos)
   ================================================================ */
.pillars{ display:grid; gap:clamp(16px,1.6vw,22px); grid-template-columns:repeat(2,1fr); margin-top:clamp(38px,6vh,66px); }
@media (max-width:880px){ .pillars{ grid-template-columns:1fr; } }

.pillar{
  position:relative; overflow:hidden;
  border:1px solid var(--hairline);
  border-radius:var(--radius-l);
  background:var(--ink-2);
  padding:clamp(26px,3vw,44px);
  min-height:clamp(380px,48vh,520px);
  display:flex; flex-direction:column; justify-content:space-between;
  isolation:isolate;
  transition:border-color .5s var(--out), transform .6s var(--out);
}
.pillar::after{
  content:''; position:absolute; z-index:-1;
  width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(204,255,0,.20), transparent 66%);
  left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%) scale(.4);
  opacity:0; transition:opacity .5s, transform .6s var(--out);
  pointer-events:none;
}
.pillar:hover{ border-color:var(--hairline-2); }
.pillar:hover::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.pillar-n{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.24em;
  color:var(--lime); margin-bottom:auto;
}
.pillar h3{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:.96; letter-spacing:-.04em;
  margin:clamp(28px,4vh,52px) 0 14px;
}
.pillar p{ color:var(--paper-mid); max-width:38ch; margin-bottom:22px; }
.pillar-list{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.pillar-list li{
  font-size:.78rem; padding:6px 13px; border-radius:999px;
  border:1px solid var(--hairline); color:var(--paper-mid);
}
.pillar-go{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; color:var(--lime);
}
.pillar-go svg{ transition:transform .45s var(--out); }
.pillar:hover .pillar-go svg{ transform:translateX(6px); }

/* ================================================================
   PORTAFOLIO — carril horizontal anclado (pinned)
   ================================================================ */
.rail{ position:relative; }
.rail-viewport{
  position:sticky; top:0;
  height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.rail-track{
  display:flex; gap:clamp(16px,2vw,30px);
  padding-inline:var(--gut);
  will-change:transform;
}
.rail-head{
  flex:none; width:clamp(260px,26vw,380px);
  align-self:center; padding-right:clamp(10px,2vw,30px);
}
.rail-head h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.2rem,4.6vw,4rem); line-height:.92; letter-spacing:-.045em;
  margin:18px 0 16px;
}
.rail-head p{ color:var(--paper-mid); }
.rail-progress{
  margin-top:26px; height:1px; background:var(--hairline); position:relative;
}
.rail-progress span{
  position:absolute; inset:0 auto 0 0; background:var(--lime);
  transform:scaleX(var(--p,0)); transform-origin:left;
}

.work{
  flex:none;
  width:clamp(290px,30vw,440px);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--hairline);
  position:relative;
}
.work-media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.work-media img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transform:scale(1.06);
  transition:transform 1s var(--out), filter .6s;
  filter:grayscale(1) contrast(1.05) brightness(.82);
}
.work:hover .work-media img{ transform:scale(1); filter:none; }
.work-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,6,.85), transparent 58%);
}
.work-body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(18px,2vw,26px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.work-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,1.6vw,1.5rem); letter-spacing:-.03em; }
.work-kind{ color:var(--paper-dim); font-size:.8rem; }
.work-chip{
  flex:none; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  border:1px solid var(--hairline-2); border-radius:999px; padding:5px 11px;
  color:var(--paper-mid);
}
@media (max-width:820px){
  .rail-viewport{ position:static; height:auto; display:block; }
  .rail-track{
    transform:none !important; display:grid; grid-template-columns:1fr 1fr;
    gap:12px; padding-inline:var(--gut);
  }
  .rail-head{ width:auto; grid-column:1 / -1; padding:0 0 22px; }
  .work{ width:auto; }
  .work-body{ padding:14px; gap:8px; }
  .work-name{ font-size:1rem; }
  .work-kind{ font-size:.72rem; }
  .work-chip{ display:none; }
}
@media (max-width:520px){
  .rail-track{ grid-template-columns:1fr; }
  .work-media{ aspect-ratio:3/2; }
}

/* ================================================================
   PROCESO — pasos que se fijan y avanzan
   ================================================================ */
.process{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); }
@media (max-width:900px){ .process{ grid-template-columns:1fr; } }
.process-sticky{ position:sticky; top:clamp(90px,16vh,160px); align-self:start; }
.process-sticky h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem,4.4vw,3.7rem); line-height:.94; letter-spacing:-.045em;
  margin:18px 0 16px;
}
.process-sticky p{ color:var(--paper-mid); max-width:34ch; }
.step{
  border-top:1px solid var(--hairline);
  padding:clamp(24px,4vh,42px) 0;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,30px);
  opacity:.7; transition:opacity .5s var(--out);
}
.step.is-active{ opacity:1; }
.step-n{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  color:var(--lime); padding-top:6px;
}
.step h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,2.1vw,1.8rem); letter-spacing:-.03em; margin-bottom:8px;
}
.step p{ color:rgba(244,244,239,.68); max-width:46ch; }

/* ================================================================
   NÚMEROS
   ================================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border-block:1px solid var(--hairline); }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--ink); padding:clamp(26px,4vw,52px) clamp(18px,2vw,32px); }
.stat b{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.05em;
  color:var(--paper);
}
.stat b i{ font-style:normal; color:var(--lime); }
.stat span{ display:block; margin-top:10px; color:var(--paper-dim); font-size:.86rem; }

/* ================================================================
   FAQ
   ================================================================ */
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,80px); }
@media (max-width:900px){ .faq{ grid-template-columns:1fr; } }
.qa{ border-top:1px solid var(--hairline); }
.qa:last-child{ border-bottom:1px solid var(--hairline); }
.qa-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(18px,2.6vh,26px) 0; text-align:left;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.02rem,1.6vw,1.28rem); letter-spacing:-.02em;
  transition:color .3s;
}
.qa-q:hover{ color:var(--lime); }
.qa-q i{
  flex:none; width:22px; height:22px; position:relative;
}
.qa-q i::before,.qa-q i::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:1px; background:currentColor;
  transition:transform .45s var(--out);
}
.qa-q i::after{ transform:rotate(90deg); }
.qa-q[aria-expanded="true"] i::after{ transform:rotate(0); }
.qa-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--out);
}
.qa-a > div{ overflow:hidden; }
.qa-a > div > p{ padding-bottom:clamp(18px,2.6vh,26px); color:var(--paper-mid); max-width:60ch; }
.qa.is-open .qa-a{ grid-template-rows:1fr; }

/* ================================================================
   CTA FINAL + FOOTER
   ================================================================ */
.closer{
  position:relative; overflow:hidden;
  padding-block: clamp(110px,18vh,210px);
  text-align:center;
}
.closer h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem,8.4vw,7.4rem); line-height:.9; letter-spacing:-.05em;
  margin-bottom:26px;
}
.closer h2 em{ font-style:normal; color:var(--lime); }
.closer p{ color:var(--paper-mid); max-width:52ch; margin:0 auto 34px; }
.closer-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.foot{ border-top:1px solid var(--hairline); padding-block:clamp(40px,6vh,70px) 26px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(24px,4vw,60px); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } }
.foot-brand img{ height:28px; width:auto; filter:brightness(0) invert(1); margin-bottom:16px; }
.foot-brand p{ color:var(--paper-dim); max-width:34ch; font-size:.9rem; }
.foot h2{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:16px; font-weight:500;
}
.foot ul{ list-style:none; display:grid; gap:9px; font-size:.9rem; }
.foot ul a{ color:var(--paper-mid); transition:color .3s; }
.foot ul a:hover{ color:var(--lime); }
.foot-base{
  margin-top:clamp(34px,5vh,60px); padding-top:20px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.78rem; color:var(--paper-dim);
}

/* ================================================================
   REVEALS genéricos
   ================================================================ */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--out), transform .9s var(--out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ================================================================
   MOVIMIENTO REDUCIDO — apaga todo lo no esencial
   ================================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .cursor-dot,.cursor-ring{ display:none; }
  .rail-track{ transform:none !important; }
  .rail-viewport{ position:static; height:auto; display:block; }
  .rail-track{ flex-direction:column; padding-inline:0; }
  .work{ width:100%; }
  .manifesto .w{ color:var(--paper); }
}

/* ================================================================
   CHAT — orbe flotante + panel
   ================================================================ */
.chat-launch{
  position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,30px);
  z-index:8600;
  display:flex; align-items:center; gap:11px;
  padding:12px 20px 12px 14px; border-radius:999px;
  background:var(--lime); color:var(--ink);
  font-weight:600; font-size:.9rem;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:transform .5s var(--spring), opacity .3s;
}
.chat-launch:hover{ transform:translateY(-3px); }
.chat-launch.is-hidden{ opacity:0; pointer-events:none; transform:scale(.85); }
.chat-launch-orb{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:var(--ink);
  position:relative; overflow:hidden;
}
.chat-launch-orb::after{
  content:''; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, var(--lime), transparent 40%, var(--lime));
  animation:orbSpin 3.4s linear infinite;
}
.chat-launch-orb::before{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--ink); z-index:2;
}
@keyframes orbSpin{ to{ transform:rotate(360deg); } }
.chat-badge{
  position:absolute; top:-4px; right:-2px;
  width:10px; height:10px; border-radius:50%; background:#ff4d4d;
  border:2px solid var(--lime);
}

.chat-panel{
  position:fixed; right:clamp(12px,2.4vw,30px); bottom:clamp(12px,2.4vw,30px);
  z-index:8700;
  width:min(410px, calc(100vw - 24px));
  height:min(620px, calc(100svh - 24px));
  background:var(--ink-2);
  border:1px solid var(--hairline-2);
  border-radius:var(--radius-l);
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform-origin:bottom right;
  transform:scale(.9) translateY(18px); opacity:0; visibility:hidden;
  transition:transform .5s var(--out), opacity .35s, visibility .35s;
}
.chat-panel.is-open{ transform:none; opacity:1; visibility:visible; }

.chat-head{
  display:flex; align-items:center; gap:12px;
  padding:16px 16px 15px; border-bottom:1px solid var(--hairline);
  background:var(--ink-3);
}
.chat-avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--lime); color:var(--ink);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
}
.chat-id{ flex:1; min-width:0; }
.chat-id b{ display:block; font-size:.92rem; font-weight:600; }
.chat-id span{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--paper-dim); }
.chat-id span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#3ddc84; }
.chat-close{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--paper-mid); transition:background-color .3s,color .3s; }
.chat-close:hover{ background:var(--ink-4); color:var(--paper); }

.chat-log{
  flex:1; min-height:0; overflow-y:auto;
  padding:18px 16px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin;
}
.msg{
  max-width:86%; padding:11px 15px; border-radius:16px;
  font-size:.9rem; line-height:1.5;
  animation: msgIn .45s var(--out) both;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } }
.msg--bot{ align-self:flex-start; background:var(--ink-4); border-bottom-left-radius:5px; }
.msg--me{ align-self:flex-end; background:var(--lime); color:var(--ink); border-bottom-right-radius:5px; font-weight:500; }
.msg--sys{ align-self:center; font-size:.76rem; color:var(--paper-dim); text-align:center; max-width:100%; }
.msg--err{ align-self:flex-start; background:rgba(255,77,77,.12); border:1px solid rgba(255,77,77,.35); color:#ffb3b3; }

.typing{ display:flex; gap:4px; align-self:flex-start; padding:14px 16px; background:var(--ink-4); border-radius:16px; border-bottom-left-radius:5px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--paper-dim); animation:typeBounce 1.1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typeBounce{ 0%,60%,100%{ transform:none; opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }

.chat-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.chat-quick button{
  font-size:.78rem; padding:7px 13px; border-radius:999px;
  border:1px solid var(--hairline-2); color:var(--paper-mid);
  transition:border-color .3s, color .3s, background-color .3s;
}
.chat-quick button:hover{ border-color:var(--lime); color:var(--lime); }

.chat-handoff{ padding:0 16px 12px; }
.chat-handoff a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#25D366; color:#04210f; font-weight:700;
  padding:13px; border-radius:12px; font-size:.9rem;
}

/* El widget de Turnstile solo ocupa sitio cuando de verdad se dibuja. */
#chatTurnstile:empty{ display:none; }
#chatTurnstile{ padding:0 16px 10px; }
#chatTurnstile iframe{ max-width:100%; }

.chat-form{
  border-top:1px solid var(--hairline);
  padding:12px 12px 14px; display:flex; gap:9px; align-items:flex-end;
  background:var(--ink-3);
}
.chat-form textarea{
  flex:1; resize:none; max-height:120px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--hairline); border-radius:12px;
  padding:11px 13px; font-family:inherit; font-size:.9rem; line-height:1.45;
}
.chat-form textarea::placeholder{ color:var(--paper-dim); }
.chat-send{
  width:42px; height:42px; flex:none; border-radius:12px;
  background:var(--lime); color:var(--ink);
  display:grid; place-items:center;
  transition:opacity .3s, transform .3s var(--out);
}
.chat-send:hover:not(:disabled){ transform:translateY(-2px); }
.chat-send:disabled{ opacity:.35; }
.chat-legal{ padding:0 16px 12px; font-size:.68rem; color:var(--paper-dim); text-align:center; }
.chat-legal a{ color:var(--paper-mid); text-decoration:underline; }

/* trampa para bots: invisible para humanos, presente en el DOM */
.hp-field{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

@media (max-width:520px){
  .chat-panel{ right:8px; left:8px; bottom:8px; width:auto; height:calc(100svh - 16px); }
  .chat-launch span:not(.chat-launch-orb){ font-size:.84rem; }
  .chat-launch{ padding:11px 17px 11px 12px; }
}

/* ================================================================
   TRANSICIONES ENTRE PÁGINAS (View Transitions API, nativa)
   Donde no hay soporte, la navegación es la de siempre.
   ================================================================ */
@view-transition{ navigation: auto; }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: vtOut .35s var(--inout) both; }
  ::view-transition-new(root){ animation: vtIn .5s var(--out) both; }
}
@keyframes vtOut{ to{ opacity:0; transform:translateY(-14px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(18px); } }

/* ================================================================
   PÁGINAS DE SERVICIO
   ================================================================ */
.page-hero{
  position:relative; overflow:hidden;
  padding: clamp(150px,20vh,220px) var(--gut) clamp(60px,9vh,110px);
  border-bottom:1px solid var(--hairline);
}
.page-hero::before{
  content:''; position:absolute; inset:-40% -10% auto -10%; height:120%;
  background:radial-gradient(46% 40% at 26% 20%, rgba(204,255,0,.13), transparent 68%);
  pointer-events:none;
}
.page-hero-inner{ position:relative; max-width:var(--maxw); margin-inline:auto; }
.page-hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem,7vw,6.4rem); line-height:.9; letter-spacing:-.05em;
  margin:20px 0 24px; max-width:17ch;
}
.page-hero h1 em{ font-style:normal; color:var(--lime); }
.page-hero .lede{ color:var(--paper-mid); max-width:52ch; font-size:clamp(1rem,1.1vw,1.15rem); margin-bottom:30px; }

.grid-3{ display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-l); overflow:hidden; grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid-3{ grid-template-columns:1fr; } }
.cell{ background:var(--ink); padding:clamp(24px,3vw,38px); transition:background-color .5s var(--out); }
.cell:hover{ background:var(--ink-2); }
.cell-n{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em; color:var(--lime); }
.cell h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,1.7vw,1.4rem); letter-spacing:-.03em; margin:16px 0 10px; }
.cell p{ color:var(--paper-mid); font-size:.93rem; }

.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
.compare-col{ border:1px solid var(--hairline); border-radius:var(--radius-l); padding:clamp(24px,3vw,38px); }
.compare-col--good{ border-color:rgba(204,255,0,.3); background:linear-gradient(180deg, rgba(204,255,0,.05), transparent 60%); }
.compare-col h3{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:-.03em; margin-bottom:18px; }
.compare-col ul{ list-style:none; display:grid; gap:12px; }
.compare-col li{ display:grid; grid-template-columns:auto 1fr; gap:11px; color:var(--paper-mid); font-size:.93rem; }
.compare-col li::before{ content:'✕'; color:var(--paper-dim); font-size:.85rem; line-height:1.6; }
.compare-col--good li::before{ content:'✓'; color:var(--lime); }

.section-head{ margin-bottom:clamp(30px,5vh,58px); }
.section-head h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:.95; letter-spacing:-.045em;
  margin-top:16px; max-width:18ch;
}
.section-head p{ color:var(--paper-mid); max-width:56ch; margin-top:16px; }

.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
@media (max-width:900px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .work-grid{ grid-template-columns:1fr; } }
.work-grid .work{ width:auto; }

/* ================================================================
   MOCKUPS EN LAS TARJETAS — la imagen sangra desde el borde derecho
   y se funde con la tarjeta mediante una mascara, para que no haya
   un corte duro entre foto y fondo.
   ================================================================ */
.pillar > *:not(.pillar-media){ position:relative; z-index:1; }
.pillar-media{
  position:absolute; inset:0 0 0 auto; z-index:0;
  width:44%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 54%);
          mask-image:linear-gradient(to right, transparent 0%, #000 54%);
}
.pillar-media img{
  width:100%; height:100%; object-fit:cover; object-position:center right;
  opacity:.72;
  transform:scale(1.02);
  transition:transform 1.1s var(--out), opacity .6s var(--out);
}
.pillar:hover .pillar-media img{ transform:scale(1.07); opacity:1; }
.pillar h3{ max-width:13ch; }
.pillar p{ max-width:30ch; }
.pillar-list{ max-width:32ch; }

@media (max-width:1180px) and (min-width:881px){
  .pillar-media{ width:40%; opacity:.55; }
}
@media (max-width:600px){
  .pillar-media{ width:60%; opacity:.4; }
  .pillar h3, .pillar p, .pillar-list{ max-width:none; }
}

/* mockup en el encabezado de las paginas de servicio */
.page-hero{ isolation:isolate; }
.page-hero-media{
  position:absolute; inset:0 0 0 auto; z-index:-1;
  width:40%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 46%);
          mask-image:linear-gradient(to right, transparent 0%, #000 46%);
}
.page-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center right; opacity:.72; }
@media (max-width:820px){ .page-hero-media{ width:62%; opacity:.32; } }

/* ================================================================
   BANDA DE OTROS SERVICIOS
   ================================================================ */
.more-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
@media (max-width:900px){ .more-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .more-grid{ grid-template-columns:1fr; } }

.more-card{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--hairline); border-radius:var(--radius-l);
  background:var(--ink-2);
  transition:border-color .5s var(--out);
}
.more-card:hover{ border-color:var(--hairline-2); }
.more-card-media{ aspect-ratio:4/5; overflow:hidden; }
.more-card-media img{
  width:100%; height:100%; object-fit:cover; object-position:center right;
  opacity:.78; transform:scale(1.03);
  transition:transform 1s var(--out), opacity .5s var(--out);
}
.more-card:hover .more-card-media img{ transform:scale(1.09); opacity:1; }
.more-card-body{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(16px,1.8vw,22px);
  background:linear-gradient(to top, rgba(6,6,6,.94) 34%, transparent);
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.more-card-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1rem,1.3vw,1.18rem); letter-spacing:-.03em; }
.more-card-go{ flex:none; color:var(--lime); transition:transform .45s var(--out); }
.more-card:hover .more-card-go{ transform:translateX(4px); }

/* ================================================================
   MOCKUPS QUE SE ALTERNAN SOLOS
   Las imagenes se apilan en el mismo hueco y se funden entre si.
   Se detiene al pasar el cursor por encima, para poder mirarla.
   ================================================================ */
.swap > picture{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.1s var(--out);
}
.swap > picture > img{ width:100%; height:100%; object-fit:cover; }

/* Sin JS (o con movimiento reducido) se ve la primera y no pasa nada mas. */
.swap > picture:first-child{ opacity:1; }

/* En cuanto el JS toma el mando, quien decide es la clase is-on.
   Estas dos reglas van DESPUES a proposito: comparten especificidad con la
   de :first-child y tienen que ganarle. */
.swap.is-live > picture{ opacity:0; }
.swap.is-live > picture.is-on{ opacity:1; }

/* ================================================================
   FONDO DEL HERO — piezas de diseno web y automatizacion que se
   turnan detras de la lluvia. Van muy atenuadas: son el decorado,
   no el protagonista, y el titular tiene que seguir legible.
   ================================================================ */
.hero-bg{
  position:absolute; inset:0; z-index:-3;
  pointer-events:none;
}
.hero-bg > picture{ transition:opacity 1.8s var(--out); }
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:center right;
  opacity:.46;
  filter:grayscale(.18) brightness(1.12) contrast(1.02);
}

/* con el fondo puesto, el degradado de respaldo estorba */
.hero-fallback{ background:var(--ink); }

@media (max-width: 820px){
  .hero-bg img{ opacity:.38; object-position:center; }
}

/* ================================================================
   RESEÑAS DE GOOGLE
   ================================================================ */
.reviews-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(28px,4vh,48px);
}
.reviews-score{ display:flex; align-items:center; gap:16px; }
.reviews-score b{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; letter-spacing:-.04em;
}
.stars{ color:var(--lime); letter-spacing:.12em; font-size:1rem; }
.reviews-score span{ display:block; color:var(--paper-mid); font-size:.86rem; margin-top:6px; }

.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .reviews-grid{ grid-template-columns:1fr; } }

.review{
  border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--ink-2);
  padding:clamp(20px,2.2vw,26px);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .5s var(--out), transform .5s var(--out);
}
.review:hover{ border-color:var(--hairline-2); transform:translateY(-3px); }
.review-top{ display:flex; align-items:center; gap:12px; }
.review-ini{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:var(--ink-4); color:var(--lime);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700;
}
.review-who b{ display:block; font-size:.94rem; font-weight:600; }
.review-who span{ font-size:.76rem; color:var(--paper-dim); }
.review p{ color:var(--paper-mid); font-size:.93rem; }

/* ================================================================
   CONTACTO
   ================================================================ */
.contact{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }

.contact-data{ display:grid; gap:20px; align-content:start; }
.contact-line{ display:grid; gap:4px; }
.contact-line b{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paper-dim); font-weight:500;
}
.contact-line a, .contact-line span{ color:var(--paper); }
.contact-line a{ transition:color .3s; }
.contact-line a:hover{ color:var(--lime); }

.contact-form{
  border:1px solid var(--hairline); border-radius:var(--radius-l);
  background:var(--ink-2);
  padding:clamp(24px,3vw,38px);
  display:grid; gap:16px;
}
.field{ display:grid; gap:7px; }
.field label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-dim);
}
.field input, .field select, .field textarea{
  width:100%;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--hairline); border-radius:10px;
  padding:13px 14px;
  font-family:inherit; font-size:.94rem;
  transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--lime); }
.field input::placeholder, .field textarea::placeholder{ color:var(--paper-dim); }
.field select{ appearance:none; cursor:pointer; }
.contact-form .btn{ justify-content:center; margin-top:4px; }
.contact-note{ font-size:.76rem; color:var(--paper-dim); text-align:center; }

/* ================================================================
   PROFUNDIDAD 3D (oct 2026) — solo visual, nada de contenido
   ================================================================ */
/* Botones: se hunden un poco al tocarlos. `scale` va aparte de `transform`
   para no pelear con el efecto magnetico, que escribe transform en linea. */
.btn{ transition:scale .16s var(--out); }
.btn:active{ scale:.97; }

/* Tarjetas de servicio: inclinacion 3D con el raton (solo escritorio) */
@media (hover:hover) and (pointer:fine){
  .pillars{ perspective:1400px; }
  .pillar.is-in{
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
    transform-style:preserve-3d;
  }
  .pillar.is-tilting{ transition:border-color .5s var(--out); }
}

/* Carril de trabajos: las tarjetas giran segun su distancia al centro */
.work.has-depth{ transform:perspective(1200px) rotateY(var(--wry,0deg)) scale(var(--ws,1)); }

@media (prefers-reduced-motion: reduce){
  .btn:active{ scale:1; }
  .pillar.is-in{ transform:none !important; }
  .work.has-depth{ transform:none !important; }
}