/* ==========================================================================
   La Vicuña Digital Agency — style.css
   Paleta: tinta #0A0801 / hueso #D9D7D4
   Tipografías: Marcellus (display) · Hanken Grotesk (texto) · Spline Sans Mono
   ========================================================================== */

:root{
  --ink:#0A0801;
  --bone:#D9D7D4;
  --bone-dim:rgba(217,215,212,.62);
  --bone-faint:rgba(217,215,212,.22);
  --accent:#7FAE93;            /* verde patagónico claro */
  --accent-soft:rgba(127,174,147,.32);
  --accent-faint:rgba(127,174,147,.12);
  --accent-ink:#3F6B54;        /* verde profundo sobre fondo hueso */
  --line:rgba(217,215,212,.16);
  --line-ink:rgba(10,8,1,.16);
  --work-hover:#141007;
  /* Textura grunge sutil (ruido SVG) para los lavados verdes */
  --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  --serif:"Marcellus",serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",monospace;
  --wrap:1160px;
  --pad:clamp(20px,5vw,64px);
}

/* Tema claro: se invierten tinta y hueso */
:root[data-theme="light"]{
  --ink:#E3E1DC;
  --bone:#171307;
  --bone-dim:rgba(23,19,7,.66);
  --bone-faint:rgba(23,19,7,.26);
  --accent:#3F6B54;
  --accent-soft:rgba(63,107,84,.28);
  --accent-faint:rgba(127,174,147,.16);
  --accent-ink:#7FAE93;
  --line:rgba(10,8,1,.16);
  --line-ink:rgba(217,215,212,.2);
  --work-hover:#D8D4CC;
}

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

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s,color .5s;
}

/* El hero mantiene el video oscuro en ambos temas */
:root[data-theme="light"] .hero{background:#0A0801;color:#D9D7D4}
:root[data-theme="light"] .hero .mono,
:root[data-theme="light"] .hero-title .sub,
:root[data-theme="light"] .hero-sub{color:rgba(217,215,212,.62)}
:root[data-theme="light"] .hero .scroll-hint{color:#7FAE93}
:root[data-theme="light"] .hero .hollow{-webkit-text-stroke-color:#7FAE93}
:root[data-theme="light"] .hero .btn{border-color:rgba(217,215,212,.25)}
:root[data-theme="light"] header{
  background:linear-gradient(to bottom,rgba(227,225,220,.88),rgba(227,225,220,0));
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:var(--accent);color:var(--ink)}

/* Luz cálida que sigue al mouse */
#spotlight{
  position:fixed;
  left:0;top:0;
  width:640px;
  height:640px;
  margin:-320px 0 0 -320px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(127,174,147,.14) 0%,rgba(127,174,147,.05) 40%,transparent 70%);
  pointer-events:none;
  z-index:1500;
  mix-blend-mode:screen;
  will-change:transform;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.mono{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-dim);
}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12}
h2{font-size:clamp(30px,4.6vw,54px);letter-spacing:.01em}

/* ---- Grano de película ---------------------------------------------- */
#grain{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:2000;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:overlay;
}

/* ---- Header ----------------------------------------------------------- */
header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px var(--pad);
  background:linear-gradient(to bottom,rgba(10,8,1,.82),rgba(10,8,1,0));
  backdrop-filter:blur(2px);
}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:30px;height:auto}
.brand .logo{
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.06em;
}

header nav{display:flex;gap:clamp(14px,3vw,34px)}
header nav a{
  position:relative;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  padding:6px 2px;
  transition:color .3s;
}
header nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.22,.6,.2,1);
}
header nav a:hover,header nav a:focus-visible{color:var(--bone)}
header nav a:hover::after,header nav a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

.header-tools{display:flex;align-items:center;gap:10px}

.theme-toggle{
  font-size:17px;
  line-height:1;
  width:32px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--bone-dim);
  transition:color .3s,transform .5s;
}
.theme-toggle:hover,.theme-toggle:focus-visible{color:var(--accent)}
:root[data-theme="light"] .theme-toggle{transform:rotate(180deg)}

.lang{
  display:flex;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
}
.lang button{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  padding:6px 12px;
  color:var(--bone-dim);
  transition:background .3s,color .3s;
}
.lang button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}

/* ---- Hero ------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

#atmos,.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
.hero-video{opacity:.5;filter:grayscale(1) contrast(1.05)}
#atmos{z-index:-3}

/* Cover estatico para mobile (donde el video se oculta a proposito para no
   gastar datos). Objeto posicionado a la derecha para que el escudo de la
   imagen no quede recortado por el object-fit:cover en pantallas angostas. */
