/* DJL Productions · páginas de servicio. Misma identidad que la portada (sitio/djl/index.html):
   papel claro, tinta negra, cian de marcador, Archivo expandida + JetBrains Mono, visor de cámara. Esquinas rectas. */
:root{
  /* selector de idioma (idiomas.js) */ --idi-fondo:var(--blanco); --idi-tinta:var(--tinta); --idi-acento:#0a7d99; --idi-sobre-acento:#fff; --idi-borde:var(--tinta); --idi-fuente:var(--mono); --idi-radio:0; --idi-radio-lista:0;
  --papel:#f1efe9; --papel2:#e6e3db; --blanco:#fbfaf7; --tinta:#0c0c0d; --tinta2:#1a1a1c; --gris:#57575b; --gris2:#8b8b8f;
  --linea2:rgba(12,12,13,.28); --cian:#1ad4ff; --rec:#ff3b30;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --pad:clamp(16px,4vw,48px); --max:1280px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--papel); color:var(--tinta); font:400 16px/1.55 var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased}
img,video{display:block; max-width:100%}
a{color:inherit}
::selection{background:var(--cian); color:var(--tinta)}
:focus-visible{outline:2px solid var(--tinta); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
section[id]{scroll-margin-top:80px}
mark{background:var(--cian); color:var(--tinta); padding:0 .08em; -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; background:var(--papel); border-bottom:2px solid var(--tinta); transition:box-shadow .3s}
.nav.solida{box-shadow:0 8px 24px -16px rgba(0,0,0,.35)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:800 15px/1 var(--sans); font-stretch:115%; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.logo b{display:inline-grid; place-items:center; background:var(--tinta); color:var(--blanco); padding:7px 8px 6px; font-weight:900; letter-spacing:.06em; box-shadow:4px 4px 0 var(--cian)}
.links{display:flex; gap:22px; font:500 12px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em}
.links a{text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap}
.links a:hover{border-color:var(--cian)}
@media (max-width:1100px){ .links{display:none} }
@media (max-width:400px){ .logo span{display:none} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 14px/1 var(--sans); font-stretch:110%; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; padding:16px 22px; border:2px solid var(--tinta); cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, color .15s; white-space:nowrap}
.btn svg{width:16px; height:16px; flex:none}
.btn-tinta{background:var(--tinta); color:var(--blanco); box-shadow:5px 5px 0 var(--cian)}
.btn-tinta:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--cian)}
.btn-tinta:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--cian)}
.btn-linea{background:transparent; color:var(--tinta)}
.btn-linea:hover{background:var(--tinta); color:var(--blanco)}
.nav .btn{padding:11px 14px; font-size:12px; box-shadow:3px 3px 0 var(--cian)}

/* hero de servicio */
.hero{padding:104px 0 0}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px,5vw,64px); align-items:end}
.miga{display:flex; flex-wrap:wrap; gap:6px 10px; margin:0 0 22px; padding:0; list-style:none; font:500 11.5px/1.4 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--gris)}
.miga li+li::before{content:"/"; margin-right:10px; color:var(--gris2)}
.miga a{text-decoration:none; border-bottom:1px solid var(--linea2)}
.miga a:hover{border-color:var(--cian)}
.miga [aria-current]{color:var(--tinta); font-weight:700}
.claqueta{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font:500 12px/1 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--gris)}
.claqueta .rec{display:inline-flex; align-items:center; gap:7px; color:var(--tinta); font-weight:700}
.claqueta .rec::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--rec); animation:parpadeo 1.2s steps(2) infinite}
@keyframes parpadeo{50%{opacity:0}}
h1{font:900 clamp(36px,5.6vw,92px)/.9 var(--sans); font-stretch:118%; letter-spacing:-.035em; text-transform:uppercase; margin:24px 0 26px; overflow-wrap:break-word; hyphens:auto}
.hero p.sub{font-size:clamp(17px,1.5vw,20px); color:var(--gris); max-width:620px; margin:0 0 32px}
.hero p.sub strong{color:var(--tinta); font-weight:700}
.ctas{display:flex; flex-wrap:wrap; gap:14px}
@media (max-width:560px){ .ctas .btn{white-space:normal; text-align:center} }

