/* ===== SERVICIOS: links + ventana Windows 98 (ver servicios.js) ===== */
.svc--link{ cursor:pointer; }

.w98{
  position:absolute; left:0; top:0; z-index:20;
  width:460px;
  background:#c0c0c0;
  border:2px solid; border-color:#fff #000 #000 #fff;
  box-shadow:inset -1px -1px #808080, inset 1px 1px #dfdfdf;
  padding:3px;
  font:13px/1.2 Tahoma,"MS Sans Serif",Geneva,sans-serif; color:#000;
  opacity:0; transform:scale(.9); transform-origin:top left;
  pointer-events:none;
  transition:opacity .12s steps(2), transform .12s steps(2);   /* aparece "a los saltos", como en el 98 */
}
.w98.show{ opacity:1; transform:none; pointer-events:auto; }
.w98.w98--ghost{ opacity:1; transform:none; pointer-events:none; z-index:19; transition:opacity .25s; }
.w98.w98--out{ opacity:0; }

.w98-bar{
  display:flex; align-items:center; gap:6px;
  height:22px; padding:0 3px 0 4px;
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff; font-weight:700; letter-spacing:.02em;
}
.w98-ico{ width:14px; height:14px; border-radius:50%; border:2px solid #fff; transform:scaleY(.6) rotate(-4deg); }
.w98-title{ flex:1; white-space:nowrap; }
.w98-x{
  width:18px; height:16px; padding:0; line-height:12px; font:700 11px/1 Tahoma,sans-serif; color:#000;
  background:#c0c0c0; border:1px solid; border-color:#fff #000 #000 #fff;
  box-shadow:inset -1px -1px #808080; cursor:pointer;
}
.w98-x:active{ border-color:#000 #fff #fff #000; }
.w98-menu{ padding:4px 6px 5px; font-size:12px; }

/* la lista: caja blanca hundida, con la tipografía de pana */
.w98-list{
  position:relative; height:330px; overflow:hidden;
  background:#fff;
  border:2px solid; border-color:#808080 #fff #fff #808080;
  box-shadow:inset 1px 1px #000;
}
.w98-roll{ will-change:transform; }
.w98-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:5px 12px 4px;
  color:var(--red); text-decoration:none;
  font-family:var(--font-main); font-weight:950; font-variation-settings:"wght" 950, "wdth" 65;
  font-size:30px; line-height:1; letter-spacing:-0.02em; text-transform:lowercase;
  white-space:nowrap;
}
.w98-n{ font:11px Tahoma,"MS Sans Serif",sans-serif; color:#808080; text-transform:none; letter-spacing:0; }
.w98-row:hover{ background:#000080; color:#fff; }
.w98-row:hover .w98-n{ color:#c0c0ff; }

.w98-status{
  display:flex; gap:3px; margin-top:3px; font-size:11px;
}
.w98-status span{
  flex:1; padding:2px 5px;
  border:1px solid; border-color:#808080 #fff #fff #808080;
}

/* ===== logos en la lista de clientes (logos.js) ===== */
.proj__t.has-logo{ position:relative; }
/* en estos nombres no corre el cambio de tipografía: se disuelven */
.proj__t.has-logo .ltr.on .face.front{ opacity:1; }
.proj__t.has-logo .ltr.on .face.back{ opacity:0; animation:none; }
.proj__t.has-logo .ltr{ transition:opacity .45s ease; }
.plogo{
  position:absolute; left:50%; top:50%;
  height:var(--h,70px); width:auto; max-width:none;
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.97);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .7s cubic-bezier(.25,.8,.3,1);
  z-index:3;
}
.plogo.placa{ padding:10px 16px; border-radius:6px; box-sizing:content-box; }
.plogo.sticker{ border-radius:50%; }
/* compu: al pasar el mouse · celular: al tocar (clase .on) */
@media (hover:hover){
  .proj__t.has-logo:hover .ltr{ opacity:0; }
  .proj__t.has-logo:hover .plogo{ opacity:1; transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1); }
}
.proj__t.has-logo.on .ltr{ opacity:0; }
.proj__t.has-logo.on .plogo{ opacity:1; transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(1); }
/* celular: logos 1.6 veces más grandes (la lista también lo es) */
/* celular: el alto x1.6 lo pone logos.js */

/* ===== aviso antes de irse (salir.js): diálogo Windows 98 ===== */
.salir{ position:fixed; inset:0; z-index:20000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); }
.salir.on{ display:flex; }
.salir-win{
  width:min(360px, calc(100vw - 32px));
  background:#c0c0c0; border:2px solid; border-color:#fff #000 #000 #fff;
  box-shadow:inset -1px -1px #808080, inset 1px 1px #dfdfdf, 0 10px 40px rgba(0,0,0,.5);
  padding:3px; font:13px/1.3 Tahoma,"MS Sans Serif",Geneva,sans-serif; color:#000;
  animation:salir-pop .12s steps(2);
}
@keyframes salir-pop{ from{ transform:scale(.92); opacity:0; } }
.salir-body{ display:flex; gap:14px; align-items:flex-start; padding:16px 14px 10px; }
.salir-body p{ margin:0 0 4px; }
.salir-url{ font-weight:700; word-break:break-all; }
.salir-ico{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:#f50000; color:#fff; font:700 22px/32px Tahoma,sans-serif; text-align:center;
}
.salir-bts{ display:flex; justify-content:center; gap:10px; padding:6px 0 10px; }
.salir-bts button{
  min-width:86px; padding:5px 12px; font:13px Tahoma,"MS Sans Serif",sans-serif; color:#000;
  background:#c0c0c0; border:2px solid; border-color:#fff #000 #000 #fff;
  box-shadow:inset -1px -1px #808080, inset 1px 1px #dfdfdf; cursor:pointer;
}
.salir-bts button:active{ border-color:#000 #fff #fff #000; box-shadow:inset 1px 1px #808080; }
.salir-bts button:focus-visible{ outline:1px dotted #000; outline-offset:-5px; }
.salir .w98-bar{ height:22px; }
/* (en el celular las reglas de la ventana grande no aplican al aviso: va en px reales) */
.vertical .salir .w98-bar{ height:24px; font-size:13px; gap:6px; padding:0 3px 0 4px; }
.vertical .salir .w98-ico{ width:14px; height:14px; border-width:2px; }
.vertical .salir .w98-x{ width:22px; height:20px; font-size:12px; line-height:14px; }
.vertical .salir-win{ font-size:15px; }
.vertical .salir-bts button{ font-size:15px; padding:9px 14px; }

/* ===== aviso antes de irse, con la estética de pana (salir.js) ===== */
.sp-card{
  width:min(440px, calc(100vw - 32px)); background:#000; color:var(--red);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 0 22px; animation:sp-in .35s cubic-bezier(.22,1,.36,1);
}
@keyframes sp-in{ from{ opacity:0; transform:scale(.96); } }
.sp-fotos{ width:100%; aspect-ratio:16/9; overflow:hidden; margin-bottom:18px; }
.sp-fotos img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-txt{ margin:0; font:400 15px/1 var(--font-italic); font-style:italic; opacity:.8; }
.sp-url{
  margin:6px 18px 18px; font-family:var(--font-main); font-weight:950; font-variation-settings:"wght" 950, "wdth" 65;
  font-size:30px; line-height:1; letter-spacing:-0.035em; word-break:break-all;
}
.sp-card:not(:has(.sp-fotos[style*="none"])) { padding-top:0; }
.sp-fotos[style*="none"] + .sp-txt{ margin-top:26px; }
.sp-bts{ display:flex; gap:22px; align-items:center; }
.sp-bts button{
  font-family:var(--font-main); font-weight:950; font-variation-settings:"wght" 950, "wdth" 65;
  font-size:24px; letter-spacing:-0.035em; text-transform:lowercase; cursor:pointer; border:none;
}
.sp-ir{ background:var(--red); color:#000; padding:7px 28px; }
.sp-no{ background:none; color:var(--red); padding:7px 4px; opacity:.75; }
.sp-no:hover{ opacity:1; }
.sp-bts button:focus{ outline:none; }
.sp-bts button:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.sp-txt{ font-size:18px; }
/* en el diálogo Windows 98 la dirección va en letra de Windows, no en la de pana */
.salir-win .sp-url{ margin:0; font:700 13px/1.3 Tahoma,"MS Sans Serif",Geneva,sans-serif; letter-spacing:0; word-break:break-all; }
.vertical .salir-win .sp-url{ font-size:15px; }

/* miniatura de adónde vas (Branding / Audiovisual), igual a la de los clientes */
.svc-clip{
  position:absolute; left:0; top:0; width:486px; height:274px; margin:0; overflow:hidden;
  transform-origin:top left; transform:scale(.96); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1); z-index:6;
}
.svc-clip.show{ opacity:1; transform:scale(1); }
.svc-clip img{ width:100%; height:100%; object-fit:cover; display:block; }
.vertical .svc-clip{ width:700px; height:394px; transform-origin:center; }
.svc-clip.show{ pointer-events:auto; cursor:pointer; }
/* Audiovisual: miniatura parada (3:4), como las fotos del portfolio */
.svc-clip.parada{ width:340px; height:453px; }
.vertical .svc-clip.parada{ width:540px; height:720px; }

/* ===== CONTACTO minimalista: el Instagram manda, el formulario susurra ===== */
.contact__ig{ font-size:118px; margin-bottom:46px; }
.contact__form{ width:400px; gap:4px; }
.cf-input{
  border-bottom:1px solid rgba(245,0,0,.28);
  font-variation-settings:"wght" 380, "wdth" 75; font-weight:400;
  font-size:19px; letter-spacing:0; padding:10px 2px 7px;
  transition:border-color .3s;
}
.cf-input:focus{ border-bottom-color:var(--red); }
.cf-input::placeholder{ opacity:.38; }
textarea.cf-input{ min-height:0; height:40px; }
.cf-send{
  align-self:flex-end; margin-top:14px; padding:4px 0;
  background:none; color:var(--red);
  font-variation-settings:"wght" 380, "wdth" 75; font-weight:400;
  font-size:17px; letter-spacing:0; opacity:.7;
  border-bottom:1px solid transparent; transition:opacity .3s, border-color .3s;
}
.cf-send::after{ content:" →"; }
.cf-send:hover{ opacity:1; border-bottom-color:var(--red); }
.cf-ok{ font-size:17px; opacity:.8; }
.vertical .contact__ig{ font-size:150px; margin-bottom:80px; }
.vertical .contact__form{ width:820px; gap:10px; }
.vertical .cf-input{ font-size:40px; padding:22px 4px 14px; border-bottom-width:2px; }
.vertical textarea.cf-input{ height:84px; }
.vertical .cf-send{ font-size:38px; margin-top:26px; padding:8px 0; }
.vertical .cf-ok{ font-size:36px; }