.hero-cover-mobile{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:80% 45%;
  z-index:-2;
  opacity:.5;
  filter:grayscale(1) contrast(1.05);
}
/* Mismo corte que usa js/main.js para ocultar el video de fondo */
@media (max-width:760px){
  .hero-cover-mobile{display:block}
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(10,8,1,0) 0%,rgba(10,8,1,.55) 78%),
    linear-gradient(to bottom,rgba(10,8,1,.35),rgba(10,8,1,0) 30%,rgba(10,8,1,0) 70%,#0A0801);
}

/* Tinte cálido animado sobre el video */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse at 20% 80%,rgba(127,174,147,.22),transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(120,90,150,.10),transparent 55%);
  animation:tint-drift 14s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes tint-drift{
  from{opacity:.55;transform:scale(1)}
  to{opacity:1;transform:scale(1.12)}
}

.hero-center{
  text-align:center;
  padding:0 var(--pad);
  animation:hero-in 1.6s cubic-bezier(.22,.6,.2,1) both;
}
@keyframes hero-in{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

.hero-title{
  font-size:clamp(52px,11vw,132px);
  letter-spacing:.03em;
  margin:18px 0 10px;
}
.hero-title .hollow{
  color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  animation:hollow-glow 4s ease-in-out infinite alternate;
}
@keyframes hollow-glow{
  from{text-shadow:0 0 0 transparent}
  to{text-shadow:0 0 26px var(--accent-soft)}
}
.hero-center{will-change:transform}
.hero-title .sub{
  display:block;
  font-size:clamp(16px,2.6vw,26px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin-top:10px;
}

.hero-sub{
  color:var(--bone-dim);
  letter-spacing:.04em;
  margin-bottom:34px;
}
/* Slogan/hashtag del hero */
.hero-tag{
  font-family:var(--mono);
  font-size:clamp(14px,2vw,19px);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent);
  text-indent:.3em;
}
:root[data-theme="light"] .hero .hero-tag{color:#7FAE93}

.btn{
  position:relative;
  display:inline-block;
  overflow:hidden;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:14px 30px;
  border:1px solid var(--bone-faint);
  border-radius:2px;
  transition:color .35s,border-color .35s,box-shadow .35s,transform .35s;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    var(--grunge),
    linear-gradient(120deg,var(--accent),#9FC4AC);
  background-blend-mode:soft-light,normal;
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.22,.6,.2,1);
}
.btn:hover,.btn:focus-visible{
  color:var(--ink);
  border-color:var(--accent);
  box-shadow:0 0 34px var(--accent-soft);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0)}

.scroll-hint{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  color:var(--accent);
  animation:hint 2.6s ease-in-out infinite;
}
@keyframes hint{
  0%,100%{opacity:.35;transform:translate(-50%,0)}
  50%{opacity:.9;transform:translate(-50%,6px)}
}

/* ---- Secciones -------------------------------------------------------- */
main section{padding:clamp(90px,12vw,150px) 0}
.hero{padding:0}

.sec-head{margin-bottom:clamp(40px,6vw,70px)}
.sec-head h2{margin-top:16px}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.6,.2,1)}
.rv.in{opacity:1;transform:none}

/* Secciones "papel" (invertidas: hueso sobre tinta) */
.paper{
  background:
    var(--grunge),
    radial-gradient(ellipse at 85% 10%,rgba(127,174,147,.2),transparent 55%),
    var(--bone);
  background-blend-mode:soft-light,normal,normal;
  color:var(--ink);
}
.paper .mono{color:rgba(10,8,1,.55)}

.sec-head .mono{color:var(--accent)}
.paper .sec-head .mono{color:var(--accent-ink)}
.sec-head h2::after{
  content:"";
  display:block;
  width:56px;
  height:2px;
  margin-top:18px;
  background:var(--accent);
}
.paper .sec-head h2::after{background:var(--accent-ink)}

/* ---- Servicios --------------------------------------------------------- */
.services{
  position:relative;
  padding-top:0;
  overflow:hidden;
  background:#0A0801;
}
/* Servicios es una sección "cine" siempre oscura (como el hero): en light
   mode mantenemos fondo oscuro y re-escalamos la paleta a claro-sobre-oscuro
   para que el texto (incluida la descripción y el overlay) sea legible. */
