/* ===========================================================
   nodano — portfolio

   Registro editorial, no comercial: tipografía grande, mucho
   aire, y el movimiento puesto en el scroll en vez de en
   adornos. Un solo acento cálido, usado con cuentagotas.
   =========================================================== */

:root{
  --negro:#000000;
  --negro-2:#0C0C0C;
  --linea:#242427;
  --linea-fuerte:#3F3F46;
  --hueso:#FAFAFA;
  --hueso-2:#9E9EA4;
  --hueso-3:#6B6B72;
  --acento:#E8613C;
  --fuente:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --datos:'Space Grotesk',ui-monospace,monospace;
  --maxw:1240px;
  --suave:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:var(--fuente);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--acento);color:var(--negro)}
:focus-visible{outline:2px solid var(--acento);outline-offset:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--hueso);color:var(--negro);padding:12px 18px;
  font-weight:600;text-decoration:none;
}
.saltar:focus{left:0}

/* ---------- encabezado ---------- */
/* Tres columnas: marca, navegación, y dónde estoy. Sin botón de
   conversión: un portfolio no es una landing. */
.encabezado{
  position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.encabezado.pegado{
  background:rgba(10,10,11,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--linea);
}
.encabezado .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:76px;gap:24px;
}
.marca{
  font-weight:800;font-size:17px;letter-spacing:-.04em;text-decoration:none;
}
.nav{display:flex;align-items:center;gap:32px;justify-self:center}
.nav a{
  font-size:13px;color:var(--hueso-2);text-decoration:none;
  position:relative;transition:color .3s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--suave);
}
.nav a:hover{color:var(--hueso)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.lugar{font-family:var(--datos);
  justify-self:end;display:flex;align-items:center;gap:14px;
  font-size:12px;color:var(--hueso-3);font-variant-numeric:tabular-nums;
}
.lugar time{color:var(--hueso-2)}

/* ---------- portada ---------- */
.portada{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px 0 0;position:relative;
}

.antetitulo{font-family:var(--datos);font-size:12.5px;color:var(--hueso-3);margin-bottom:38px}


.portada-titulo{
  font-size:clamp(3.4rem,12vw,11rem);
  font-weight:800;letter-spacing:-.055em;line-height:.9;
  text-wrap:balance;
}
/* Cada línea sube desde abajo, recortada por su contenedor: el texto
   aparece como si se imprimiera, no como un fundido genérico. */
.portada-titulo .linea{display:block;overflow:hidden;padding-bottom:.06em}
.portada-titulo .linea > span{display:block}




.bajada{margin-top:44px;font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:var(--hueso-2);max-width:46ch}


/* Cinta con el recorrido real de un pedido. Se desplaza sola: es el
   único movimiento continuo de la página, y cuenta algo. */
.cinta{margin-top:clamp(56px,9vh,110px);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);display:flex;overflow:hidden;max-width:100vw;contain:paint}

.cinta li{flex:0 0 auto;display:flex;align-items:baseline;gap:12px;padding:20px 46px;border-right:1px solid var(--linea);white-space:nowrap}
.paso-num{font-family:var(--datos);font-size:11px;color:var(--acento);font-variant-numeric:tabular-nums}
.paso-texto{font-size:15px;color:var(--hueso-2)}


/* ---------- aparición al hacer scroll ---------- */



/* ---------- secciones ---------- */
.seccion{padding:clamp(100px,14vh,180px) 0}
.seccion-cabecera{
  display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start;
  padding-bottom:56px;margin-bottom:clamp(50px,7vh,90px);
  border-bottom:1px solid var(--linea);
}
.seccion h2{
  font-size:clamp(2rem,5vw,3.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;
}
.intro{font-size:17px;color:var(--hueso-2);max-width:48ch}

/* ---------- sistemas ---------- */
.lista{display:grid;gap:clamp(90px,13vh,170px)}

.sistema{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  gap:clamp(28px,4vw,60px);
  align-items:start;
}
.sistema-indice{font-family:var(--datos);
  font-size:12px;color:var(--hueso-3);padding-top:10px;
  font-variant-numeric:tabular-nums;
}
.sistema h3{
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.02;margin-bottom:26px;
}
.resumen{font-size:17px;line-height:1.62;color:var(--hueso-2);max-width:44ch}

.ficha{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--linea);
  display:grid;gap:11px;font-size:13.5px;
}
.ficha div{display:grid;grid-template-columns:88px 1fr;gap:16px}
.ficha dt{font-family:var(--datos);color:var(--hueso-3)}
.ficha dd{margin:0;color:var(--hueso-2)}

