/* Pittahaya · Servicios: el taller */
.taller{background:var(--negro)}
.tl-intro{max-width:var(--maxw);margin:0 auto;padding:clamp(130px,20vh,220px) var(--margen) clamp(40px,8vh,90px)}
.tl-rot{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fruta-viva);margin:0 0 22px}
.tl-t{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(54px,9.5vw,170px);line-height:.92;letter-spacing:-.045em}
.tl-t em{font-style:italic;color:var(--champan)}

.tl-obra{display:grid;grid-template-columns:1.1fr 1fr;max-width:calc(var(--maxw) + 2 * var(--margen));margin:0 auto;padding-inline:var(--margen);gap:clamp(30px,5vw,90px)}
.tl-fijo{display:contents}
.tl-escena{position:sticky;top:calc(76px + 4vh);height:calc(100svh - 76px - 8vh);border-radius:22px;overflow:hidden;
  border:1px solid var(--linea);background:var(--tinta)}
.tl-capa{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.tl-capa.on{opacity:1;transform:none}
.tl-capa > img,.tl-capa > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tl-capa::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,rgba(8,7,10,.75),transparent 60%);pointer-events:none}
.tl-fondo-suave{filter:blur(2px) brightness(.45)}
.tl-pantalla{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%) rotate(-2deg);z-index:1;
  border-radius:12px;overflow:hidden;border:1px solid var(--linea-2);background:var(--carbon);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 90px -20px rgba(224,53,123,.4);transition:transform 1.4s var(--ease)}
.tl-capa.on .tl-pantalla{transform:translateY(-50%) rotate(0)}
.tl-pantalla img{display:block;width:100%}
.tl-barra{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--linea)}
.tl-barra i{width:8px;height:8px;border-radius:50%;background:var(--linea-2)}
.tl-barra b{margin:0 auto;font:400 11px var(--mono);color:var(--marfil-2)}
.tl-chat{position:absolute;left:8%;right:8%;bottom:9%;z-index:1;display:flex;flex-direction:column;gap:10px}
.tl-b{max-width:78%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.4;
  opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .9s var(--ease);backdrop-filter:blur(14px)}
.tl-b--el{align-self:flex-start;background:rgba(244,239,230,.14);border-bottom-left-radius:4px}
.tl-b--ia{align-self:flex-end;background:rgba(224,53,123,.85);border-bottom-right-radius:4px}
.tl-b--ok{align-self:center;background:rgba(159,206,58,.16);color:var(--lima);font-family:var(--mono);font-size:11px;letter-spacing:.12em;border-radius:999px;padding:8px 14px}
.tl-capa.on .tl-b{opacity:1;transform:none}
.tl-capa.on .tl-b--ia{transition-delay:.9s}
.tl-capa.on .tl-b--ok{transition-delay:1.8s}
.tl-capa .tl-b--el{transition-delay:.3s}
.tl-prog{position:absolute;left:24px;right:24px;top:22px;height:2px;background:rgba(244,239,230,.15);border-radius:2px;z-index:2;overflow:hidden}
.tl-prog i{position:absolute;inset:0;background:var(--marfil);transform-origin:0 50%;transform:scaleX(var(--tp,0))}

.tl-caps{padding-bottom:20vh}
.tl-cap{min-height:88svh;display:flex;flex-direction:column;justify-content:center;opacity:.18;transition:opacity .8s var(--ease)}
.tl-cap.on{opacity:1}
.tl-n{font-family:var(--serif);font-weight:300;font-size:clamp(64px,7vw,120px);line-height:1;color:var(--fruta-viva);letter-spacing:-.04em}
.tl-n small{display:block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--marfil-3)}
.tl-h{margin:26px 0 0;font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.6vw,80px);line-height:.98;letter-spacing:-.035em}
.tl-h em{font-style:italic;color:var(--champan)}
.tl-tags{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tl-tags li{padding:9px 16px;border:1px solid var(--linea-2);border-radius:999px;font-size:13px;color:var(--marfil-2)}
.tl-movil{display:none}

.tl-cierre{max-width:var(--maxw);margin:0 auto;padding:clamp(60px,12vh,140px) var(--margen) clamp(90px,16vh,180px)}
.tl-t--cierre{font-size:clamp(48px,8vw,140px);margin-bottom:44px}
.tl-acc{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:860px){
  .tl-intro{padding:110px var(--margen) 26px}
  .tl-t{font-size:clamp(46px,14vw,74px)}
  /* escena y texto fijos, cada uno en su espacio: nunca se cruzan */
  .tl-obra{display:block;position:relative;height:330svh;padding-inline:var(--margen)}
  .tl-fijo{display:flex;flex-direction:column;position:sticky;top:76px;height:calc(100svh - 76px)}
  .tl-escena{position:relative;top:auto;height:40svh;flex:none;border-radius:18px}
  .tl-movil{display:none!important}
  .tl-caps{position:relative;flex:1;padding:0;overflow:hidden}
  .tl-cap{position:absolute;inset:0;min-height:0;padding:20px 0 0;justify-content:flex-start;
    opacity:0;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
  .tl-cap.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .55s var(--ease) .24s,transform .7s var(--ease) .24s}
  .tl-n{font-size:clamp(30px,9vw,40px);display:flex;align-items:baseline;gap:12px}
  .tl-n small{display:inline;margin:0}
  .tl-h{font-size:clamp(28px,8.4vw,42px);margin-top:8px}
  .tl-tags{margin-top:14px;gap:6px}
  .tl-tags li{padding:6px 11px;font-size:12px}
  .tl-pantalla{left:6%;right:6%}
  .tl-chat{left:5%;right:5%;bottom:6%;gap:6px}
  .tl-b{font-size:12px;padding:8px 11px}
  .tl-b--ok{font-size:9px;padding:6px 10px}
  .tl-prog{top:12px;left:14px;right:14px}
  .tl-cierre{padding:40px var(--margen) 90px}
  .tl-t--cierre{font-size:clamp(44px,13vw,70px);margin-bottom:28px}
}
@media (min-width:600px) and (max-width:860px){
  .tl-escena{height:54svh}
  .tl-cap{padding:0;justify-content:center}
  .tl-n{font-size:52px}
  .tl-h{font-size:clamp(44px,7vw,60px)}
  .tl-tags li{font-size:14px;padding:8px 14px}
  .tl-b{font-size:15px;padding:11px 15px}
  .tl-b--ok{font-size:11px}
}
@media (max-width:860px) and (max-height:640px){
  .tl-escena{height:36svh}
  .tl-tags{display:none}
}
@media (prefers-reduced-motion:reduce){.tl-capa,.tl-b,.tl-pantalla{transition:none}}