:root[data-theme="light"] .services{
  --bone:#D9D7D4;
  --bone-dim:rgba(217,215,212,.62);
  --accent:#7FAE93;
  --accent-soft:rgba(127,174,147,.32);
  --ink:#0A0801;
  --line:rgba(217,215,212,.16);
  color:var(--bone);
}
/* Video de fondo de la sección */
.svc-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.62;
  filter:grayscale(.15) contrast(1.04);
  pointer-events:none;
}
/* Velo + textura para que el texto sea legible sobre el video */
.services::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    var(--grunge),
    radial-gradient(ellipse at 50% 45%,rgba(10,8,1,.22),rgba(10,8,1,.6));
  background-blend-mode:soft-light,normal;
  opacity:.82;
  pointer-events:none;
}
.services > .marquee,
.services > .wrap{position:relative;z-index:1}
.services .sec-head{margin-bottom:clamp(30px,4vw,50px)}
.svc-hint{margin-top:16px;color:var(--accent)}

/* En mobile (lista, sin campo flotante) el video se ve más: velo más suave
   y sombra en el texto para mantener la legibilidad. */
@media (hover:none){
  .svc-video{opacity:.74}
  .services::after{opacity:.6}
  .services .sec-head h2,
  .services .svc-word{text-shadow:0 2px 20px rgba(10,8,1,.9)}
  .svc-desc p{text-shadow:0 1px 12px rgba(10,8,1,.85)}
}
/* El hint de "arrastrar" solo aplica en desktop (donde hay campo flotante);
   en touch se muestra el de "tocar". */
.svc-hint .hint-tap{display:none}
@media (hover:none){
  .svc-hint .hint-drag{display:none}
  .svc-hint .hint-tap{display:inline}
}