.funciones{margin-top:30px;display:grid;gap:12px;max-width:46ch}
.funciones li{
  position:relative;padding-left:22px;font-size:15px;color:var(--hueso-2);
}
.funciones li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--acento);
}

.enlace{
  display:inline-block;margin-top:32px;font-size:14px;
  color:var(--hueso);text-decoration:none;
  border-bottom:1px solid var(--linea-fuerte);padding-bottom:3px;
  transition:border-color .3s ease,color .3s ease;
}
.enlace:hover{border-bottom-color:var(--acento);color:var(--acento)}

/* La captura acompaña el scroll a otra velocidad: es el parallax que
   le da profundidad a la página sin adornos. */
.sistema-visual{perspective:1200px}
.marco{
  margin:0;border:1px solid var(--linea);overflow:hidden;
  background:var(--negro-2);
  transition:transform .6s var(--suave),border-color .6s ease;
  will-change:transform;
}
.marco:hover{border-color:var(--linea-fuerte)}
.marco-cuerpo{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.marco-cuerpo img{width:100%;height:100%;object-fit:cover;display:block}
.pendiente{font-size:13px;color:var(--hueso-3)}

/* ---------- método ---------- */
.metodo{border-top:1px solid var(--linea)}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,70px)}
.paso{padding-top:26px;border-top:1px solid var(--linea)}
.paso h3{
  font-size:1.18rem;font-weight:700;letter-spacing:-.025em;
  margin-bottom:14px;max-width:18ch;
}
.paso p{font-size:15.5px;color:var(--hueso-2);max-width:38ch}

/* ---------- contacto ---------- */
.contacto{
  padding:clamp(110px,16vh,200px) 0;
  border-top:1px solid var(--linea);
}
.contacto h2{
  font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:800;
  letter-spacing:-.05em;line-height:1.04;max-width:18ch;
}
.contacto-texto{
  margin-top:26px;font-size:17px;color:var(--hueso-2);max-width:44ch;
}
/* El mail es el cierre de la página: va grande, como un titular. */
.correo{
  display:inline-block;margin-top:clamp(44px,7vh,76px);
  font-size:clamp(1.5rem,4.4vw,3.2rem);font-weight:800;
  letter-spacing:-.045em;text-decoration:none;
  position:relative;padding-bottom:8px;
}
.correo::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--acento);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--suave);
}
.correo:hover{color:var(--acento)}
.correo:hover::after{transform:scaleX(1)}

.contacto-alt{margin-top:clamp(44px,7vh,76px);font-size:13px;color:var(--hueso-3)}