.visor{position:relative; width:100%; max-width:340px; margin-left:auto; aspect-ratio:9/16; background:var(--tinta); border:2px solid var(--tinta); box-shadow:12px 12px 0 var(--cian)}
.visor video{width:100%; height:100%; object-fit:cover}
.visor .esq{position:absolute; inset:14px; pointer-events:none; opacity:.85;
  background:linear-gradient(#fff,#fff) 0 0/22px 2px, linear-gradient(#fff,#fff) 0 0/2px 22px,
             linear-gradient(#fff,#fff) 100% 0/22px 2px, linear-gradient(#fff,#fff) 100% 0/2px 22px,
             linear-gradient(#fff,#fff) 0 100%/22px 2px, linear-gradient(#fff,#fff) 0 100%/2px 22px,
             linear-gradient(#fff,#fff) 100% 100%/22px 2px, linear-gradient(#fff,#fff) 100% 100%/2px 22px; background-repeat:no-repeat}
.visor .hud{position:absolute; left:26px; right:26px; display:flex; justify-content:space-between; font:500 11px/1 var(--mono); color:#fff; letter-spacing:.06em; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.visor .hud.arriba{top:28px} .visor .hud.abajo{bottom:28px}
.visor .hud .r{display:inline-flex; align-items:center; gap:6px}
.visor .hud .r::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--rec); animation:parpadeo 1.2s steps(2) infinite}
.visor .centro{position:absolute; left:50%; top:50%; width:26px; height:26px; translate:-50% -50%; opacity:.55;
  background:linear-gradient(#fff,#fff) center/2px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 2px no-repeat}

.specs{margin-top:clamp(48px,7vw,80px); background:var(--tinta); color:var(--blanco)}
.specs .wrap{display:grid; grid-template-columns:repeat(3,1fr); align-items:start}
.specs .wrap > div{padding:22px 0 22px clamp(14px,2vw,26px); display:flex; flex-direction:column; gap:8px; border-left:1px solid rgba(255,255,255,.14)}
.specs .wrap > div:first-child{border-left:0; padding-left:0}
.specs small{font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gris2)}
.specs b{font:900 clamp(22px,2.8vw,38px)/1 var(--sans); font-stretch:118%; letter-spacing:-.02em; text-transform:uppercase}
.specs b em{font-style:normal; color:var(--cian)}
.rayas{height:16px; background:repeating-linear-gradient(-45deg,var(--tinta) 0 14px,var(--papel) 14px 28px); border-bottom:2px solid var(--tinta)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .visor{margin:0 auto; max-width:280px}
}
@media (max-width:620px){
  .specs .wrap{grid-template-columns:1fr}
  .specs .wrap > div{border-left:0; padding:16px 0; border-top:1px solid rgba(255,255,255,.14)}
  .specs .wrap > div:first-child{border-top:0}
}

/* encabezados de sección */
section.sec{padding:clamp(72px,10vw,128px) 0}
.rotulo{display:flex; align-items:baseline; gap:14px; font:500 12px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--gris)}
.rotulo b{color:var(--tinta); background:var(--cian); padding:5px 7px}
h2{font:900 clamp(30px,4.8vw,68px)/.92 var(--sans); font-stretch:116%; letter-spacing:-.03em; text-transform:uppercase; margin:20px 0 0; overflow-wrap:break-word}
.cabeza{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:end; margin-bottom:clamp(36px,5vw,56px)}
.lead{color:var(--gris); font-size:clamp(16px,1.35vw,18px); margin:0}
@media (max-width:900px){ .cabeza{grid-template-columns:1fr} }

/* qué incluye: hoja de partes */
.indice{border-top:2px solid var(--tinta)}
.fila-s{display:grid; grid-template-columns:90px 1fr 1.6fr; gap:24px; padding:28px 12px; border-bottom:1px solid var(--linea2); align-items:start; transition:background .2s}
.fila-s:hover{background:var(--cian)}
.fila-s .n{font:700 13px/1.6 var(--mono); letter-spacing:.06em}
.fila-s h3{margin:0; font:800 clamp(20px,2vw,26px)/1.08 var(--sans); font-stretch:112%; text-transform:uppercase; letter-spacing:-.01em}
.fila-s p{margin:0; color:var(--gris); font-size:15.5px}
.fila-s:hover p{color:var(--tinta)}
@media (max-width:900px){
  .fila-s{grid-template-columns:44px 1fr; gap:8px 14px; padding:22px 4px}
  .fila-s p{grid-column:2}
}

/* para quién: tarjetas */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.tarjeta{background:var(--blanco); border:2px solid var(--tinta); padding:22px 22px 24px; box-shadow:6px 6px 0 var(--tinta); display:flex; flex-direction:column; gap:10px}
.tarjeta small{font:700 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gris)}
.tarjeta h3{margin:0; font:800 20px/1.1 var(--sans); font-stretch:112%; text-transform:uppercase}
.tarjeta p{margin:0; color:var(--gris); font-size:15.5px}
@media (max-width:560px){ .tarjeta{box-shadow:5px 5px 0 var(--tinta)} }

/* texto corrido */
.texto{max-width:72ch; color:var(--gris); font-size:clamp(16px,1.3vw,18px); line-height:1.7}
.texto p{margin:0 0 18px}
.texto strong{color:var(--tinta)}

/* cómo trabajamos: panel de edición */
.editor{background:var(--tinta2); color:#eceae4; border:2px solid var(--tinta); box-shadow:12px 12px 0 var(--cian)}
.ed-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.1); font:500 11.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#9a9a9f}
.ed-top b{color:#fff; font-weight:700}
.clips{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08)}
.clip{background:var(--tinta2); padding:14px 14px 22px; display:flex; flex-direction:column; gap:10px; margin:0}
.clip .v{position:relative; aspect-ratio:9/13; background:#000; overflow:hidden}
.clip .v video{width:100%; height:100%; object-fit:cover}
.clip .tc{font:700 22px/1 var(--mono); color:var(--cian); margin-top:4px}
.clip h3{margin:0; font:800 18px/1.15 var(--sans); font-stretch:110%; text-transform:uppercase; color:#fff}
.clip p{margin:0; font-size:14px; color:#a8a8ad}
@media (max-width:900px){ .clips{grid-template-columns:1fr 1fr} .editor{box-shadow:7px 7px 0 var(--cian)} }
@media (max-width:480px){ .clip{padding:10px 10px 18px} .clip .v{aspect-ratio:9/11} .clip .tc{font-size:18px} .clip h3{font-size:15px} .clip p{font-size:13px} }

/* sala oscura + formatos */
.sala{background:var(--tinta); color:var(--blanco)}
.sala .rotulo{color:var(--gris2)}
.sala .lead,.sala .texto{color:#a9a9ad}
.sala .texto strong{color:var(--blanco)}
.formatos{display:grid; grid-template-columns:.55fr 1.6fr .8fr; gap:clamp(16px,3vw,40px); align-items:end; margin-top:36px}
.fmt{display:grid; gap:8px}
.fmt .marco{position:relative; width:100%; border:2px solid rgba(255,255,255,.75); display:grid; place-items:center; margin-bottom:10px;
  background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) center/1px 100% no-repeat, linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) center/100% 1px no-repeat}
.fmt .marco span{font:700 clamp(14px,1.6vw,20px)/1 var(--mono); background:var(--cian); color:var(--tinta); padding:6px 9px}
.fmt b{font:800 20px/1.1 var(--sans); font-stretch:112%; text-transform:uppercase}
.fmt small{color:#a9a9ad; font-size:14px}
@media (max-width:700px){ .formatos{grid-template-columns:1fr 1fr} .fmt.ancho{grid-column:1 / -1; order:-1} }

/* preguntas */
.faq{max-width:900px; border-top:1px solid var(--linea2)}
.faq details{border-bottom:1px solid var(--linea2)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; font:600 clamp(17px,1.6vw,20px)/1.35 var(--sans); color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; color:var(--rec); font:400 28px/1 var(--sans); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--rec); outline-offset:4px}
.faq p{margin:0 0 24px; color:var(--gris); max-width:68ch; line-height:1.65; font-size:16.5px}

/* llamado: orden de producción */
.llamado .wrap{display:grid; grid-template-columns:1fr .9fr; gap:clamp(30px,6vw,80px); align-items:center}
.lista{list-style:none; margin:28px 0 0; padding:0; border-top:2px solid var(--tinta)}
.lista li{display:grid; grid-template-columns:40px 1fr; gap:10px; padding:16px 0; border-bottom:1px solid var(--linea2); color:var(--gris)}
.lista li span:first-child{font:700 12px/1.6 var(--mono); color:var(--tinta)}
.lista li b{color:var(--tinta)}
.boleta{background:var(--blanco); border:2px solid var(--tinta); box-shadow:12px 12px 0 var(--tinta)}
.boleta .orden{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:16px 22px; background:var(--tinta); color:var(--blanco); font:700 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.boleta .orden span:last-child{color:var(--cian)}
.boleta .cuerpo{padding:24px 22px 28px; display:grid; gap:18px}
.boleta .cuerpo p{margin:0; color:var(--gris)}
.boleta .cuerpo .btn{justify-self:start}
@media (max-width:900px){ .llamado .wrap{grid-template-columns:1fr} }
@media (max-width:560px){ .boleta{box-shadow:7px 7px 0 var(--tinta)} .boleta .orden{padding:14px 16px} .boleta .cuerpo{padding:20px 16px 24px} .boleta .cuerpo .btn{white-space:normal; text-align:center} }

/* otros servicios */
.otros{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:2px solid var(--tinta); border-left:1px solid var(--linea2)}
.otros a{display:flex; flex-direction:column; gap:10px; padding:22px 18px 24px; text-decoration:none; border-right:1px solid var(--linea2); border-bottom:1px solid var(--linea2); transition:background .2s}
.otros a:hover{background:var(--cian)}
.otros small{font:700 12px/1 var(--mono); letter-spacing:.06em}
.otros b{font:800 19px/1.1 var(--sans); font-stretch:112%; text-transform:uppercase}
.otros span{color:var(--gris); font-size:14.5px}
.otros a:hover span{color:var(--tinta)}

footer{background:var(--tinta); color:#a9a9ad; padding:clamp(50px,7vw,80px) 0 calc(28px + env(safe-area-inset-bottom,0px)); overflow:hidden}
.marca-grande{font:900 clamp(46px,13vw,196px)/.8 var(--sans); font-stretch:125%; letter-spacing:-.04em; color:var(--blanco); text-transform:uppercase; white-space:nowrap}
.marca-grande span{color:var(--cian)}
.pie-servicios{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px; font:500 12px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em}
.pie-servicios a{text-decoration:none; color:var(--blanco)} .pie-servicios a:hover{color:var(--cian)}
.pie-fila{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font:500 12px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em}
.pie-fila nav{display:flex; gap:20px; flex-wrap:wrap}
.pie-fila a{text-decoration:none} .pie-fila a:hover{color:var(--cian)}

.rev{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
.rev.visto{opacity:1; transform:none}
.rev.d1{transition-delay:.07s} .rev.d2{transition-delay:.14s} .rev.d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} .rev{opacity:1; transform:none} html{scroll-behavior:auto} }