/* ---- Marquee ----------------------------------------------------------- */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:18px 0;
  margin-bottom:clamp(70px,9vw,120px);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;
  align-items:center;
  gap:clamp(26px,4vw,56px);
  width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee-track span{
  font-family:var(--serif);
  font-size:clamp(20px,2.6vw,30px);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--bone-dim);
}
.marquee-track .dot{
  font-size:15px;
  color:var(--accent);
  animation:dot-spin 6s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes dot-spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* ---- Servicios: palabras flotantes + pintado al clickear --------------- */
.svc-lines{list-style:none}
.svc-item{border-bottom:1px solid var(--line)}
.svc-item:first-child{border-top:1px solid var(--line)}

.svc-trigger{
  width:100%;
  display:flex;
  align-items:center;
  gap:clamp(16px,3.4vw,40px);
  padding:clamp(20px,3vw,32px) 0;
  text-align:left;
  outline:none;
}
.svc-num{
  font-family:var(--mono);
  font-size:13px;
  color:var(--accent);
  flex-shrink:0;
}

/* La palabra flota suspendida: deriva en X/Y + leve rotación */
.svc-word{
  position:relative;
  display:inline-block;
  font-family:var(--serif);
  font-size:clamp(38px,7vw,88px);
  line-height:1.06;
  letter-spacing:.01em;
  animation:svc-float var(--dur,8.5s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  will-change:transform;
}
/* Sombra que "respira" bajo la palabra, reforzando que flota */
.svc-word::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-.36em;
  height:.22em;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 72%);
  filter:blur(7px);
  transform:scaleX(.7);
  transform-origin:center;
  animation:svc-shadow var(--dur,8.5s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  pointer-events:none;
}
.svc-item:nth-child(1) .svc-word{--dur:8.5s;--delay:0s}
.svc-item:nth-child(2) .svc-word{--dur:9.2s;--delay:-1.6s}
.svc-item:nth-child(3) .svc-word{--dur:7.8s;--delay:-3.1s}
.svc-item:nth-child(4) .svc-word{--dur:9.6s;--delay:-4.4s}
.svc-item:nth-child(5) .svc-word{--dur:8.1s;--delay:-2.3s}
.svc-item:nth-child(6) .svc-word{--dur:9s;--delay:-5.2s}
.svc-item:nth-child(7) .svc-word{--dur:8.7s;--delay:-6.5s}
@keyframes svc-float{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  25%{transform:translate3d(5px,-10px,0) rotate(-.5deg)}
  50%{transform:translate3d(0,-15px,0) rotate(0deg)}
  75%{transform:translate3d(-5px,-7px,0) rotate(.5deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
@keyframes svc-shadow{
  0%,100%{transform:scaleX(.7);opacity:.5}
  50%{transform:scaleX(.56);opacity:.28}
}

/* Capa base: contorno tenue. Capa fill: color acento que se "pinta". */
.w-base{color:var(--bone-dim);transition:color .4s}
.w-fill{
  position:absolute;
  left:0;top:0;
  color:var(--accent);
  white-space:nowrap;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s cubic-bezier(.22,.6,.2,1);
  pointer-events:none;
}
.svc-trigger:hover .w-base,.svc-trigger:focus-visible .w-base{color:var(--bone)}
.svc-item.open .w-fill{clip-path:inset(0 0 0 0)}
.svc-item.open .w-base{color:transparent}
.svc-item.open .svc-word,
.svc-item.open .svc-word::after{animation-play-state:paused}
.svc-item.open .svc-word::after{opacity:.4}

.svc-plus{
  margin-left:auto;
  font-family:var(--mono);
  font-size:24px;
  color:var(--accent);
  transition:transform .45s cubic-bezier(.22,.6,.2,1);
  flex-shrink:0;
}
.svc-item.open .svc-plus{transform:rotate(135deg)}

/* Texto descriptivo que se despliega */
.svc-desc{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,.6,.2,1);
}
.svc-item.open .svc-desc{grid-template-rows:1fr}
.svc-desc > p{
  overflow:hidden;
  max-width:680px;
  margin-left:clamp(30px,7vw,88px);
  color:var(--bone-dim);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s .1s,transform .5s .1s;
}
.svc-item.open .svc-desc > p{
  opacity:1;
  transform:none;
  padding-bottom:clamp(24px,3.4vw,36px);
}

@media (max-width:640px){
  .svc-desc > p{margin-left:34px}
}

/* Descripción con diagrama (Automatización de flujos): colapso por max-height
   para admitir varios hijos (texto + flujo). */
.svc-desc.has-flow{
  display:block;
  max-height:0;
  overflow:hidden;
  transition:max-height .6s cubic-bezier(.22,.6,.2,1);
}
.svc-item.open .svc-desc.has-flow{max-height:1600px}
.svc-desc.has-flow > p{
  max-width:680px;
  margin-left:clamp(30px,7vw,88px);
  color:var(--bone-dim);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s .1s,transform .5s .1s;
}
.svc-item.open .svc-desc.has-flow > p{opacity:1;transform:none}

/* ---- Diagramas de flujo animados (3 ejemplos, pipeline vertical) ------- */
.flows{
  display:flex;
  flex-direction:column;
  gap:clamp(22px,3vw,32px);
  margin:clamp(18px,2.4vw,26px) 0 clamp(24px,3.4vw,34px) clamp(30px,7vw,88px);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s .18s,transform .6s .18s;
}
.svc-item.open .svc-desc.has-flow .flows{opacity:1;transform:none}
.flow-group{display:flex;flex-direction:column;gap:12px}
.flow-title{
  color:var(--accent);
  font-size:11px;
  letter-spacing:.2em;
}
/* Cada ejemplo arranca desfasado para que el movimiento se vea más vivo */
.flow-group:nth-of-type(1){--fo:0s}
.flow-group:nth-of-type(2){--fo:.55s}
.flow-group:nth-of-type(3){--fo:1.1s}
.flow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.flow-node{display:flex;align-items:center;gap:14px}
.flow-ico{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--bone-dim);
  background:rgba(10,8,1,.28);
  animation:flow-ico 3.2s ease-in-out infinite calc(var(--d,0s) + var(--fo,0s));
}
.flow-ico svg{width:22px;height:22px}
.flow-lbl{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bone-dim);
  animation:flow-lbl 3.2s ease-in-out infinite calc(var(--d,0s) + var(--fo,0s));
}
/* conector vertical, centrado bajo el ícono (46px de ancho) */
.flow-link{
  position:relative;
  width:46px;
  height:26px;
  flex-shrink:0;
}
.flow-link::before{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:2px;height:100%;
  margin-left:-1px;
  background:var(--line);
}
.flow-link::after{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:8px;height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  opacity:0;
  animation:flow-run 3.2s linear infinite calc(var(--ld,0s) + var(--fo,0s));
}
.flow-node:nth-of-type(1){--d:0s}
.flow-node:nth-of-type(2){--d:.8s}
.flow-node:nth-of-type(3){--d:1.6s}
.flow-node:nth-of-type(4){--d:2.4s}
.flow-link:nth-of-type(1){--ld:.45s}
.flow-link:nth-of-type(2){--ld:1.25s}
.flow-link:nth-of-type(3){--ld:2.05s}

/* Variante "proceso": pipeline mas largo (5-6 pasos) con barrido pausado
   para que el punto recorra todos los nodos de arriba a abajo. */
.flows.proc .flow-ico,
.flows.proc .flow-lbl,
.flows.proc .flow-link::after{animation-duration:5s}
.flows.proc .flow-node:nth-of-type(1){--d:0s}
.flows.proc .flow-node:nth-of-type(2){--d:.7s}
.flows.proc .flow-node:nth-of-type(3){--d:1.4s}
.flows.proc .flow-node:nth-of-type(4){--d:2.1s}
.flows.proc .flow-node:nth-of-type(5){--d:2.8s}
.flows.proc .flow-node:nth-of-type(6){--d:3.5s}
.flows.proc .flow-node:nth-of-type(7){--d:4.2s}
.flows.proc .flow-link:nth-of-type(1){--ld:.35s}
.flows.proc .flow-link:nth-of-type(2){--ld:1.05s}
.flows.proc .flow-link:nth-of-type(3){--ld:1.75s}
.flows.proc .flow-link:nth-of-type(4){--ld:2.45s}
.flows.proc .flow-link:nth-of-type(5){--ld:3.15s}
.flows.proc .flow-link:nth-of-type(6){--ld:3.85s}

@keyframes flow-ico{
  0%,100%{border-color:var(--line);color:var(--bone-dim);box-shadow:none;transform:none}
  10%{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-faint),0 0 24px var(--accent-soft);transform:translateY(-2px)}
  32%{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-faint),0 0 16px var(--accent-soft);transform:none}
  46%{border-color:var(--line);color:var(--bone-dim);box-shadow:none}
}
@keyframes flow-lbl{
  0%,100%{color:var(--bone-dim)}
  10%,32%{color:var(--accent)}
  46%{color:var(--bone-dim)}
}
@keyframes flow-run{
  0%{top:-2px;opacity:0}
  12%{opacity:1}
  46%{top:100%;opacity:1}
  56%,100%{top:100%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .flow-ico,.flow-lbl,.flow-link::after{animation:none}
  .flow-link::after{opacity:0}
}

/* ---- Servicios: modo "campo flotante" (desktop) ------------------------ */
/* Activado por JS (.services.scatter). Cada opción se mueve libre por la
   pantalla; el fallback es la lista vertical de arriba. */
.services.scatter .svc-hint{opacity:0}
.services.scatter .svc-lines{
  position:relative;
  height:min(84vh,900px);
  margin-top:clamp(24px,4vw,44px);
}
.services.scatter .svc-item{
  position:absolute;
  top:0;left:0;
  width:auto;
  margin:0;
  border:0!important;
  will-change:transform;
}
.services.scatter .svc-trigger{
  width:auto;
  gap:12px;
  padding:8px 12px;
  cursor:grab;
}
.services.scatter .svc-word{animation:none;transform:none}
.services.scatter .svc-word::after{display:none}
.services.scatter .svc-plus{display:none}
.services.scatter .svc-desc{display:none}
/* halo suave detrás de cada palabra flotante para despegarla del fondo */
.services.scatter .svc-trigger::before{
  content:"";
  position:absolute;
  inset:-18px -22px;
  z-index:-1;
  background:radial-gradient(ellipse at center,rgba(10,8,1,.55),transparent 72%);
  opacity:.9;
  pointer-events:none;
}
.services.scatter .svc-item.grabbed .svc-word{color:var(--accent)}
.services.scatter .svc-item.grabbed .w-base{color:var(--accent)}
.services.scatter .svc-item.dragging{z-index:4}
.services.scatter .svc-item.dragging .svc-trigger{cursor:grabbing}
.services.scatter .svc-item.dragging .svc-word{color:var(--accent);animation-play-state:paused}

/* Panel de descripción que se abre al clickear una opción flotante */
.svc-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  padding:clamp(24px,6vw,72px);
  background:rgba(10,8,1,.74);
  backdrop-filter:blur(9px);
  opacity:0;
  visibility:hidden;
  transition:opacity .45s,visibility .45s;
}
.svc-overlay.show{opacity:1;visibility:visible}
.svc-overlay-card{
  max-width:640px;
  max-height:82vh;
  overflow-y:auto;
  padding-right:6px;
  transform:translateY(14px);
  transition:transform .5s cubic-bezier(.22,.6,.2,1);
}
.svc-overlay-card::-webkit-scrollbar{width:6px}
.svc-overlay-card::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.svc-overlay.show .svc-overlay-card{transform:none}
.ov-num{display:block;color:var(--accent);margin-bottom:14px}
.ov-word{
  font-family:var(--serif);
  font-size:clamp(38px,6vw,72px);
  line-height:1.06;
  color:var(--bone);
  margin-bottom:20px;
  text-wrap:balance;
}
.ov-desc{color:var(--bone-dim);font-size:16px;line-height:1.7;margin-bottom:24px}
/* Diagrama clonado dentro del panel: visible y sin sangría */
.ov-extra .flows{opacity:1;transform:none;margin:0 0 24px}
.ov-close{
  color:var(--bone-dim);
  border:1px solid var(--line);
  border-radius:2px;
  padding:10px 20px;
  transition:color .3s,border-color .3s;
}
.ov-close:hover,.ov-close:focus-visible{color:var(--accent);border-color:var(--accent)}