/* ---------- formulario de contacto ---------- */
.formulario-contacto{
  margin-top:clamp(36px,6vh,56px);max-width:480px;
  display:flex;flex-direction:column;gap:18px;
}
.campo-oculto{position:absolute;left:-9999px;top:auto}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-size:13px;color:var(--hueso-2)}
.campo input,.campo textarea{
  font:inherit;font-size:15px;color:var(--hueso);background:rgba(255,255,255,.02);
  border:1px solid var(--linea);border-radius:10px;padding:12px 14px;
  transition:border-color .3s ease,background .3s ease;resize:vertical;
}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--acento);background:rgba(255,255,255,.04);
}
.boton-enviar{
  align-self:flex-start;border:1px solid var(--linea-fuerte);border-radius:999px;
  padding:11px 26px;background:transparent;color:var(--hueso);font:inherit;font-weight:600;
  cursor:pointer;transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.boton-enviar:hover{border-color:var(--acento);background:rgba(232,97,60,.08);color:var(--acento)}
.boton-enviar:disabled{opacity:.5;cursor:not-allowed}
.formulario-estado{min-height:20px;font-size:14px;margin:-4px 0 0}
.formulario-estado.ok{color:#8FD694}
.formulario-estado.error{color:var(--acento)}

/* ---------- pie ---------- */
.pie{padding:40px 0 52px;border-top:1px solid var(--linea)}
.pie .wrap{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:var(--hueso-3);
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sistema{grid-template-columns:auto 1fr;gap:26px}
  .sistema-visual{grid-column:2}
  .seccion-cabecera{grid-template-columns:1fr;gap:20px}
  .pasos{grid-template-columns:1fr;gap:34px}
  .bajada{margin-left:0}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .nav{display:none}
  .encabezado .wrap{grid-template-columns:1fr auto;height:64px}
  .portada{padding-top:110px}
  .sistema{grid-template-columns:1fr}
  .sistema-indice{font-family:var(--datos);padding-top:0}
  .cinta li{flex:0 0 auto;display:flex;align-items:baseline;gap:12px;padding:20px 46px;border-right:1px solid var(--linea);white-space:nowrap}
  .ficha div{grid-template-columns:76px 1fr;gap:12px}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  
  .portada-titulo .linea > span{display:block}
  .cinta{margin-top:clamp(56px,9vh,110px);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);display:flex;overflow:hidden;max-width:100vw;contain:paint}
  .cinta li{flex:0 0 auto;display:flex;align-items:baseline;gap:12px;padding:20px 46px;border-right:1px solid var(--linea);white-space:nowrap}
}

/* ===========================================================
   PANTALLAS DIBUJADAS
   Cada sistema muestra una interfaz real hecha en CSS, no un
   rectángulo vacío. Se reemplazan por capturas cuando las haya.
   =========================================================== */

.pantalla{
  border:1px solid var(--linea);
  background:linear-gradient(180deg,#141416 0%,#0E0E10 100%);
  overflow:hidden;
  transition:transform .6s var(--suave),border-color .5s ease;
  will-change:transform;
}
.pantalla:hover{border-color:var(--linea-fuerte);box-shadow:0 30px 70px -28px rgba(232,97,60,.28)}

.pantalla-barra{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--linea);
  background:rgba(255,255,255,.02);
}
.pantalla-titulo{font-size:12px;color:var(--hueso-2);letter-spacing:-.01em}
.senal{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;color:var(--hueso-3);white-space:nowrap;
}
.senal i{
  width:5px;height:5px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.5);animation:latir 2.4s ease-out infinite;
}
.senal.alerta i{background:var(--acento);box-shadow:none;animation:none}
@keyframes latir{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}

.pantalla-cuerpo{padding:20px 16px}
.pantalla-cuerpo.apretado{padding:16px}
.pantalla-pie{
  padding:11px 16px;border-top:1px solid var(--linea);
  font-size:11px;color:var(--hueso-3);
}

/* --- chat que se convierte en planilla (portada) --- */
.chat{display:grid;gap:9px;margin-bottom:14px}
.burbuja{
  background:rgba(255,255,255,.045);border:1px solid var(--linea);
  border-radius:3px 12px 12px 12px;padding:10px 13px;
  font-size:12.5px;color:var(--hueso-2);line-height:1.5;
}
.burbuja b{display:block;color:var(--hueso);font-size:12px;margin-bottom:3px;font-weight:600}

.flecha{display:flex;flex-direction:column;align-items:center;gap:3px;margin:4px 0 14px}
.flecha span{
  width:1px;height:6px;background:var(--linea-fuerte);
  animation:bajar 1.8s ease-in-out infinite;
}
.flecha span:nth-child(2){animation-delay:.18s}
.flecha span:nth-child(3){animation-delay:.36s}
@keyframes bajar{0%,100%{opacity:.25}50%{opacity:1}}

/* --- planillas --- */
.planilla{width:100%;border-collapse:collapse;font-size:12.5px}
.planilla.ancha{font-size:12px}
.planilla th{
  text-align:left;font-weight:500;font-size:10.5px;color:var(--hueso-3);
  padding:0 0 9px;border-bottom:1px solid var(--linea);
}
.planilla td{
  padding:9px 0;border-bottom:1px solid rgba(245,245,244,.06);
  color:var(--hueso-2);font-variant-numeric:tabular-nums;
}
.planilla tr:last-child td{border-bottom:0}
.planilla .der{text-align:right;padding-left:10px}
.planilla .viejo{color:var(--hueso-3);text-decoration:line-through}
.planilla .nuevo{color:var(--hueso);font-weight:600}
.posiciones .puesto td{color:var(--hueso)}
.posiciones .destaca{color:var(--acento);font-weight:700}

