/* ============================================================
   TOKENS — "Monitor de campo": la página como el monitor
   de un director en set. Azul-carbón, rojo REC, ámbar peaking.
   ============================================================ */
:root{
  --ink-0:#0B0F14;        /* fondo base */
  --ink-1:#10161F;        /* paneles */
  --ink-2:#161E2A;        /* elevación */
  --line:#243043;         /* bordes */
  --paper:#E9EEF3;        /* texto principal */
  --paper-dim:#8FA0B1;    /* texto secundario */
  --rec:#FF3B30;          /* rojo tally / REC — acento primario */
  --peak:#FFB454;         /* ámbar peaking — solo microdetalles */
  --display:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --mx:50%; --my:35%;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink-0);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--rec);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--peak);outline-offset:3px;border-radius:2px}

/* Grain global sutil (textura de sensor) */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CURSOR VIEWFINDER — la firma de la página.
   Cuatro corchetes de enfoque que siguen el mouse y se
   "ajustan" a lo que puedes tocar, como el AF de una cámara.
   ============================================================ */
.cursor{
  position:fixed;top:0;left:0;z-index:70;pointer-events:none;
  width:34px;height:34px;transform:translate(-50%,-50%);
  transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1);
}
.cursor span{position:absolute;width:9px;height:9px;border:2px solid var(--paper);transition:border-color .2s}
.cursor span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.cursor span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.cursor span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.cursor span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.cursor .dot{
  position:absolute;top:50%;left:50%;width:3px;height:3px;border:0;
  background:var(--rec);border-radius:50%;transform:translate(-50%,-50%);
}
.cursor-label{
  position:fixed;top:0;left:0;z-index:70;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--peak);text-transform:uppercase;white-space:nowrap;
  transform:translate(14px,22px);opacity:0;transition:opacity .2s;
}
.cursor.is-active{width:64px;height:64px}
.cursor.is-active span{border-color:var(--rec)}
body.has-cursor,
body.has-cursor a,
body.has-cursor button,
body.has-cursor select,
body.has-cursor input,
body.has-cursor textarea{cursor:none}
@media (hover:none), (pointer:coarse){
  .cursor,.cursor-label{display:none}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
}

/* ============================================================
   HUD / BARRA SUPERIOR — como el overlay del monitor
   ============================================================ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(to bottom,rgba(11,15,20,.92),rgba(11,15,20,.72) 70%,transparent);
  backdrop-filter:blur(6px);
}
.hud-left{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.4s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}
.hud .tc{color:var(--peak)}
.hud nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.hud nav a{color:var(--paper-dim);transition:color .2s}
.hud nav a:hover{color:var(--paper)}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:12px 22px;border-radius:4px;border:1px solid var(--line);
  transition:transform .2s,background .2s,border-color .2s;
  will-change:transform;
}
.btn-rec{background:var(--rec);border-color:var(--rec);color:#fff}
.btn-rec:hover{background:#ff4f45}
.btn-ghost:hover{border-color:var(--paper-dim)}
.btn .pip{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.4s steps(2,end) infinite}
.hud .btn{padding:9px 16px;font-size:13px}

/* ============================================================
   HERO — el plano de apertura
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 6vw 80px;
  overflow:hidden;
}
.hero-light{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx) var(--my),rgba(255,180,84,.10),transparent 60%),
             radial-gradient(900px circle at var(--mx) var(--my),rgba(233,238,243,.05),transparent 65%);
}
.frame-mark{position:absolute;width:26px;height:26px;border:2px solid rgba(233,238,243,.28)}
.frame-mark.tl{top:86px;left:28px;border-right:0;border-bottom:0}
.frame-mark.tr{top:86px;right:28px;border-left:0;border-bottom:0}
.frame-mark.bl{bottom:28px;left:28px;border-right:0;border-top:0}
.frame-mark.br{bottom:28px;right:28px;border-left:0;border-top:0}
.hero-meta{
  position:absolute;top:96px;right:44px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--paper-dim);text-align:right;line-height:2;
}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  color:var(--peak);text-transform:uppercase;margin-bottom:26px;
}
.hero h1{
  font-family:var(--display);
  font-weight:880;
  font-stretch:118%;
  font-size:clamp(46px,9.2vw,124px);
  line-height:.96;
  letter-spacing:-.015em;
  text-transform:uppercase;
  max-width:14ch;
  will-change:transform;
}
.hero h1 .thin{
  display:block;
  font-weight:480;font-stretch:78%;
  color:transparent;-webkit-text-stroke:1.5px var(--paper);
}
.hero p.lede{
  margin-top:30px;max-width:56ch;
  font-size:clamp(16px,1.5vw,19px);color:var(--paper-dim);
}
.hero p.lede strong{color:var(--paper);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-specs{
  margin-top:64px;display:flex;flex-wrap:wrap;gap:10px 34px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--paper-dim);
}
.hero-specs span::before{content:"◆";color:var(--rec);margin-right:10px;font-size:8px;vertical-align:2px}

/* ============================================================
   MARQUEE — cinta de servicios
   ============================================================ */