/* ---- Trabajos ---------------------------------------------------------- */
.works-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.work{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  padding:clamp(28px,4vw,44px);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background .4s,transform .4s;
  will-change:transform;
}
.work::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at var(--mx,50%) var(--my,0%),rgba(127,174,147,.24),transparent 60%);
  opacity:0;
  transition:opacity .45s;
  pointer-events:none;
}
.work:hover,.work:focus-visible{background:var(--work-hover)}

/* Miniatura embebida del sitio dentro de la tarjeta */
.work-thumb{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  margin-bottom:8px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:2px;
  background:
    radial-gradient(ellipse at 30% 70%,rgba(127,174,147,.12),transparent 60%),
    #12100a;
  pointer-events:none;
}
.work-thumb iframe{
  position:absolute;
  top:0;left:0;
  width:1280px;
  height:800px;
  border:0;
  transform-origin:0 0;
  /* se escala por JS al ancho real de la tarjeta */
}

/* Portada de trabajo: imagen real del sitio + escena diseñada de fallback.
   Si la imagen falta, main.js oculta <img> y queda la escena de abajo. */
.thumb-cover{
  display:block;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 72% 30%,rgba(127,174,147,.4),transparent 55%),
    linear-gradient(180deg,#0d1512 0%,#12100a 52%,#0a0d0c 100%);
}
.thumb-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--grunge);
  opacity:.5;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.cover-img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.cover-sail{
  position:absolute;
  right:14%;
  top:16%;
  width:44%;
  height:auto;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.4));
  transition:transform .6s cubic-bezier(.22,.6,.2,1);
}
.work:hover .cover-sail{transform:translateY(-6px) rotate(-3deg)}
.cover-name{
  position:absolute;
  left:clamp(16px,3vw,26px);
  bottom:clamp(14px,2.6vw,22px);
  max-width:60%;
  font-family:var(--serif);
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.14;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#D9D7D4;
}
.work:hover::before,.work:focus-visible::before{opacity:1}
.work h3{
  font-size:clamp(24px,3vw,32px);
  transition:color .35s;
}
.work:hover h3{color:var(--accent)}
.work p{color:var(--bone-dim);flex-grow:1}
.work .go{color:var(--bone)}
.work .arr{
  display:inline-block;
  color:var(--accent);
  transition:transform .35s;
}
.work:hover .arr{transform:translateX(6px)}