.pastilla{
  display:inline-block;font-size:10px;padding:2px 7px;border-radius:2px;
  white-space:nowrap;
}
.pastilla.ok{background:rgba(74,222,128,.12);color:#6EE7A0}
.pastilla.alerta{background:rgba(232,97,60,.14);color:var(--acento)}

.progreso{
  margin-top:14px;height:2px;background:rgba(245,245,244,.08);overflow:hidden;
}
.progreso span{
  display:block;height:100%;background:var(--acento);
  animation:cargar 2.6s var(--suave) infinite;
}
@keyframes cargar{0%{transform:translateX(-100%)}60%,100%{transform:translateX(0)}}

/* --- cotejo de recepción --- */
.cotejo{display:grid;gap:1px;background:rgba(245,245,244,.06)}
.cotejo li{
  display:grid;grid-template-columns:14px 1fr auto;gap:11px;align-items:center;
  padding:10px 2px;background:#111113;font-size:12.5px;color:var(--hueso-2);
}
.cot-dato{font-variant-numeric:tabular-nums;font-size:12px;color:var(--hueso-3)}
.cotejo .falta .cot-dato,.cotejo .extra .cot-dato{color:var(--acento)}
.marca-ok,.marca-falta,.marca-extra{width:10px;height:10px;position:relative}
.marca-ok::before{
  content:"";position:absolute;left:0;top:3px;width:8px;height:4px;
  border-left:1.5px solid #6EE7A0;border-bottom:1.5px solid #6EE7A0;
  transform:rotate(-45deg);
}
.marca-falta::before,.marca-falta::after,
.marca-extra::before,.marca-extra::after{
  content:"";position:absolute;left:0;top:4px;width:10px;height:1.5px;
  background:var(--acento);
}
.marca-falta::after{display:none}
.marca-extra::after{transform:rotate(90deg)}

.resultado{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--linea);
  font-size:11.5px;color:var(--hueso-3);display:flex;align-items:center;gap:9px;
  flex-wrap:wrap;
}

/* --- cuentas por cobrar --- */
.cuentas{display:grid;gap:13px}
.cuentas li{
  display:grid;grid-template-columns:1fr 64px auto;gap:12px;align-items:center;
  font-size:12.5px;color:var(--hueso-2);
}
.cta-monto{font-variant-numeric:tabular-nums;color:var(--hueso);font-size:12px}
.barra{height:3px;background:rgba(245,245,244,.08);overflow:hidden}
.barra i{display:block;height:100%;background:var(--acento)}

/* --- gráfico de barras --- */
.grafico{
  display:flex;align-items:flex-end;gap:14px;height:130px;
  padding-bottom:10px;border-bottom:1px solid var(--linea);
}
.columna{flex:1;display:flex;align-items:flex-end;gap:3px;height:100%}
.columna span{flex:1;display:block}
.col-a{background:rgba(245,245,244,.22)}
.col-b{background:var(--acento)}
.leyenda{display:flex;gap:18px;margin-top:11px;font-size:11px;color:var(--hueso-3)}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:8px;height:2px;display:block}
.pt-a{background:rgba(245,245,244,.22)}
.pt-b{background:var(--acento)}

/* ---------- ajustes de maqueta ---------- */
.portada{justify-content:center}
.portada-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,80px);align-items:center;
}
.portada-titulo{font-size:clamp(2.6rem,6.4vw,5.9rem)}
.bajada{margin-left:0;max-width:40ch;margin-top:34px}
.antetitulo{font-family:var(--datos);font-size:12.5px;color:var(--hueso-3);margin-bottom:38px}
.punto{
  width:6px;height:6px;border-radius:50%;background:var(--acento);
  flex:0 0 auto;
}