.tape{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-1);overflow:hidden;padding:16px 0;
}
.tape-track{
  display:flex;gap:48px;width:max-content;
  animation:tape 26s linear infinite;
  font-family:var(--display);font-weight:700;font-stretch:110%;
  font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);
  white-space:nowrap;
}
.tape:hover .tape-track{animation-play-state:paused}
.tape-track b{color:var(--rec);font-weight:700}
@keyframes tape{to{transform:translateX(-50%)}}

/* ============================================================
   LAYOUT COMÚN
   ============================================================ */
section{padding:110px 6vw}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:54px;flex-wrap:wrap}
.sec-head h2{
  font-family:var(--display);font-weight:850;font-stretch:114%;
  font-size:clamp(30px,4.4vw,54px);text-transform:uppercase;letter-spacing:-.01em;
}
.sec-head .slate{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--paper-dim);text-transform:uppercase}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   TRABAJOS — pósters con tilt 3D
   Cambia cada tarjeta por tu proyecto real: pega el enlace en
   href y, si quieres, tu miniatura de YouTube/Vimeo en el CSS.
   ============================================================ */
.works{max-width:1280px;margin:0 auto}
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;perspective:1200px}
.work{
  position:relative;grid-column:span 3;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-1);
  aspect-ratio:16/10;
  transform-style:preserve-3d;transition:transform .35s ease,border-color .25s;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.work.wide{grid-column:span 4}