/* ---- Modal de preview de trabajos --------------------------------------- */
.preview-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,40px);
}
.preview-modal[hidden]{display:none}

.preview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,8,1,.82);
  backdrop-filter:blur(6px);
}

.preview-panel{
  position:relative;
  width:min(1200px,100%);
  height:min(760px,86vh);
  display:flex;
  flex-direction:column;
  background:var(--ink);
  border:1px solid var(--line);
  animation:preview-in .45s cubic-bezier(.22,.6,.2,1) both;
}
@keyframes preview-in{
  from{opacity:0;transform:translateY(24px) scale(.985)}
  to{opacity:1;transform:none}
}

.preview-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
}
.preview-bar #preview-title{color:var(--bone)}
.preview-actions{display:flex;align-items:center;gap:18px}
.preview-open{color:var(--bone-dim);transition:color .3s}
.preview-open:hover,.preview-open:focus-visible{color:var(--bone)}
.preview-close{
  font-size:14px;
  color:var(--bone-dim);
  padding:4px 8px;
  transition:color .3s;
}
.preview-close:hover,.preview-close:focus-visible{color:var(--bone)}

.preview-frame-wrap{position:relative;flex:1;background:#0d0b04}
.preview-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.preview-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  opacity:0;
  transition:opacity .5s;
}
.preview-frame.loaded{opacity:1}

