/* Ventanas estilo Mac OS 8 "Platinum", hechas en CSS (sin imágenes para el marco).
   El contenido es una foto más grande que la ventana: se puede scrollear para descubrirla. */
.mac-win {
  --pl-1: #eeeeee; --pl-2: #dddddd; --pl-3: #bbbbbb; --pl-4: #888888; --pl-5: #555555;
  --pl-azul: #ccccff; --pl-azul-o: #6666cc;
  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--pl-2); border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--pl-4), 3px 3px 0 rgba(0, 0, 0, .55);
  font-family: Charcoal, "Chicago", "Geneva", -apple-system, Helvetica, Arial, sans-serif; color: #000;
  user-select: none;
}
/* Barra de título con rayas */
.mac-win .mw-bar { position: relative; flex: 0 0 auto; height: 19px; margin: 2px 3px 0; display: flex; align-items: center; gap: 4px; padding: 0 2px; cursor: default; }
.mac-win .mw-bar::before { /* rayas horizontales */
  content: ""; position: absolute; inset: 3px 2px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, #fff 0 1px, var(--pl-3) 1px 2px);
}
.mac-win:not(.activa) .mw-bar::before { background: none; }
.mac-win .mw-titulo {
  position: relative; z-index: 1; margin: 0 auto; padding: 0 6px; background: var(--pl-2);
  font-size: 12px; font-weight: 700; line-height: 19px; letter-spacing: 0; white-space: nowrap;
}
.mac-win .mw-btn {
  position: relative; z-index: 1; flex: 0 0 auto; width: 13px; height: 13px; padding: 0; margin: 0; box-sizing: border-box; cursor: pointer;
  background: linear-gradient(135deg, var(--pl-4), #fff); border: 1px solid #000;
  box-shadow: inset 1px 1px 0 var(--pl-1), inset -1px -1px 0 var(--pl-4);
}
.mac-win .mw-btn:active { background: var(--pl-4); box-shadow: inset 1px 1px 0 var(--pl-5); }
.mac-win .mw-zoom::after { content: ""; position: absolute; left: 2px; top: 2px; width: 5px; height: 5px; border: 1px solid #000; border-width: 0 1px 1px 0; }
.mac-win .mw-plegar::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 1px; border-top: 1px solid #000; border-bottom: 1px solid #000; }

/* Área de contenido con scroll real */
.mac-win .mw-cuerpo {
  position: relative; flex: 1 1 auto; margin: 2px 3px 3px; border: 1px solid #000; background: #fff;
  overflow: scroll; overscroll-behavior: contain; scrollbar-width: auto; scrollbar-color: var(--pl-azul) var(--pl-3);
  cursor: grab; -webkit-overflow-scrolling: touch; outline: none;
}
.mac-win .mw-cuerpo:active { cursor: grabbing; }
.mac-win .mw-cuerpo:focus-visible { outline: 2px solid #000; outline-offset: -3px; }
.mac-win .mw-cuerpo img { display: block; width: var(--zoom, 260%); max-width: none; height: auto; pointer-events: none; -webkit-user-drag: none; }
.mac-win .mw-huevo { /* aparece al llegar al final del scroll */
  position: absolute; left: 0; bottom: 0; width: var(--zoom, 260%); padding: 10px 12px; box-sizing: border-box;
  font: 700 11px/1.3 Charcoal, Geneva, Helvetica, Arial, sans-serif; color: #000; background: rgba(255, 255, 255, .86);
  border-top: 1px solid #000;
}

/* Barras de scroll Platinum (Chrome, Safari, Edge) */
.mac-win .mw-cuerpo::-webkit-scrollbar { width: 16px; height: 16px; }
.mac-win .mw-cuerpo::-webkit-scrollbar-track {
  background: var(--pl-3); box-shadow: inset 1px 1px 0 var(--pl-4), inset -1px -1px 0 var(--pl-1);
}
.mac-win .mw-cuerpo::-webkit-scrollbar-thumb {
  border: 1px solid #000; background-color: var(--pl-azul);
  box-shadow: inset 1px 1px 0 #eeeeff, inset -1px -1px 0 var(--pl-azul-o);
  background-image: repeating-linear-gradient(var(--dir, 90deg), transparent 0 2px, var(--pl-azul-o) 2px 3px, #fff 3px 4px);
  background-size: 9px 9px; background-repeat: no-repeat; background-position: center;
}
.mac-win .mw-cuerpo::-webkit-scrollbar-thumb:vertical { --dir: 0deg; }
.mac-win .mw-cuerpo::-webkit-scrollbar-button { display: block; width: 16px; height: 16px; background-color: var(--pl-2); border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--pl-4); background-repeat: no-repeat; background-position: center; }
.mac-win .mw-cuerpo::-webkit-scrollbar-button:active { background-color: var(--pl-4); }
.mac-win .mw-cuerpo::-webkit-scrollbar-button:vertical:start:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3.5 0 7 4H0z'/%3E%3C/svg%3E"); }
.mac-win .mw-cuerpo::-webkit-scrollbar-button:vertical:end:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z'/%3E%3C/svg%3E"); }
.mac-win .mw-cuerpo::-webkit-scrollbar-button:horizontal:start:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 3.5 4 0v7z'/%3E%3C/svg%3E"); }
.mac-win .mw-cuerpo::-webkit-scrollbar-button:horizontal:end:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0l4 3.5L0 7z'/%3E%3C/svg%3E"); }
.mac-win .mw-cuerpo::-webkit-scrollbar-button:vertical:start:increment,
.mac-win .mw-cuerpo::-webkit-scrollbar-button:vertical:end:decrement,
.mac-win .mw-cuerpo::-webkit-scrollbar-button:horizontal:start:increment,
.mac-win .mw-cuerpo::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
.mac-win .mw-cuerpo::-webkit-scrollbar-corner { /* tirador de redimensionar */
  background: var(--pl-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg stroke='%23555'%3E%3Cpath d='M11 3 3 11M11 6 6 11M11 9 9 11'/%3E%3C/g%3E%3Cg stroke='%23fff'%3E%3Cpath d='M11 4 4 11M11 7 7 11'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
  border: 1px solid #000;
}

/* Estados: plegada (solo barra) y cerrada */
.mac-win.plegada .mw-cuerpo { display: none; }
.mac-win.plegada { height: auto !important; aspect-ratio: auto !important; }
.mac-win.cerrada { --s: .2; opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.5, 0, .7, .4), opacity .25s; }
.mac-win { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); transition: transform .25s cubic-bezier(.2, .8, .3, 1), opacity .25s; }
.mac-win.arrastrando { transition: none; z-index: 40; }
.mac-win .mw-bar { cursor: grab; touch-action: none; }
.mac-win.arrastrando .mw-bar { cursor: grabbing; }
.mac-win.zoom { --s: 1.45; z-index: 30; }

/* Filtros por foto, para que conserven el clima de las originales */
.mac-win[data-tono="rosa"] img { filter: sepia(.35) hue-rotate(-18deg) saturate(1.2) contrast(1.05); }
.mac-win[data-tono="crema"] img { filter: sepia(.45) saturate(.9) brightness(1.05); }
.mac-win[data-tono="gris"] img, #secServices .mac-win img { filter: grayscale(1) contrast(1.1); }

@media (prefers-reduced-motion: reduce) { .mac-win, .mac-win.cerrada { transition: none; } }

.cr-media .mac-win img { image-rendering: auto; }
#idimginicio.mac-win, #idimgclients.mac-win { height: auto; }

/* el alto lo define la proporción, no la foto */
.mac-win { min-height: 0; overflow: hidden; }
.mac-win .mw-cuerpo { flex: 1 1 0; min-height: 0; }
.mac-win, #idimginicio.mac-win, #idimgclients.mac-win { display: flex !important; }

/* posiciones originales + desplazamiento al arrastrar + zoom */
#idimginicio.mac-win { transform: translate(-50%, 15%) translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); }
#idimgclients.mac-win { transform: translate(17%, -94%) translate(var(--dx, 0px), var(--dy, 0px)) scale(var(--s, 1)); width: 34%; min-width: 230px; max-width: 300px; }
/* el texto oculto queda al final de la foto */
.mac-win .mw-huevo { position: static; margin: 0; }
@media (max-width: 768px) { #idimgclients.mac-win { min-width: 170px; } }