.work.slim{grid-column:span 2;aspect-ratio:4/5}
.work:hover{border-color:#38465e}
.work .poster{position:absolute;inset:0}
/* Duotonos por proyecto — sustitúyelos por background-image:url(tu-miniatura) */
.p1{background:linear-gradient(160deg,#12324f,#0b0f14 60%),radial-gradient(600px at 80% 10%,rgba(255,59,48,.35),transparent 60%)}
.p2{background:linear-gradient(200deg,#4f2a12 0%,#0b0f14 65%),radial-gradient(500px at 15% 20%,rgba(255,180,84,.35),transparent 60%)}
.p3{background:linear-gradient(180deg,#123a33,#0b0f14 70%),radial-gradient(500px at 85% 80%,rgba(233,238,243,.14),transparent 60%)}
.p4{background:linear-gradient(140deg,#31123f,#0b0f14 65%),radial-gradient(520px at 20% 85%,rgba(255,59,48,.3),transparent 55%)}
.p5{background:linear-gradient(200deg,#3f1212,#0b0f14 70%),radial-gradient(520px at 75% 15%,rgba(255,180,84,.28),transparent 60%)}
.p6{background:linear-gradient(160deg,#1c2a44,#0b0f14 70%),radial-gradient(480px at 60% 90%,rgba(143,160,177,.25),transparent 60%)}
.work .poster::after{
  content:"";position:absolute;inset:0;opacity:.5;
  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='0.8'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}
.work .info{
  position:relative;padding:20px 22px;
  background:linear-gradient(to top,rgba(11,15,20,.92),transparent);
}
.work .kind{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--peak);margin-bottom:8px;display:flex;gap:10px;align-items:center;
}
.work .kind .slot{
  color:var(--paper-dim);border:1px solid var(--line);border-radius:3px;padding:2px 7px;
}
.work h3{font-family:var(--display);font-weight:750;font-stretch:110%;font-size:clamp(18px,1.8vw,24px);line-height:1.15;text-transform:uppercase}
.work .meta{font-family:var(--mono);font-size:11px;color:var(--paper-dim);margin-top:8px;letter-spacing:.08em}
.work .play{
  position:absolute;top:18px;right:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--paper);
  border:1px solid rgba(233,238,243,.35);border-radius:999px;padding:7px 13px;
  background:rgba(11,15,20,.4);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;
}
.work:hover .play{opacity:1;transform:none}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services{background:var(--ink-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;max-width:1280px;margin:0 auto}
.svc{
  border:1px solid var(--line);border-radius:8px;background:var(--ink-0);
  padding:28px 26px;transition:transform .25s,border-color .25s;
}
.svc:hover{transform:translateY(-4px);border-color:#38465e}
.svc .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--peak);text-transform:uppercase}
.svc h3{font-family:var(--display);font-weight:780;font-stretch:112%;font-size:21px;text-transform:uppercase;margin:12px 0 14px;line-height:1.15}
.svc ul{list-style:none;color:var(--paper-dim);font-size:15px}
.svc li{padding:7px 0;border-top:1px dashed var(--line)}
.svc li::before{content:"—";color:var(--rec);margin-right:10px}
.svc-note{max-width:1280px;margin:26px auto 0;font-size:15px;color:var(--paper-dim)}
.svc-note a{color:var(--paper);border-bottom:1px solid var(--rec)}

/* ============================================================
   PROCESO — sí es una secuencia real, por eso va numerado
   ============================================================ */
.process-list{max-width:900px;margin:0 auto;counter-reset:step}
.step{
  display:grid;grid-template-columns:90px 1fr;gap:26px;align-items:baseline;
  padding:30px 0;border-top:1px solid var(--line);counter-increment:step;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  content:"0" counter(step);
  font-family:var(--mono);font-size:26px;color:var(--rec);letter-spacing:.06em;
}
.step h3{font-family:var(--display);font-weight:760;font-stretch:110%;font-size:22px;text-transform:uppercase;margin-bottom:8px}
.step p{color:var(--paper-dim);font-size:15.5px;max-width:60ch}

/* ============================================================
   SOBRE MÍ + EQUIPO
   ============================================================ */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;max-width:1280px;margin:0 auto;align-items:start}
.about .lede{font-size:clamp(19px,2vw,24px);line-height:1.5;font-weight:500}
.about .lede em{color:var(--peak);font-style:normal}
.about p+p{margin-top:18px;color:var(--paper-dim)}
.kit{border:1px solid var(--line);border-radius:8px;background:var(--ink-1);padding:26px}
.kit .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--peak);text-transform:uppercase}
.kit ul{list-style:none;margin-top:14px;font-family:var(--mono);font-size:13px;line-height:2.1;color:var(--paper)}
.kit li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line)}
.kit li span:last-child{color:var(--paper-dim)}

/* ============================================================
   PRESUPUESTO — el formulario
   ============================================================ */
.quote{background:var(--ink-1);border-top:1px solid var(--line)}
.quote-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.quote-copy h2{
  font-family:var(--display);font-weight:860;font-stretch:116%;
  font-size:clamp(34px,4.6vw,58px);text-transform:uppercase;line-height:1;margin-bottom:22px;
}
.quote-copy h2 .rec-word{color:var(--rec)}
.quote-copy p{color:var(--paper-dim);max-width:46ch}
.quote-copy .direct{margin-top:30px;font-family:var(--mono);font-size:13px;line-height:2.2}
.quote-copy .direct a{border-bottom:1px solid var(--rec)}
form.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim)}
.field input,.field select,.field textarea{
  background:var(--ink-0);border:1px solid var(--line);border-radius:5px;
  color:var(--paper);font:inherit;font-size:15px;padding:13px 14px;
  transition:border-color .2s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--peak)}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;align-items:center}
.form-hint{grid-column:1/-1;font-family:var(--mono);font-size:11px;color:var(--paper-dim);letter-spacing:.06em}
.form-ok{grid-column:1/-1;display:none;font-family:var(--mono);font-size:13px;color:var(--peak)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:60px 6vw 40px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line)}
footer .sign{font-family:var(--display);font-weight:820;font-stretch:114%;font-size:26px;text-transform:uppercase}
footer .fin{font-family:var(--mono);font-size:11px;color:var(--paper-dim);letter-spacing:.14em}
footer .social{display:flex;gap:22px;font-size:14px;color:var(--paper-dim)}
footer .social a:hover{color:var(--paper)}

/* ============================================================
   RESPONSIVE + MOVIMIENTO REDUCIDO
   ============================================================ */
@media (max-width:960px){
  .hud nav a{display:none}
  .work,.work.wide,.work.slim{grid-column:1/-1;aspect-ratio:16/10}
  .about,.quote-wrap{grid-template-columns:1fr}
  form.quote-form{grid-template-columns:1fr}
  .hero-meta{display:none}
  section{padding:80px 6vw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}