/* Modo imagen (sitios que no se embeben): screenshot en el recuadro */
.preview-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  opacity:0;
  transition:opacity .5s;
}
.preview-img[hidden]{display:none}
.preview-img.loaded{opacity:1}
/* Clic en cualquier parte del recuadro (no solo en "Abrir sitio ↗") abre el
   sitio real en pestaña nueva. Va encima del iframe/imagen para que el clic
   no interactue con el sitio embebido, y debajo del fallback (que tiene su
   propio botón visible). */
.preview-frame-link{position:absolute;inset:0;cursor:pointer}
/* Fallback si no hay imagen: mensaje + botón para abrir el sitio */
.preview-fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  text-align:center;
  padding:clamp(20px,4vw,40px);
}
.preview-fallback[hidden]{display:none}
.preview-fallback p{color:var(--bone-dim);max-width:36ch;line-height:1.6}

body.modal-open{overflow:hidden}

/* ---- Nosotros ---------------------------------------------------------- */
.about{
  position:relative;
  overflow:hidden;
  background:
    var(--grunge),
    radial-gradient(ellipse at 10% 90%,rgba(127,174,147,.16),transparent 55%),
    var(--ink);
  background-blend-mode:soft-light,normal,normal;
}
.about .watermark{
  position:absolute;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:min(46vw,520px);
  opacity:.07;
  pointer-events:none;
}

.about .sec-head{margin-bottom:clamp(26px,4vw,44px)}
.lead-xl{
  font-family:var(--serif);
  font-size:clamp(32px,5.4vw,66px);
  line-height:1.16;
  max-width:18ch;
}
.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(30px,4.6vw,48px);
}
.about-tags span{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  transition:color .35s,border-color .35s;
}
.about-tags span:hover{color:var(--accent);border-color:var(--accent)}
.about .body{
  color:var(--bone-dim);
  max-width:520px;
  margin-top:clamp(24px,3.6vw,36px);
}

/* ---- Clientes ----------------------------------------------------------- */
.clients{padding-block:clamp(60px,8vw,90px);text-align:center}
.clients .row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(36px,7vw,90px);
  flex-wrap:wrap;
  margin-top:34px;
}
.client-logo{
  height:64px;
  width:auto;
  filter:grayscale(1);
  opacity:.8;
  transition:opacity .3s,filter .3s;
}
.client-logo:hover{opacity:1;filter:none}
/* Logo de T-L: azul sobre fondo amarillo opaco; en grises se funde con el
   papel claro. Se muestra en su color real, dentro de un marco claro para
   que sea legible sobre cualquier fondo/tema. */
.client-logo.tl{
  filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
  height:58px;
  padding:7px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.client-logo.tl:hover{filter:none !important;opacity:1 !important}
/* Logo de Patagon: es blanco puro; sobre papel hueso se invierte a tinta */
.client-logo.patagon{
  height:52px;
  filter:invert(.88);
}
.client-logo.patagon:hover{filter:invert(.88)}
:root[data-theme="light"] .client-logo.patagon,
:root[data-theme="light"] .client-logo.patagon:hover{filter:none}

/* T-L es el único logo clickeable: abre la ficha del caso */
.client-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:0;
  transition:transform .3s cubic-bezier(.22,.6,.2,1);
}
.client-btn:hover,
.client-btn:focus-visible{transform:translateY(-4px)}
.client-cue{
  color:var(--accent-ink);
  opacity:.55;
  transition:opacity .3s;
}
.client-btn:hover .client-cue,
.client-btn:focus-visible .client-cue,
.client-btn[aria-expanded="true"] .client-cue{opacity:1}

/* ---- Ficha del caso (T-L) ---------------------------------------------- */
.case{
  margin-top:clamp(34px,5vw,54px);
  text-align:left;
  border-top:1px solid var(--line-ink);
  padding-top:clamp(28px,4vw,44px);
}
.case[hidden]{display:none}
.case-inner{
  max-width:900px;
  margin-inline:auto;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.6,.2,1);
}
.case.show .case-inner{opacity:1;transform:none}
/* gana sobre `.paper .mono`, que fija un gris tinta fijo */
.case .case-eyebrow{color:var(--accent-ink)}
.case-title{
  margin-top:14px;
  font-size:clamp(24px,3.4vw,38px);
  max-width:22ch;
}