.sistema{grid-template-columns:1fr 1.08fr;gap:clamp(30px,5vw,72px);align-items:center}
.sistema-indice{font-family:var(--datos);
  font-size:11.5px;color:var(--acento);margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.tecnos{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.tecnos li{font-family:var(--datos);
  font-size:11px;color:var(--hueso-3);
  border:1px solid var(--linea);padding:4px 10px;
}
.ficha{margin-top:26px}

.paso-indice{font-family:var(--datos);
  display:block;font-size:11.5px;color:var(--acento);margin-bottom:14px;
}

@media (max-width:1000px){
  .portada-grid{grid-template-columns:1fr;gap:44px}
  .sistema{grid-template-columns:1fr;gap:32px}
}

/* ===========================================================
   MARCOS EN ESPERA DE CAPTURA
   Sin datos inventados: solo el hueco preparado, con la ruta
   del archivo que hay que poner.
   =========================================================== */
.marco-vacio{
  aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(45deg,
      rgba(245,245,244,.018) 0 10px, transparent 10px 20px),
    linear-gradient(180deg,#141416 0%,#0E0E10 100%);
}
.marco-vacio img{width:100%;height:auto;display:block}
.marco-vacio:has(img){aspect-ratio:auto;background:linear-gradient(180deg,#141416 0%,#0E0E10 100%)}
.espera{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;padding:26px;
}
.espera-icono{
  width:30px;height:24px;border:1px solid var(--linea-fuerte);
  position:relative;
}
.espera-icono::before{
  content:"";position:absolute;left:5px;bottom:5px;
  width:0;height:0;border-left:7px solid transparent;
  border-right:7px solid transparent;border-bottom:9px solid var(--linea-fuerte);
}
.espera-icono::after{
  content:"";position:absolute;right:6px;top:5px;width:4px;height:4px;
  border-radius:50%;background:var(--linea-fuerte);
}
.espera-texto{font-size:12.5px;color:var(--hueso-2)}
.espera code{font-family:var(--datos);
  font-size:10.5px;color:var(--hueso-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--linea);padding:3px 8px;
}

/* ===========================================================
   MENÚ A PANTALLA COMPLETA
   El navbar horizontal con links chiquitos es de otra época.
   Hoy: marca, un botón, y el menú ocupa toda la pantalla.
   =========================================================== */

.encabezado .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:76px;
}
.encabezado .lugar{font-family:var(--datos);margin-left:auto;margin-right:28px}

.boton-menu{
  display:inline-flex;align-items:center;gap:12px;
  background:none;border:0;padding:8px 0;cursor:pointer;
  color:var(--hueso);font:500 13px var(--fuente);
  letter-spacing:.01em;
}
.boton-menu-lineas{display:flex;flex-direction:column;gap:5px;width:22px}
.boton-menu-lineas i{
  display:block;height:1.5px;width:100%;background:currentColor;
  transition:transform .45s var(--suave),width .45s var(--suave);
}
.boton-menu:hover .boton-menu-lineas i:last-child{width:62%}
.menu-abierto .boton-menu-lineas i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-abierto .boton-menu-lineas i:last-child{transform:translateY(-3.25px) rotate(-45deg);width:100%}

/* Línea de progreso de lectura */
.progreso-scroll{position:absolute;left:0;right:0;bottom:0;height:1px;background:transparent}
.progreso-scroll span{
  display:block;height:100%;width:0;background:var(--acento);
  transition:width .1s linear;
}

.menu{
  position:fixed;inset:0;z-index:60;
  background:var(--negro);
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 28px 48px;
  opacity:0;
}
.menu[hidden]{display:none}

.menu-nav{display:grid;gap:4px;max-width:var(--maxw);margin:0 auto;width:100%}
.menu-nav a{
  display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);
  text-decoration:none;padding:clamp(10px,1.6vh,20px) 0;
  border-bottom:1px solid var(--linea);
  transition:color .4s ease;
}
.menu-nav a:hover{color:var(--acento)}
.menu-num{font-family:var(--datos);
  font-size:12px;color:var(--hueso-3);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.menu-nav a:hover .menu-num{font-family:var(--datos);color:var(--acento)}
.menu-palabra{
  font-size:clamp(2.4rem,8vw,6rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;
}

.menu-pie{
  max-width:var(--maxw);margin:clamp(40px,7vh,80px) auto 0;width:100%;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:13px;color:var(--hueso-3);
}
.menu-pie a{color:var(--hueso-2);text-decoration:none;transition:color .3s ease}
.menu-pie a:hover{color:var(--acento)}

/* El fondo no se mueve mientras el menú está abierto */
body.menu-abierto{overflow:hidden}

@media (max-width:640px){
  .encabezado .lugar{font-family:var(--datos);display:none}
  .boton-menu-texto{display:none}
}

/* ===========================================================
   GRILLA VISIBLE
   La skill pide estructura a la vista: columnas marcadas que
   recorren toda la página, como una guía de maqueta impresa.
   =========================================================== */
.grilla{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.grilla span{border-left:1px solid var(--linea);opacity:.55}
.grilla span:last-child{border-right:1px solid var(--linea)}

/* El contenido va por encima de la grilla. */
.encabezado,main,.pie,.menu{position:relative;z-index:1}
.encabezado{z-index:70}
.menu{z-index:60}

@media (max-width:640px){
  .grilla{grid-template-columns:repeat(2,1fr);padding:0 20px}
}

/* ===========================================================
   CURSOR PROPIO
   =========================================================== */
.con-cursor,.con-cursor a,.con-cursor button,.con-cursor [data-cursor]{cursor:none}
.cursor{
  position:fixed;top:0;left:0;z-index:100;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  width:14px;height:14px;
  mix-blend-mode:difference;
}
.cursor-punto{
  position:absolute;inset:0;border-radius:50%;background:var(--hueso);
  transition:transform .4s var(--suave),background .3s ease;
}
.cursor.activo .cursor-punto{transform:scale(3.4)}
.cursor.con-texto .cursor-punto{transform:scale(5.2);background:var(--acento);mix-blend-mode:normal}
.cursor-texto{
  position:relative;font:500 9px var(--datos);color:var(--negro);
  opacity:0;transition:opacity .25s ease;white-space:nowrap;
}
.cursor.con-texto .cursor-texto{opacity:1}

/* ===========================================================
   CORTINA DE TRANSICIÓN
   =========================================================== */
.cortina{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:var(--acento);transform:scaleY(0);transform-origin:top;
}

/* La deformación por velocidad necesita que el navegador sepa
   de antemano qué va a cambiar. */
.sistema-visual,.pantalla{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .cursor,.cortina{display:none}
  .con-cursor,.con-cursor a,.con-cursor button{cursor:auto}
}

/* ===========================================================
   TERMINACIÓN
   El tilt 3D que el data-tilt del HTML dejaba pedido pero sin
   conectar, un halo suave detrás de los dos titulares grandes
   (portada y contacto, para que rimen) y un grano casi
   imperceptible para que el negro no quede plano. Todo con el
   mismo acento, en la misma dosis chica de siempre.
   =========================================================== */

.portada,.contacto{position:relative;overflow:clip}
.portada::before,.contacto::before{
  content:"";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);
  pointer-events:none;
  background:radial-gradient(circle,rgba(232,97,60,.16) 0%,rgba(232,97,60,0) 64%);
}
.portada::before{top:-14%;width:min(980px,92vw);height:min(980px,92vw)}
.contacto::before{top:8%;width:min(760px,80vw);height:min(520px,52vw);opacity:.75}

body::before{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.portada-pantalla{perspective:1200px}
[data-tilt]{transform-style:preserve-3d;transition:border-color .5s ease}

.enlace::after{
  content:"→";display:inline-block;margin-left:8px;
  transition:transform .35s var(--suave);
}
.enlace:hover::after{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  body::before{display:none}
}

/* ===========================================================
   ENTRADA DE PORTADA, EN CSS PURO
   Antes esto lo armaba GSAP con un timeline scrolleado a JS;
   si algo fallaba en ese camino (un tick que no llega, un
   plugin que no termina de cargar) el texto se quedaba
   escondido para siempre. Una @keyframes del navegador no
   depende de nada: arranca sola al pintar la página y siempre
   termina. El contenido nunca puede quedar invisible.
   =========================================================== */
@keyframes entra-linea{from{transform:translateY(108%)}to{transform:translateY(0)}}
@keyframes entra-arriba{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.portada-titulo .linea > span{animation:entra-linea 1s var(--suave) both}
.portada-titulo .linea:nth-child(1) > span{animation-delay:.05s}
.portada-titulo .linea:nth-child(2) > span{animation-delay:.15s}
.portada-titulo .linea:nth-child(3) > span{animation-delay:.25s}

.antetitulo{animation:entra-arriba .8s var(--suave) both .05s}
.portada-pantalla{animation:entra-arriba .9s var(--suave) both .3s}
.bajada{animation:entra-arriba .8s var(--suave) both .4s}
.cinta{animation:entra-arriba .8s var(--suave) both .6s}

.seccion-cabecera h2,.contacto h2{animation:entra-arriba .8s var(--suave) both}

/* ===========================================================
   PÁGINA DE PROYECTO
   Un caso por sistema: mismo header, mismo menú, mismo cierre
   de contacto — pero con lugar para contar el antes/después
   y el dato que más importa, cuántas horas se dejaron de
   perder. Ese dato lo pone el cliente real, no se inventa.
   =========================================================== */

.detalle-volver{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--datos);font-size:12.5px;color:var(--hueso-3);
  text-decoration:none;transition:color .3s ease;
}
.detalle-volver::before{content:"←";transition:transform .35s var(--suave)}
.detalle-volver:hover{color:var(--hueso)}
.detalle-volver:hover::before{transform:translateX(-4px)}

.detalle-hero{padding:150px 0 70px;position:relative;overflow:clip}
.detalle-hero::before{
  content:"";position:absolute;z-index:-1;top:-30%;left:50%;transform:translateX(-50%);
  width:min(900px,90vw);height:min(700px,70vw);pointer-events:none;
  background:radial-gradient(circle,rgba(232,97,60,.15) 0%,rgba(232,97,60,0) 64%);
}
.detalle-indice{font-family:var(--datos);font-size:12.5px;color:var(--acento);margin-bottom:22px}
.detalle-titulo{
  font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:1;max-width:16ch;
}
.detalle-bajada{margin-top:28px;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--hueso-2);max-width:52ch}

.detalle-stats{
  margin-top:56px;padding-top:36px;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;
}
.detalle-stat{display:flex;flex-direction:column;gap:9px}
.detalle-stat-num{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;color:var(--hueso)}
.detalle-stat.vacio .detalle-stat-num{color:var(--hueso-3)}
.detalle-stat-texto{font-size:13px;color:var(--hueso-3)}
.detalle-stat code{
  align-self:flex-start;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;color:var(--hueso-3);border:1px solid var(--linea);padding:3px 7px;
}

.detalle-cuerpo{padding:clamp(70px,10vh,120px) 0;border-top:1px solid var(--linea)}
.detalle-bloques{display:grid;gap:clamp(56px,8vh,90px)}
.detalle-bloque{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,4vw,60px)}
.detalle-bloque h2{
  font-family:var(--datos);font-size:12.5px;color:var(--hueso-3);
  text-transform:uppercase;letter-spacing:.04em;padding-top:4px;
}
.detalle-bloque p{font-size:17px;line-height:1.65;color:var(--hueso-2);max-width:56ch}
.detalle-bloque ul{margin-top:16px;display:grid;gap:11px}
.detalle-bloque li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--hueso-2)}
.detalle-bloque li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:1px;background:var(--acento)}

.detalle-pantalla{margin-top:clamp(50px,7vh,90px)}

@media (max-width:1000px){
  .detalle-bloque{grid-template-columns:1fr;gap:16px}
}

/* --- logo en la marca --- */
.marca{display:inline-flex;align-items:center;gap:10px}
.marca-logo{width:28px;height:28px;object-fit:contain;display:block}
.marca-dev{font-weight:inherit;color:#6B2DF0}

/* ===========================================================
   PULIDO
   Los colores del logo (celeste y violeta) entran como segundo
   acento: halo de fondo, el "a mano" del titular y el brillo
   de las capturas. El naranja sigue siendo el acento de acción.
   =========================================================== */
:root{
  --celeste:#B8D0FF;
  --violeta:#6B2DF0;
  --violeta-claro:#8B5CF6;
}

.portada::before{
  background:
    radial-gradient(circle at 62% 42%,rgba(107,45,240,.22) 0%,rgba(107,45,240,0) 55%),
    radial-gradient(circle at 38% 58%,rgba(232,97,60,.13) 0%,rgba(232,97,60,0) 58%);
}
.contacto::before{
  background:radial-gradient(circle,rgba(107,45,240,.20) 0%,rgba(107,45,240,0) 64%);
}
.detalle-hero::before{
  background:
    radial-gradient(circle at 60% 40%,rgba(107,45,240,.20) 0%,rgba(107,45,240,0) 58%),
    radial-gradient(circle at 40% 60%,rgba(232,97,60,.10) 0%,rgba(232,97,60,0) 60%);
}

.portada-titulo .linea:nth-child(3) > span{
  background:linear-gradient(95deg,var(--hueso) 0%,var(--celeste) 45%,var(--violeta-claro) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.08em;
}
.detalle-titulo{
  background:linear-gradient(100deg,var(--hueso) 30%,var(--celeste) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.antetitulo{display:flex;align-items:center;gap:10px}
.antetitulo .punto{background:var(--violeta-claro);box-shadow:0 0 0 4px rgba(139,92,246,.18)}

/* --- capturas dentro de una ventana --- */
.pantalla{
  border-radius:14px;border-color:#2C2C31;
  background:#0E0E10;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 40px 80px -40px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.6);
  transition:transform .6s var(--suave),border-color .5s ease,box-shadow .6s ease;
}
.pantalla:hover{
  border-color:rgba(139,92,246,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 90px -34px rgba(107,45,240,.5),
    0 0 0 1px rgba(0,0,0,.6);
}
.pantalla:has(img)::before{
  content:"";display:block;height:30px;
  background:
    radial-gradient(circle at 16px 15px,#3A3A40 4px,transparent 4.5px),
    radial-gradient(circle at 32px 15px,#3A3A40 4px,transparent 4.5px),
    radial-gradient(circle at 48px 15px,#3A3A40 4px,transparent 4.5px),
    linear-gradient(180deg,#1A1A1D,#151517);
  border-bottom:1px solid #26262A;
}
.pantalla img{background:#F4F4EF}

/* --- listas y datos --- */
.tecnos li{
  border-radius:999px;padding:4px 12px;
  background:rgba(255,255,255,.025);
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.tecnos li:hover{color:var(--celeste);border-color:rgba(184,208,255,.35);background:rgba(184,208,255,.06)}

.funciones li::before{width:9px;background:linear-gradient(90deg,var(--acento),transparent)}
.sistema-indice{letter-spacing:.06em}

.enlace{
  border:1px solid var(--linea-fuerte);border-radius:999px;
  padding:9px 18px;margin-right:10px;
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.enlace:hover{background:rgba(232,97,60,.08)}

.detalle-stat{
  padding:22px 24px;border:1px solid var(--linea);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color .4s ease,transform .5s var(--suave);
}
.detalle-stat:hover{border-color:rgba(139,92,246,.45);transform:translateY(-3px)}
.detalle-stat-num{
  background:linear-gradient(120deg,var(--hueso) 40%,var(--celeste));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.detalle-stats{border-top:0;padding-top:0}
.mt-38{margin-top:38px}
.mt-40{margin-top:40px}

.detalle-bloque{
  padding:30px 32px;border:1px solid var(--linea);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
}

.cinta{background:rgba(255,255,255,.015)}
.paso-num{color:var(--violeta-claro)}

.marca-logo{filter:drop-shadow(0 0 10px rgba(139,92,246,.45))}

@media (max-width:640px){
  .detalle-bloque{padding:22px 20px}
  .enlace{padding:8px 16px}
}

.detalle-bloque ul.larga{grid-template-columns:1fr 1fr;gap:12px 32px;max-width:none}
@media (max-width:1000px){.detalle-bloque ul.larga{grid-template-columns:1fr}}


/* --- collage de la portada: tres sistemas reales apilados --- */
.collage{position:relative;aspect-ratio:1/.78;width:100%}
.collage .pantalla{position:absolute;margin:0;width:78%}
.collage .c1{top:0;left:0;z-index:1}
.collage .c2{top:20%;right:0;z-index:2;width:66%}
.collage .c3{bottom:0;left:6%;z-index:3;width:60%}

.collage .pantalla{box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6)}
.collage .pantalla:hover{z-index:4}

.contacto-ig{margin-top:28px;font-size:15px;color:var(--hueso-2)}
.contacto-ig .enlace{margin:0 0 0 8px;margin-top:0;padding:6px 14px}
.pie-ig{color:var(--hueso-2);text-decoration:none;border-bottom:1px solid var(--linea-fuerte);transition:color .3s ease,border-color .3s ease}
.pie-ig:hover{color:var(--acento);border-color:var(--acento)}