.case-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,3.4vw,40px) clamp(18px,3vw,34px);
  margin-top:clamp(30px,4.4vw,48px);
}
/* 6 métricas: 3 + 3 en desktop, 2 por fila en pantallas chicas */
@media (min-width:820px){
  .case-stats{grid-template-columns:repeat(3,1fr)}
}
.stat{display:flex;flex-direction:column;gap:6px}
.stat-num{
  font-family:var(--serif);
  font-size:clamp(40px,6.4vw,72px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--accent-ink);
}
/* "Argentina" es una palabra larga: no debe romper la grilla */
.stat-num.stat-geo{font-size:clamp(28px,4vw,46px)}
/* Los apagados van sobre --ink (el color de texto de .paper), no sobre un
   rgba fijo: en tema claro la sección se invierte a fondo oscuro. */
.case-stats .stat-lbl{color:var(--ink);opacity:.55}

.case-note{
  margin-top:clamp(30px,4.4vw,46px);
  max-width:78ch;
  font-size:15px;
  line-height:1.75;
  color:var(--ink);
  opacity:.7;
}

/* Fotos del proyecto: grilla pareja pese a que los originales tienen
   distintas proporciones (aspect-ratio + cover recorta al mismo formato).
   Cargan recién al abrir la ficha: hasta entonces el <figure> está dentro
   de un ancestro [hidden] y el lazy-loading no las descarga. */
.case-shots{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.6vw,18px);
  margin-top:clamp(30px,4.4vw,46px);
}
.case-shots img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  filter:saturate(.9);
  transition:filter .5s;
}
.case-shots img:hover{filter:none}
.case .case-shots figcaption{
  grid-column:1/-1;
  margin-top:4px;
  color:var(--ink);
  opacity:.45;
}
@media (max-width:640px){
  .case-shots{grid-template-columns:1fr}
}

.case .case-close{
  margin-top:clamp(24px,3.2vw,34px);
  padding:10px 20px;
  border:1px solid var(--line-ink);
  border-radius:999px;
  color:var(--ink);
  opacity:.6;
  transition:border-color .3s,color .3s,opacity .3s;
}
.case .case-close:hover{border-color:var(--accent-ink);color:var(--accent-ink);opacity:1}

@media (prefers-reduced-motion:reduce){
  .case-inner{transition:none;opacity:1;transform:none}
  .client-btn{transition:none}
}

/* ---- Contacto ----------------------------------------------------------- */
.contact{
  text-align:center;
  background:
    var(--grunge),
    radial-gradient(ellipse at 50% 120%,rgba(127,174,147,.22),transparent 60%),
    var(--ink);
  background-blend-mode:soft-light,normal,normal;
}
.ctas{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:44px;
}

/* Botón de Instagram con ícono */
.btn-ig{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn-ig svg{flex-shrink:0}

/* ---- Barra de cookies ----------------------------------------------------- */
.cookie-bar{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:600;
  display:flex;
  align-items:center;
  gap:clamp(14px,3vw,28px);
  width:min(860px,calc(100% - 32px));
  padding:16px 22px;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  animation:cookie-in .7s cubic-bezier(.22,.6,.2,1) both;
}
.cookie-bar[hidden]{display:none}
@keyframes cookie-in{
  from{opacity:0;transform:translate(-50%,24px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.cookie-bar p{
  font-size:13.5px;
  color:var(--bone-dim);
  line-height:1.5;
}
.cookie-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}
.cookie-accept{padding:10px 22px}
.cookie-reject{
  color:var(--bone-dim);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
.cookie-reject:hover,.cookie-reject:focus-visible{
  color:var(--bone);
  border-color:var(--bone-dim);
}
@media (max-width:640px){
  .cookie-bar{flex-direction:column;align-items:flex-start}
}

/* ---- Footer -------------------------------------------------------------- */
footer{
  border-top:1px solid var(--line);
  padding:26px 0;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bone-dim);
}

/* ---- Responsive header --------------------------------------------------- */
@media (max-width:680px){
  header{flex-wrap:wrap;row-gap:10px}
  header nav{order:3;width:100%;justify-content:space-between}
  .brand img{width:24px}
}

/* ---- Accesibilidad -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  #spotlight{display:none}
}

@media (hover:none),(pointer:coarse){
  #spotlight{display:none}
}

/* ---- Contacto: intro + botón al formulario ----------------------------- */
.contact-lead{
  color:var(--bone-dim);
  max-width:520px;
  margin:14px auto 26px;
  line-height:1.6;
}
.btn-lead{display:inline-flex;align-items:center;gap:10px}
.btn-lead svg{flex-shrink:0}
.ctas-social{margin-top:18px}