/* EL AXEL 4.1 · CSS standalone */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== UNIFICACIÓN EXACTA CON SOLITARIO ===== */
.xp-menubar,
.notepad-menu,
.paint98-menubar,
.wmp9-menubar,
.minesweeper-menubar,
.solitaire-menubar {
  box-sizing:border-box !important;
  min-height:27px !important;
  height:27px !important;
  padding:1px 5px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  font-family:Tahoma,sans-serif !important;
  font-size:12px !important;
  line-height:20px !important;
}
.xp-menubar > *,
.notepad-menu > *,
.paint98-menubar > *,
.wmp9-menubar > *,
.minesweeper-menubar button,
.solitaire-menubar button {
  box-sizing:border-box !important;
  margin:0 !important;
  font-family:Tahoma,sans-serif !important;
  font-size:12px !important;
  line-height:20px !important;
}
.xp-menu-word,
.notepad-menu > span,
.paint98-menu-trigger,
.wmp9-menubar > span,
.minesweeper-menubar button,
.solitaire-menubar button {
  padding:3px 7px !important;
  color:#111 !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transition:background-color .08s ease, box-shadow .08s ease, transform .08s ease !important;
}
.xp-menu-word:hover,
.notepad-menu > span:hover,
.paint98-menu-trigger:hover,
.wmp9-menubar > span:hover,
.minesweeper-menubar button:hover,
.solitaire-menubar button:hover,
.xp-menu-word:focus-visible,
.notepad-menu > span:focus-visible,
.paint98-menu-trigger:focus-visible,
.wmp9-menubar > span:focus-visible {
  color:#111 !important;
  background:#ece9d8 !important;
  border-color:transparent !important;
}
.xp-menu-word:active,
.notepad-menu > span:active,
.paint98-menu-trigger:active,
.wmp9-menubar > span:active,
.minesweeper-menubar button:active,
.solitaire-menubar button:active {
  color:#111 !important;
  background:#c8c6b8 !important;
  border-color:#77756b !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.38), inset -1px -1px rgba(255,255,255,.45) !important;
  transform:translate(1px,1px) !important;
}


/* ===== SISTEMA COMÚN · menús retro y tipografía de contenido ===== */
.xp-menubar,
.notepad-menu,
.paint98-menubar,
.wmp9-menubar,
.minesweeper-menubar,
.solitaire-menubar{
  box-sizing:border-box;
  min-height:30px;
  padding:4px 8px !important;
  margin:0 !important;
  background:#f0efe5 !important;
  border-bottom:1px solid #c8c6b8 !important;
  color:#111 !important;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif !important;
  font-size:14px !important;
  line-height:20px !important;
  text-align:left !important;
}
.xp-menubar > *,
.notepad-menu > *,
.paint98-menubar > *,
.wmp9-menubar > *,
.minesweeper-menubar button,
.solitaire-menubar button{
  font:inherit !important;
  color:inherit !important;
}
.minesweeper-menubar button,
.solitaire-menubar button,
.xp-toolbar button,
.paint-toolbar button{
  border:1px solid #aaa99c !important;
  border-radius:2px !important;
  background:#e9e8dc !important;
  box-shadow:inset 1px 1px rgba(255,255,255,.85) !important;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif !important;
  font-size:14px !important;
  line-height:20px !important;
}
@media (max-width:768px){
  .xp-menubar,
  .notepad-menu,
  .paint98-menubar,
  .wmp9-menubar,
  .minesweeper-menubar,
  .solitaire-menubar,
  .minesweeper-menubar button,
  .solitaire-menubar button,
  .xp-toolbar button,
  .paint-toolbar button{
    font-size:12px !important;
    line-height:18px !important;
  }
  #win-sobre-mi .about-body,
  #win-testimonios .faq-body{
    font-family:'Segoe UI',Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    line-height:1.4 !important;
    text-align:left !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  #win-sobre-mi .about-body h1,
  #win-sobre-mi .about-body h2,
  #win-testimonios .faq-body h1,
  #win-testimonios .faq-body h2{ font-size:22px !important; line-height:1.2 !important; }
  #win-sobre-mi .about-body h3,
  #win-testimonios .faq-body h3{ font-size:18px !important; line-height:1.25 !important; }
  #win-sobre-mi .about-body p,
  #win-testimonios .faq-body p{ margin:0 0 .8em !important; }
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Tahoma", "Segoe UI", "Verdana", sans-serif;
  margin: 0;
  padding: 0;
  background: #577bd3;
}

.desktop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: #577bd3 url("../img/fondo-xp-desktop.webp") no-repeat center center;
  background-size: cover;
  background-attachment: scroll;
  margin: 0 !important;
  padding: 6px 6px 48px 6px;
  overflow: hidden;
}

@media (max-width: 767px) and (orientation: portrait) {
  .desktop {
    background-image: url("../img/fondo-xp-mobile.webp");
    background-position: center center;
  }
}

.desktop-icons {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: calc(100% - 10px);
  align-content: flex-start;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.7);
  cursor: pointer;
  transition: background 0.1s;
}

.desktop-icon:hover {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
}

.desktop-icon span {
  line-height: 1.2;
  word-break: break-word;
}

.window {
  position: absolute;
  min-width: 200px;
  min-height: 100px;
  max-width: 92vw;
  max-height: 75vh;
  background: #ece9d8;
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
}

.window.minimized {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  width: 0 !important;
  height: 0 !important;
  min-width: 0;
  min-height: 0;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.window.maximized {
  width: calc(100vw - 12px) !important;
  height: calc(100vh - 58px) !important;
  top: 6px !important;
  left: 6px !important;
  border-radius: 0;
  max-width: 100vw;
  max-height: 100vh;
}

.window-header {
  background: linear-gradient(90deg, #0054e3, #2a7aff);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  cursor: grab;
  flex-shrink: 0;
}

.window-header:active {
  cursor: grabbing;
}

.window-header .title {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-controls {
  display: flex;
  flex-shrink: 0;
}

.window-controls button {
  border-color: #f5f3ed #0a0a0a #0a0a0a #f5f3ed;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.window-controls button:hover {
  background: #e8e4da;
}

.window-controls .btn-close {
  color: #fff;
}

.window-controls .btn-close:hover {
  background: #f05a4a;
}

.window-body {
  padding: 8px 12px;
  background: #ece9d8;
  flex: 1;
  overflow-y: auto;
  border: 2px solid;
  border-top: 0;
  font-size: 0.8rem;
  color: #1e1e1e;
  -webkit-overflow-scrolling: touch;
}

.window-body h2 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: #003399;
}

.window-body p {
  margin-bottom: 4px;
  line-height: 1.4;
}





















.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  touch-action: none;
}

.modal-overlay.active {
  display: flex;
}

.modal-window {
  background: #ece9d8;
  border: 3px solid #0054e3;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  padding: 20px 24px 16px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  position: relative;
}

.modal-window h2 {
  font-size: 1.4rem;
  color: #c04020;
  margin-bottom: 4px;
}

.modal-window p {
  font-size: 0.85rem;
  color: #1e1e1e;
  margin-bottom: 14px;
}







.modal-window .close-modal {
  position: absolute;
  top: 4px;
  right: 8px;
  background: #e04a3a;
  color: #fff;
  border: 2px solid #f06a5a;
  border-color: #f06a5a #801a0a #801a0a #f06a5a;
  width: 24px;
  height: 24px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.7rem;
  touch-action: manipulation;
}

.modal-window .close-modal:hover {
  background: #f05a4a;
}

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.taskbar .start-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border-color: #6bcb6b #1a4a1a #1a4a1a #6bcb6b;
  cursor: pointer;
  font-weight: bold;
  color: #fff;
  font-size: 0.75rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  flex-shrink: 0;
  touch-action: manipulation;
}

.taskbar .start-btn:active {
  border-color: #1a4a1a #6bcb6b #6bcb6b #1a4a1a;
}

.taskbar .start-btn .logo {
  font-size: 1rem;
}

.taskbar .task-items {
  display: flex;
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.taskbar .task-item {
  border-color: #4a8aba #0a2a4a #0a2a4a #4a8aba;
  color: #fff;
  font-size: 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  touch-action: manipulation;
}

.taskbar .task-item.active {
  border-color: #6aaaca #0a2a4a #0a2a4a #6aaaca;
}

.taskbar .task-item:hover {
  background: #2a5a8a;
}

.taskbar .clock {
  border-color: #0a0a0a #4a6a8a #4a6a8a #0a0a0a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: bold;
  font-family: "Tahoma", monospace;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.start-menu {
  position: fixed;
  border-color: #f5f3ed #0a0a0a #0a0a0a #f5f3ed;
  display: none;
  z-index: 10000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.start-menu.open {
  display: block;
}

.start-menu .menu-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1e1e1e;
  font-size: 0.75rem;
  border-bottom: 1px solid #d4d0c8;
  touch-action: manipulation;
}

.start-menu .menu-item .icon {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.start-menu .menu-title {
  padding: 4px 12px 2px;
  font-size: 0.6rem;
  color: #666;
  font-weight: bold;
  letter-spacing: 0.5px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #d4d0c8;
}

::-webkit-scrollbar-thumb {
  background: #b0a898;
  border: 2px solid #f5f3ed;
  border-color: #f5f3ed #808080 #808080 #f5f3ed;
}

::-webkit-scrollbar-button {
  background: #c0b8a8;
  border: 2px solid #f5f3ed;
  height: 12px;
}

@media (max-width: 768px) {
  .desktop {
    padding: 4px 4px 44px 4px;
  }

  .window {
    min-width: 160px;
    min-height: 70px;
    max-width: 96vw;
    max-height: 70vh;
  }

  .window-header {
    height: 24px;
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  .window-header .title {
    font-size: 0.6rem;
  }

  .window-controls button {
    width: 18px;
    height: 18px;
    font-size: 0.5rem;
  }

  .window-body {
    padding: 6px 8px;
    font-size: 0.7rem;
  }

  .window-body h2 {
    font-size: 0.9rem;
  }

  .desktop-icon {
    width: 48px;
    font-size: 0.5rem;
  }

  .desktop-icon .icon-img {
    font-size: 1.4rem;
  }

  .taskbar {
    height: 38px;
    padding: 0 2px;
  }

  .taskbar .start-btn {
    height: 26px;
    font-size: 0.65rem;
    padding: 0 8px;
  }

  .taskbar .start-btn .logo {
    font-size: 0.9rem;
  }

  .taskbar .task-item {
    height: 22px;
    font-size: 0.55rem;
    padding: 0 8px;
  }

  .taskbar .clock {
    height: 22px;
    font-size: 0.55rem;
    padding: 0 6px;
  }

  .start-menu {
    width: 180px;
    bottom: 42px;
    left: 2px;
  }

  .start-menu .menu-item {
    font-size: 0.65rem;
    padding: 4px 8px;
  }

  .start-menu .menu-item .icon {
    font-size: 0.9rem;
    width: 20px;
  }

  

  

  

  .modal-window {
    padding: 16px 18px 14px;
    max-width: 280px;
  }

  .modal-window h2 {
    font-size: 1.2rem;
  }

  .modal-window p {
    font-size: 0.75rem;
  }

  
}

@media (max-width: 480px) {
  .desktop {
    padding: 2px 2px 40px 2px;
  }

  .window {
    min-width: 120px;
    min-height: 50px;
    max-width: 98vw;
    max-height: 65vh;
  }

  .window-header {
    height: 22px;
    font-size: 0.5rem;
    padding: 1px 4px;
  }

  .window-header .title {
    font-size: 0.5rem;
  }

  .window-controls button {
    width: 16px;
    height: 16px;
    font-size: 0.4rem;
  }

  .window-body {
    padding: 4px 6px;
    font-size: 0.6rem;
  }

  .window-body h2 {
    font-size: 0.8rem;
  }

  .desktop-icon {
    width: 40px;
    font-size: 0.45rem;
  }

  .desktop-icon .icon-img {
    font-size: 1.2rem;
  }

  .taskbar {
    height: 34px;
    padding: 0 2px;
  }

  .taskbar .start-btn {
    height: 22px;
    font-size: 0.55rem;
    padding: 0 6px;
  }

  .taskbar .start-btn .logo {
    font-size: 0.8rem;
  }

  .taskbar .task-item {
    display: none;
  }

  .taskbar .clock {
    height: 20px;
    font-size: 0.5rem;
    padding: 0 4px;
  }

  .start-menu {
    width: 150px;
    bottom: 38px;
    left: 2px;
  }

  .start-menu .menu-item {
    font-size: 0.55rem;
    padding: 3px 6px;
  }

  .start-menu .menu-item .icon {
    font-size: 0.8rem;
    width: 18px;
  }

  

  

  

  .modal-window {
    padding: 12px 14px 10px;
    max-width: 240px;
  }

  .modal-window h2 {
    font-size: 1rem;
  }

  .modal-window p {
    font-size: 0.65rem;
  }

  
}





























































































































































































:root {
  --xp-blue-dark: #003399;
  --xp-blue: #0058e6;
  --xp-blue-light: #3c8cf3;
  --xp-taskbar: #245edb;
  --xp-taskbar-dark: #1941a5;
  --xp-green: #3c9d3c;
  --xp-panel: #ece9d8;
  --xp-border-light: #fff;
  --xp-border-mid: #aca899;
  --xp-border-dark: #716f64;
}

.xp-welcome {
  position: fixed;
  inset: 0;
  z-index: 250000;
  display: grid;
  grid-template-rows: 12% 1fr 12%;
  background: #577bd3;
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 110ms ease, visibility 110ms ease;
  cursor: wait;
}

.xp-welcome.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.xp-welcome-band {
  background: linear-gradient(90deg, #0039a6, #074cc2 50%, #0039a6);
  box-shadow: inset 0 -1px rgba(255,255,255,.28), inset 0 1px rgba(0,0,0,.18);
}

.xp-welcome-band:last-child {
  box-shadow: inset 0 1px rgba(255,255,255,.28), inset 0 -1px rgba(0,0,0,.18);
}

.xp-welcome-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px;
  background: radial-gradient(circle at 18% 24%, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(100deg, #4d73cc, #6488dc 52%, #4f74ca);
}

.xp-welcome-logo {
  width: 62px;
  height: 62px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  transform: skewY(-5deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}

.xp-welcome-logo i:nth-child(1) {
  background: #f35325;
}

.xp-welcome-logo i:nth-child(2) {
  background: #81bc06;
}

.xp-welcome-logo i:nth-child(3) {
  background: #05a6f0;
}

.xp-welcome-logo i:nth-child(4) {
  background: #ffba08;
}

.xp-welcome-copy {
  text-align: left;
}

.xp-welcome-copy strong {
  display: block;
  font-size: clamp(1.35rem, 5vw, 2.35rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.04em;
  text-shadow: 0 2px 2px rgba(0,0,0,.32);
}

.xp-welcome-copy span {
  display: block;
  margin-top: 5px;
  font-size: clamp(.68rem, 2.4vw, .95rem);
  opacity: .93;
}

.desktop-icons {
  gap: 7px 13px;
  padding: 8px 5px;
}

.desktop-icon {
  width: 72px;
  min-height: 67px;
  padding: 3px 2px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.12;
  outline: none;
}

.desktop-icon:hover,
    .desktop-icon.selected {
  background: rgba(49,106,197,.48);
  border-color: rgba(255,255,255,.58);
}

.desktop-icon:focus-visible {
  background: rgba(49,106,197,.55);
  border-color: #fff;
}

.desktop-icon .icon-img {
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  display: grid;
  place-items: center;
  font-size: 0;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.42));
}

.desktop-icon .icon-img svg,
    .desktop-icon .icon-img img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.desktop-icon > span:last-child {
  padding: 1px 2px;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px rgba(0,0,0,.35);
}

.desktop-icon.selected > span:last-child {
  background: #316ac5;
}

.window {
  border: 3px solid var(--xp-blue);
  border-top-color: #2b7bf0;
  border-left-color: #2b7bf0;
  border-right-color: #003ca6;
  border-bottom-color: #003ca6;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 2px 3px 12px rgba(0,0,0,.45);
  transition: opacity .12s ease, transform .12s ease;
  touch-action: auto;
}

.window.active-window .window-header {
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0, rgba(255,255,255,0) 20%),
        linear-gradient(90deg, #0054e3 0, #1686f1 52%, #0055d7 100%);
}

.window:not(.active-window) .window-header {
  background: linear-gradient(90deg, #7a96df, #9db6e9 55%, #7894da);
  color: #eaf1ff;
}

.window-header {
  height: 29px;
  padding: 3px 4px 4px 6px;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #003aa0;
  font-size: 12px;
  touch-action: none;
}

.window-header .title {
  gap: 5px;
  font-size: 12px;
  text-shadow: 1px 1px #0b3488;
}

.title-icon,
    .menu-icon,
    .task-icon,
    .quick-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.title-icon,
    .title-icon svg,
    .title-icon img {
  width: 18px;
  height: 18px;
}

.menu-icon,
    .menu-icon svg,
    .menu-icon img {
  width: 30px;
  height: 30px;
}

.task-icon,
    .task-icon svg,
    .task-icon img,
    .quick-icon,
    .quick-icon svg,
    .quick-icon img {
  width: 17px;
  height: 17px;
}

.window-controls {
  gap: 2px;
}

.window-controls button {
  width: 22px;
  height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 36%),
        linear-gradient(#4289e9, #0d56c5);
  box-shadow: inset 0 0 0 1px #174ea6, 1px 1px 1px rgba(0,0,0,.4);
  font: bold 12px/1 Tahoma, sans-serif;
  text-shadow: 1px 1px #17417f;
}

.window-controls .btn-close {
  width: 23px;
  background: linear-gradient(135deg, rgba(255,255,255,.62), transparent 34%),
        linear-gradient(#ed6b52, #c52d18);
  border-color: #fff;
  box-shadow: inset 0 0 0 1px #9b1d0e, 1px 1px 1px rgba(0,0,0,.42);
}

.window-controls button:active {
  filter: brightness(.86);
  transform: translateY(1px);
}

.window-body {
  touch-action: pan-y;
  border-width: 1px;
  border-color: #fff var(--xp-border-dark) var(--xp-border-dark) #fff;
  border-radius: 0;
}

#win-mi-pc.initial-window {
  min-width: 540px;
  min-height: 360px;
  max-width: 94vw;
  max-height: 78vh;
}

.explorer-body {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.xp-menubar {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 25px;
  padding: 1px 5px;
  background: var(--xp-panel);
  border-bottom: 1px solid var(--xp-border-mid);
  flex: 0 0 auto;
}

.xp-menu-word {
  padding: 4px 7px;
  font-size: 11px;
  color: #111;
  cursor: default;
}

.xp-menu-word:hover {
  background: #316ac5;
  color: #fff;
}

.xp-toolbar {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  background: linear-gradient(#f8f7f2, #ece9d8);
  border-bottom: 1px solid #b8b4a7;
  flex: 0 0 auto;
}

.xp-tool-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 31px;
  padding: 2px 7px;
  border: 1px solid transparent;
  background: transparent;
  font: 11px Tahoma, sans-serif;
  color: #111;
  cursor: pointer;
}

.xp-tool-button:hover {
  border-color: #316ac5;
  background: #fff;
}

.xp-tool-button b {
  font-size: 20px;
  color: #4c72af;
}

.xp-toolbar-separator {
  height: 29px;
  border-left: 1px solid #aca899;
  border-right: 1px solid #fff;
}

.xp-addressbar {
  min-height: 27px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 5px;
  background: var(--xp-panel);
  border-bottom: 1px solid #aca899;
  font-size: 11px;
  flex: 0 0 auto;
}

.xp-address-input {
  height: 21px;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 5px;
  background: #fff;
  border: 1px solid #7f9db9;
  color: #111;
  overflow: hidden;
  white-space: nowrap;
}

.xp-address-go {
  height: 22px;
  padding: 0 7px;
  background: var(--xp-panel);
  border: 2px solid;
  border-color: #fff #716f64 #716f64 #fff;
  font: 11px Tahoma, sans-serif;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.xp-address-go:hover,
    .xp-address-go:focus,
    .xp-address-go:active {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.explorer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  background: #fff;
}

.xp-task-pane {
  padding: 10px;
  background: linear-gradient(100deg, #748ad6, #6379c5);
}

.xp-side-box {
  margin-bottom: 11px;
  border-radius: 5px 5px 3px 3px;
  overflow: hidden;
  background: #d6dff7;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.xp-side-title {
  padding: 7px 9px;
  background: linear-gradient(90deg,#fff,#c8d3f2);
  color: #17479e;
  font-size: 11px;
  font-weight: bold;
}

.xp-side-links {
  padding: 7px 9px 8px;
}

.xp-side-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0;
  color: #164aa5;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
}

.xp-side-link:hover {
  text-decoration: underline;
}

.xp-main-pane {
  padding: 16px 18px 22px;
  min-width: 0;
}

.xp-main-pane h1 {
  color: #215dc6;
  font: normal 24px "Trebuchet MS", Tahoma, sans-serif;
  margin: 0 0 3px;
}

.xp-lead {
  color: #4c4c4c;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.xp-section-title {
  margin: 13px 0 7px;
  padding-bottom: 4px;
  color: #215dc6;
  font-size: 13px;
  border-bottom: 1px solid #d6dff7;
}

.service-folders {
  display: grid;
  grid-template-columns: repeat(2,minmax(170px,1fr));
  gap: 7px 12px;
}

.service-folder {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px;
  border: 1px solid transparent;
  color: #111;
  text-decoration: none;
  cursor: pointer;
}

.service-folder:hover {
  background: #e9f0ff;
  border-color: #b9cdf5;
}

.service-folder svg {
  width: 38px;
  height: 38px;
}

.service-folder strong {
  display: block;
  color: #164aa5;
  font-size: 12px;
  margin-bottom: 2px;
}

.service-folder small {
  display: block;
  color: #555;
  font-size: 10px;
  line-height: 1.35;
}

.xp-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 12px;
  background: linear-gradient(#fffde7,#fff3b4);
  border: 1px solid #e4c04a;
}

.xp-cta-box strong {
  color: #17479e;
  font-size: 13px;
}

.xp-cta-box p {
  margin: 2px 0 0;
  font-size: 11px;
}

.xp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 12px;
  color: #111;
  background: linear-gradient(#fff,#e6e2d4);
  border: 2px solid;
  border-color: #fff #716f64 #716f64 #fff;
  box-shadow: 0 0 0 1px #003c74;
  font: bold 11px Tahoma,sans-serif;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.xp-button:active {
  border-color: #716f64 #fff #fff #716f64;
  transform: translateY(1px);
}

.xp-button.primary {
  color: #fff;
  background: linear-gradient(#55b85b,#2c8731);
  box-shadow: 0 0 0 1px #1b5d20;
}

.taskbar {
  height: 40px;
  padding: 2px 5px calc(2px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0, rgba(255,255,255,0) 16%),
        linear-gradient(180deg,#3168df 0,#245edb 46%,#1941a5 100%);
  border-top: 1px solid #5fa5f8;
  box-shadow: inset 0 1px #1f50c3;
  gap: 3px;
}

.taskbar .start-btn {
  align-self: stretch;
  height: auto;
  min-width: 100px;
  margin: -2px 1px -2px -5px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 0 13px 13px 0;
  background: linear-gradient(180deg,rgba(255,255,255,.45),transparent 18%),
        linear-gradient(180deg,#56b95c,#3c9d3c 48%,#217526);
  box-shadow: inset -2px 0 2px rgba(0,0,0,.25), 2px 0 3px rgba(0,0,0,.2);
  font: bold italic 15px "Trebuchet MS",Tahoma,sans-serif;
}

.taskbar .start-btn:hover {
  background: linear-gradient(#71cb72,#319038);
}

.taskbar .start-btn:active,
    .taskbar .start-btn.open {
  filter: brightness(.88);
}

.start-logo {
  width: 24px;
  height: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  transform: skewY(-6deg);
  filter: drop-shadow(1px 1px rgba(0,0,0,.42));
}

.start-logo i:nth-child(1) {
  background: #f35325;
}

.start-logo i:nth-child(2) {
  background: #81bc06;
}

.start-logo i:nth-child(3) {
  background: #05a6f0;
}

.start-logo i:nth-child(4) {
  background: #ffba08;
}

.quick-launch {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px 0 3px;
  border-right: 1px solid rgba(15,56,143,.8);
  box-shadow: 1px 0 rgba(255,255,255,.22);
}

.quick-launch button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  padding: 3px;
  cursor: pointer;
}

.quick-launch button:hover {
  border-color: #8db7f5;
  background: rgba(255,255,255,.18);
}

.taskbar .task-items {
  gap: 3px;
  padding: 0 2px;
}

.taskbar .task-item {
  width: min(172px,22vw);
  min-width: 72px;
  height: 29px;
  padding: 0 8px;
  background: linear-gradient(#3982f3,#245dcc);
  border: 1px solid #123f9b;
  border-radius: 2px;
  box-shadow: inset 1px 1px rgba(255,255,255,.25);
  font: 11px Tahoma,sans-serif;
  overflow: hidden;
}

.taskbar .task-item.active {
  background: #1e52b7;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,.35);
}

.task-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-tray {
  height: 36px;
  margin: -1px -4px -1px 0;
  padding: 0 7px 0 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(180deg,#19a8ee,#0e8ad0 55%,#0b76bd);
  border-left: 1px solid #0a68aa;
  box-shadow: inset 1px 0 rgba(255,255,255,.4);
  color: #fff;
  flex: 0 0 auto;
}

.tray-chevron {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1d75c6;
  border: 1px solid rgba(255,255,255,.6);
  font-size: 12px;
}

.tray-icon {
  font-size: 14px;
  filter: drop-shadow(1px 1px rgba(0,0,0,.3));
}

.taskbar .clock {
  height: auto;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 11px Tahoma,sans-serif;
  box-shadow: none;
  white-space: pre-line;
  text-align: center;
  line-height: 1.25;
}

.start-menu {
  bottom: 40px;
  left: 0;
  width: 410px;
  max-width: calc(100vw - 8px);
  max-height: min(650px,calc(100dvh - 44px));
  padding: 0;
  overflow: hidden;
  border: 2px solid #1f54b5;
  border-radius: 7px 7px 0 0;
  background: #fff;
  box-shadow: 3px 4px 12px rgba(0,0,0,.5);
}

.start-menu-header {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  color: #fff;
  background: linear-gradient(180deg,rgba(255,255,255,.32),transparent 25%),
        linear-gradient(90deg,#1458c5,#2b7de9);
  border-bottom: 2px solid #e18a2b;
}

.start-avatar {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: linear-gradient(#fff,#d5e4ff);
  color: #1458c5;
  font: bold 28px "Trebuchet MS";
  box-shadow: 1px 2px 3px rgba(0,0,0,.35);
}

.start-user {
  font: bold 18px "Trebuchet MS",Tahoma,sans-serif;
  text-shadow: 1px 1px #17428d;
}

.start-menu-columns {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  min-height: 355px;
  max-height: calc(100dvh - 154px);
  overflow-y: auto;
}

.start-left {
  padding: 7px 5px;
  background: #fff;
}

.start-right {
  padding: 7px 5px;
  background: #d3e5fa;
  border-left: 1px solid #a8c5e8;
}

.start-menu .menu-item {
  min-height: 42px;
  gap: 8px;
  padding: 5px 7px;
  border: 0;
  border-radius: 2px;
  font: 11px Tahoma,sans-serif;
}

.start-menu .menu-item:hover {
  background: #316ac5;
  color: #fff;
}

.start-menu .menu-item strong {
  display: block;
  font-size: 12px;
}

.start-menu .menu-item small {
  display: block;
  font-size: 10px;
  color: #666;
  margin-top: 1px;
}

.start-menu .menu-item:hover small {
  color: #fff;
}

.start-right .menu-item {
  min-height: 34px;
  font-weight: bold;
}

.start-right .menu-icon,.start-right .menu-icon svg,.start-right .menu-icon img {
  width: 24px;
  height: 24px;
}

.start-menu .menu-divider {
  margin: 4px 7px;
  border-top: 1px solid #aca899;
  border-bottom: 1px solid #fff;
}

.all-programs {
  padding: 7px 10px 5px;
  text-align: right;
  color: #111;
  font: bold 11px Tahoma,sans-serif;
  border-top: 1px solid #e4e4e4;
}

.all-programs span {
  color: #fff;
  background: #3a9b43;
  border-radius: 50%;
  padding: 1px 4px;
  margin-left: 5px;
}

.start-menu-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(#2b7de9,#1458c5);
  border-top: 1px solid #0a4bad;
}

.start-footer-button {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 11px Tahoma,sans-serif;
  cursor: pointer;
}

.start-footer-button i {
  display: grid;
  place-items: center;
  background: #e88a2b;
  font-style: normal;
}

.start-footer-button.shutdown i {
  background: #e64c3c;
}

#win-winamp {
  background: #262a33;
  border-color: #727987 #08090b #08090b #727987;
  box-shadow: 4px 5px 14px rgba(0,0,0,.48);
}

#win-winamp .window-header {
  background: linear-gradient(90deg,#242b3d,#5c6370 42%,#252b38);
  border-color: #0b0d11;
}

.winamp-body {
  padding: 4px;
  background: #171a20;
  color: #aaff00;
  border-color: #707783 #08090b #08090b #707783;
  overflow: auto;
  touch-action: manipulation;
  scrollbar-color: #6b7280 #11141a;
}

.winamp-chassis,.winamp-equalizer,.winamp-playlist-panel {
  position: relative;
  margin-bottom: 4px;
  padding: 5px;
  background: linear-gradient(135deg,rgba(255,255,255,.08),transparent 26%),
        linear-gradient(#4c5360,#282d36 42%,#20242b);
  border: 2px solid;
  border-color: #747b88 #0a0b0e #0a0b0e #747b88;
  box-shadow: inset 1px 1px 0 #242833;
}

.winamp-topline,.winamp-panel-title {
  height: 17px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -1px -1px 5px;
  padding: 0 4px;
  overflow: hidden;
  color: #d9e1ed;
  background: linear-gradient(#202738,#101521);
  border: 1px solid #07090d;
  font: 900 9px/1 Tahoma,Arial,sans-serif;
  letter-spacing: .5px;
  text-shadow: 1px 1px #000;
}

.winamp-topline strong {
  color: #f1f4fb;
  letter-spacing: 1.2px;
}

.winamp-topline small {
  color: #a5b2c5;
  font-size: 7px;
}

.winamp-ridges {
  height: 6px;
  flex: 1;
  opacity: .65;
  background: repeating-linear-gradient(to bottom,#9299a3 0 1px,#252a33 1px 3px);
}

.winamp-led {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: #78da00;
  box-shadow: 0 0 4px #80ff00;
}

.winamp-screen {
  display: grid;
  grid-template-columns: 101px minmax(0,1fr);
  gap: 6px;
  min-height: 75px;
  padding: 6px;
  background: #030604;
  border: 2px solid;
  border-color: #050505 #80858c #80858c #050505;
  font-family: "Courier New",monospace;
  box-shadow: inset 0 0 10px #000;
}

.winamp-left-display {
  min-width: 0;
}

.winamp-time {
  color: #aaff00;
  font: bold 27px/1 "Courier New",monospace;
  letter-spacing: -3px;
  text-shadow: 0 0 6px #62ad00;
  white-space: nowrap;
}

.winamp-meta {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 1px 4px;
  margin-top: 5px;
  color: #78c900;
  font: bold 7px/1.25 Tahoma,sans-serif;
}

.winamp-state {
  grid-row: 1 / span 2;
  color: #c8ff67;
  font-size: 14px;
  line-height: 18px;
}

.winamp-display {
  min-width: 0;
  overflow: hidden;
}

.winamp-marquee {
  height: 15px;
  overflow: hidden;
  white-space: nowrap;
  color: #b6ff2b;
  font: bold 9px/15px "Courier New",monospace;
  border-bottom: 1px solid #15250d;
}

.winamp-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: winampScroll 13s linear infinite;
}

@keyframes winampScroll {
  to {
    transform: translateX(-100%);
  }
}

#winampVisualizer {
  display: block;
  width: 100%;
  height: 47px;
  background: #020402;
  image-rendering: pixelated;
}

.winamp-seek-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 1px 2px;
  color: #d1d6df;
  font: 8px Tahoma,sans-serif;
}

.winamp-seek-row input {
  flex: 1;
  min-width: 0;
  accent-color: #8ed400;
}

.winamp-sliders {
  display: grid;
  grid-template-columns: 22px 1fr 22px 72px;
  align-items: center;
  gap: 4px;
  padding: 2px 1px 4px;
  color: #d7dbe2;
  font: 900 8px Tahoma,sans-serif;
}

.winamp-sliders input {
  width: 100%;
  min-width: 0;
  accent-color: #9adb00;
}

.winamp-controls-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.winamp-controls {
  display: flex;
  gap: 2px;
  flex: 1;
}

.winamp-controls button,.winamp-mini-button {
  min-width: 31px;
  height: 24px;
  padding: 0 5px;
  background: linear-gradient(#8b919b,#4c525c 52%,#333841);
  color: #0b0d10;
  border: 2px solid;
  border-color: #aeb3bc #17191d #17191d #aeb3bc;
  font: 900 11px Arial,sans-serif;
  text-shadow: 0 1px rgba(255,255,255,.35);
  cursor: pointer;
}

.winamp-controls button:active,.winamp-mini-button:active,.winamp-mini-button.active {
  border-color: #17191d #aeb3bc #aeb3bc #17191d;
  background: #424852;
  color: #cfff78;
}

.winamp-controls button.active {
  color: #baff3f;
  border-color: #17191d #aeb3bc #aeb3bc #17191d;
}

#winampPlay {
  min-width: 43px;
  height: 29px;
  margin: -3px 2px -2px;
  position: relative;
  z-index: 2;
  font-size: 16px;
  color: #172400;
  background: linear-gradient(#caff61 0%,#90d426 48%,#5a9d09 100%);
  border-color: #eaffad #244400 #244400 #eaffad;
  text-shadow: 0 1px rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px #111,0 0 8px rgba(159,235,51,.72),inset 0 1px rgba(255,255,255,.6);
  transform: translateY(-1px);
}

#winampPlay:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px #111,0 0 13px rgba(184,255,75,.9),inset 0 1px rgba(255,255,255,.65);
}

#winampPlay:active,
    #winampPlay.active {
  transform: translateY(1px);
  color: #dfff9a;
  background: linear-gradient(#477d0d,#284f04);
  border-color: #1c3503 #baf55e #baf55e #1c3503;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65),0 0 7px rgba(144,221,37,.5);
}

#winampShell:not(.winamp-playing) #winampPlay {
  animation: axelampPlayPulse 1.8s ease-in-out infinite;
}

#winampShell.winamp-playing #winampPlay {
  animation: none;
}

@keyframes axelampPlayPulse {
  0%,100% {
    box-shadow: 0 0 0 1px #111,0 0 6px rgba(159,235,51,.55),inset 0 1px rgba(255,255,255,.6);
  }

  50% {
    box-shadow: 0 0 0 1px #111,0 0 16px rgba(191,255,80,.98),inset 0 1px rgba(255,255,255,.7);
  }
}

.winamp-mini-buttons {
  display: flex;
  gap: 2px;
}

.winamp-mini-button {
  min-width: 28px;
  height: 20px;
  padding: 0 4px;
  color: #d6dae1;
  font: 900 8px Tahoma,sans-serif;
  text-shadow: 1px 1px #000;
}

.winamp-panel-title {
  justify-content: center;
  margin-bottom: 4px;
  color: #eff4fb;
}

.winamp-panel-title .winamp-ridges {
  flex: 1;
}

.winamp-panel-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.winamp-panel-actions button {
  height: 14px;
  padding: 0 4px;
  background: #343a44;
  color: #cfd5df;
  border: 1px solid #0a0c10;
  font: 700 7px Tahoma,sans-serif;
}

.winamp-eq-grid {
  display: grid;
  grid-template-columns: repeat(11,minmax(18px,1fr));
  align-items: end;
  gap: 2px;
  padding: 4px 2px 1px;
  background: linear-gradient(#11151b,#07090c);
  border: 1px solid #050609;
}

.winamp-eq-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.winamp-eq-band input {
  width: 17px;
  height: 57px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  accent-color: #bedc00;
}

.winamp-eq-band small {
  color: #e7b628;
  font: 6px Tahoma,sans-serif;
  white-space: nowrap;
}

.winamp-playlist-screen {
  min-height: 118px;
  max-height: 176px;
  overflow-y: auto;
  padding: 3px;
  background: #020502;
  border: 2px solid;
  border-color: #050505 #737a82 #737a82 #050505;
  color: #8cff00;
  font: 9px/1.35 "Courier New",monospace;
  scrollbar-color: #5c6470 #060806;
}

.winamp-track {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  gap: 4px;
  align-items: center;
  padding: 4px 5px;
  background: transparent;
  color: #8cff00;
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.winamp-track:hover {
  background: #0d274e;
  color: #fff;
}

.winamp-track.active {
  background: #123a75;
  color: #fff;
}

.winamp-track-index {
  color: #a8ff00;
}

.winamp-track-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winamp-track-duration {
  color: #c6cbd2;
}

.winamp-playlist-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 5px 3px 2px;
  color: #aeb5c0;
  background: #020502;
  border-top: 1px solid #172017;
  font: 7px Tahoma,sans-serif;
}

.winamp-spotify-wrap {
  margin-top: 5px;
  padding: 4px;
  background: #080a0d;
  border: 1px solid #050609;
  box-shadow: inset 0 0 0 1px #454b55;
}

.winamp-spotify-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 4px;
  color: #b9c0ca;
  font: 700 7px/1.2 Tahoma,Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .25px;
}

.winamp-local-source {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  color: #b8ff43;
  background: linear-gradient(#10170d,#040704);
  border: 1px solid #28421c;
  border-radius: 8px;
  text-align: center;
  font: 900 9px/1.35 "Courier New",monospace;
  text-shadow: 0 0 5px #4d8500;
}

.winamp-local-source small {
  display: block;
  color: #8e9990;
  font: 700 7px/1.3 Tahoma,Arial,sans-serif;
  text-shadow: none;
  margin-top: 3px;
}

#winampSpotifyEmbed {
  min-height: 80px;
}

#winampSpotifyEmbed iframe {
  display: block;
  width: 100% !important;
  height: 80px !important;
  border: 0;
  border-radius: 8px;
  background: #121212;
}

.winamp-note {
  color: #c2c7ce;
  font: 8px/1.3 Tahoma,sans-serif;
  padding: 5px 1px 0;
}

#winampVolume.spotify-decorative {
  opacity: .58;
  cursor: help;
}

.media-body {
  padding: 0;
  background: #111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
}

.media-screen {
  position: relative;
  flex: 1;
  min-height: 220px;
  background: #000;
}

.media-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  color: #fff;
  background: radial-gradient(circle,#28334a,#05070b 70%);
  font: 12px Tahoma,sans-serif;
}

.media-placeholder.hidden {
  display: none;
}

.media-playlist {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  padding: 7px;
  background: linear-gradient(#e8edf2,#bfc8d2);
  border-top: 1px solid #fff;
}

.media-video-button {
  flex: 0 0 160px;
  width: 160px;
  max-width: 160px;
  min-height: 42px;
  padding: 5px 8px;
  overflow: hidden;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.2;
  text-align: center;
  color: #000 !important;
  background: linear-gradient(#fff,#d7dce1);
  border: 2px solid;
  border-color: #fff #59616a #59616a #fff;
  font: 10px/1.2 Tahoma,sans-serif;
  cursor: pointer;
}

.media-video-button.active {
  background: #316ac5;
  color: #000 !important;
  border-color: #123b79 #fff #fff #123b79;
}

.paint-body {
  padding: 0;
  background: #c0c0c0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  touch-action: none;
}

.paint-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  background: #ece9d8;
  border-bottom: 2px solid #808080;
  touch-action: manipulation;
}

.paint-tool {
  min-width: 31px;
  height: 28px;
  padding: 2px 6px;
  background: #ece9d8;
  border: 2px solid;
  border-color: #fff #716f64 #716f64 #fff;
  font: 11px Tahoma,sans-serif;
  cursor: pointer;
}

.paint-tool.active,.paint-tool:active {
  border-color: #716f64 #fff #fff #716f64;
  background: #d6d2c5;
}

.paint-toolbar input[type=color] {
  width: 32px;
  height: 27px;
  padding: 1px;
  border: 2px solid #716f64;
  background: #fff;
}

.paint-toolbar input[type=range] {
  width: 80px;
  accent-color: #245edb;
}

.paint-canvas-wrap {
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow: auto;
  background: #808080;
  display: grid;
  place-items: center;
  touch-action: none;
}

#paintCanvas {
  display: block;
  width: min(100%,900px);
  height: auto;
  aspect-ratio: 5/3;
  background: #fff;
  box-shadow: 1px 1px #000;
  touch-action: none;
  cursor: crosshair;
}

.paint-status {
  min-height: 22px;
  padding: 4px 7px;
  background: #ece9d8;
  border-top: 1px solid #fff;
  font: 10px Tahoma,sans-serif;
  touch-action: manipulation;
}

.notepad-body {
  padding: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notepad-menu {
  height: 25px;
  padding: 4px 7px;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
  font: 11px Tahoma,sans-serif;
  word-spacing: 13px;
}

#contactNotes {
  flex: 1;
  width: 100%;
  min-height: 220px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 8px;
  background: #fff;
  color: #111;
  font: 13px/1.45 "Lucida Console","Courier New",monospace;
  user-select: text;
  -webkit-user-select: text;
  touch-action: pan-y;
}

.notepad-actions {
  display: flex;
  gap: 7px;
  padding: 7px;
  background: #ece9d8;
  border-top: 1px solid #aca899;
  touch-action: manipulation;
}

.contact-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 700px) {
  .xp-welcome {
    grid-template-rows: 14% 1fr 14%;
  }

  .xp-welcome-center {
    flex-direction: column;
    gap: 9px;
    text-align: center;
  }

  .xp-welcome-copy {
    text-align: center;
  }

  .desktop {
    padding: 4px 4px calc(42px + env(safe-area-inset-bottom)) 4px;
  }

  .desktop-icons {
    gap: 4px 7px;
    height: 100%;
  }

  .desktop-icon {
    width: 59px;
    min-height: 59px;
    font-size: 9px;
  }

  .desktop-icon .icon-img,.desktop-icon .icon-img svg,.desktop-icon .icon-img img {
    width: 32px;
    height: 32px;
  }

  .window:not(.doom-window):not(.pinball-window) {
    left: 2vw !important;
    top: 3vh !important;
    width: 96vw !important;
    height: 72vh !important;
    min-width: 0 !important;
    min-height: 230px !important;
    max-width: 96vw !important;
    max-height: calc(100dvh - 58px) !important;
  }

  #win-mi-pc.initial-window {
    height: 73vh !important;
  }

  .window-header,.window-header .title {
    font-size: 11px;
  }

  .window-controls button {
    width: 22px;
    height: 21px;
    font-size: 11px;
  }

  .xp-menubar {
    overflow: hidden;
  }

  .xp-menu-word {
    padding: 4px 5px;
    font-size: 10px;
  }

  .xp-toolbar {
    min-height: 34px;
    padding: 2px 4px;
  }

  .xp-tool-button {
    min-height: 27px;
    padding: 2px 4px;
    font-size: 10px;
  }

  .xp-tool-button b {
    font-size: 16px;
  }

  .xp-tool-button:nth-of-type(3),.xp-tool-button:nth-of-type(4) {
    display: none;
  }

  .xp-addressbar > span:first-child {
    display: none;
  }

  .explorer-scroll {
    display: block;
  }

  .xp-task-pane {
    display: none;
  }

  .xp-main-pane {
    padding: 12px 11px 20px;
  }

  .xp-main-pane h1 {
    font-size: 20px;
  }

  .service-folders {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .service-folder {
    grid-template-columns: 34px 1fr;
    padding: 5px;
  }

  .service-folder svg {
    width: 32px;
    height: 32px;
  }

  .xp-cta-box {
    align-items: stretch;
    flex-direction: column;
  }

  .xp-button {
    width: 100%;
  }

  .taskbar {
    height: 40px;
  }

  .taskbar .start-btn {
    min-width: 79px;
    padding: 0 10px 0 6px;
    font-size: 13px;
  }

  .start-logo {
    width: 21px;
    height: 19px;
  }

  .quick-launch {
    display: none;
  }

  .taskbar .task-item {
    display: flex;
    width: clamp(72px,28vw,120px);
    padding: 0 5px;
  }

  .taskbar .task-items {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .taskbar .task-items::-webkit-scrollbar {
    display: none;
  }

  .system-tray {
    padding: 0 5px;
    gap: 3px;
  }

  .tray-chevron,.tray-icon:nth-of-type(3) {
    display: none;
  }

  .taskbar .clock {
    font-size: 10px;
  }

  .start-menu {
    width: min(410px,calc(100vw - 4px));
    bottom: 40px;
    left: 0;
  }

  .start-menu-header {
    height: 52px;
  }

  .start-avatar {
    width: 39px;
    height: 39px;
    font-size: 23px;
  }

  .start-user {
    font-size: 16px;
  }

  .start-menu-columns {
    min-height: 0;
    max-height: calc(100dvh - 140px);
    grid-template-columns: 1.05fr .95fr;
  }

  .start-menu .menu-item {
    min-height: 37px;
    padding: 4px;
    font-size: 10px;
  }

  .start-menu .menu-item strong {
    font-size: 11px;
  }

  .start-menu .menu-item small {
    display: none;
  }

  .menu-icon,.menu-icon svg,.menu-icon img {
    width: 25px;
    height: 25px;
  }

  .start-menu-footer {
    height: 43px;
    gap: 10px;
  }

  .start-footer-button {
    font-size: 10px;
  }

  .start-footer-button i {
    width: 24px;
    height: 24px;
  }

  #win-winamp {
    width: min(96vw,365px) !important;
    height: min(76vh,560px) !important;
    min-height: 350px !important;
    left: 2vw !important;
  }

  #win-media {
    height: 64vh !important;
  }

  .media-screen {
    min-height: 210px;
  }

  .paint-toolbar {
    max-height: 73px;
    overflow-y: auto;
  }

  .paint-canvas-wrap {
    padding: 4px;
  }

  .notepad-actions {
    flex-direction: column;
  }
}









































.xp-session-overlay[hidden] {
  display: none !important;
}

.xp-session-overlay {
  position: fixed;
  inset: 0;
  z-index: 300000;
  display: grid;
  grid-template-rows: 12% 1fr 12%;
  color: #fff;
  background: #587bd2;
  font-family: Tahoma,sans-serif;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease,visibility 180ms ease;
  cursor: default;
}

.xp-session-overlay.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.xp-session-band {
  background: linear-gradient(90deg,#0039a6,#084ec4 50%,#0039a6);
  box-shadow: inset 0 -1px rgba(255,255,255,.3),inset 0 1px rgba(0,0,0,.2);
}

.xp-session-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px clamp(18px,6vw,80px);
  background: linear-gradient(90deg,#0039a6,#084ec4 50%,#0039a6);
  box-shadow: inset 0 1px rgba(255,255,255,.3),inset 0 -1px rgba(0,0,0,.2);
  font-size: clamp(10px,1.5vw,14px);
}

.xp-session-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 17% 25%,rgba(255,255,255,.13),transparent 29%),
        linear-gradient(100deg,#4d73cc,#6488dc 52%,#4f74ca);
}

.xp-session-closing,
    .xp-login-screen,
    .xp-shutdown-screen {
  position: absolute;
  inset: 0;
  display: none;
}

.xp-session-overlay.phase-closing .xp-session-closing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  cursor: wait;
}

.xp-session-closing strong {
  display: block;
  font-size: clamp(1.45rem,5vw,2.7rem);
  font-style: italic;
  letter-spacing: -.04em;
  text-shadow: 0 2px 2px rgba(0,0,0,.35);
}

.xp-session-closing span {
  display: block;
  margin-top: 7px;
  font-size: clamp(.72rem,2vw,1rem);
}

.xp-session-logo {
  width: clamp(58px,9vw,92px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  transform: skewY(-5deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}

.xp-session-logo i:nth-child(1) {
  background: #f35325;
}

.xp-session-logo i:nth-child(2) {
  background: #81bc06;
}

.xp-session-logo i:nth-child(3) {
  background: #05a6f0;
}

.xp-session-logo i:nth-child(4) {
  background: #ffba08;
}

.xp-session-overlay.phase-login .xp-login-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.xp-login-brand {
  min-height: 54%;
  padding: 20px clamp(22px,6vw,78px) 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 13px;
  text-align: right;
  border-right: 1px solid rgba(255,255,255,.25);
}

.xp-login-brand-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.xp-login-wordmark {
  text-align: left;
  line-height: .88;
}

.xp-login-wordmark small {
  display: block;
  font-size: 10px;
  letter-spacing: .05em;
}

.xp-login-wordmark strong {
  font: 700 clamp(27px,5vw,54px)/.9 Arial,sans-serif;
  letter-spacing: -.07em;
}

.xp-login-wordmark em {
  color: #f08a43;
  font: italic 700 clamp(17px,2.8vw,28px) Arial,sans-serif;
}

.xp-login-brand p {
  margin: 0;
  font-size: clamp(12px,2vw,18px);
}

.xp-login-users {
  padding: 20px 20px 20px clamp(22px,6vw,78px);
  display: flex;
  align-items: center;
}

.xp-login-user {
  min-width: min(330px,42vw);
  padding: 7px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 11px;
  color: #fff;
  background: linear-gradient(90deg,rgba(20,75,186,.95),rgba(74,117,208,.34));
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  font: 18px Tahoma,sans-serif;
  cursor: pointer;
}

.xp-login-user:hover,.xp-login-user:focus-visible {
  border-color: rgba(255,255,255,.85);
  outline: 0;
  background: linear-gradient(90deg,#0b4ebd,rgba(74,117,208,.55));
}

.xp-login-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 4px;
  color: #173d88;
  background: linear-gradient(#e9f1ff,#83b8e8);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  font-size: 36px;
}

.xp-login-user strong {
  display: block;
  font-size: clamp(17px,2.5vw,24px);
  font-weight: 400;
}

.xp-login-user small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  opacity: .86;
}

.xp-login-power {
  min-height: 36px;
  padding: 5px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 12px Tahoma,sans-serif;
  cursor: pointer;
}

.xp-login-power:hover {
  border-color: rgba(255,255,255,.55);
  background: rgba(0,0,70,.2);
}

.xp-login-power i {
  display: grid;
  place-items: center;
  background: #e04a3a;
  font-style: normal;
}

.xp-session-overlay.phase-closing .xp-session-footer,
    .xp-session-overlay.phase-closing .xp-session-band {
  opacity: 1;
}

.xp-session-overlay.phase-closing .xp-session-footer {
  justify-content: center;
}

.xp-session-overlay.phase-closing .xp-login-power {
  display: none;
}

.xp-session-overlay.phase-shutdown {
  grid-template-rows: 0 1fr 0;
  background: #000;
}

.xp-session-overlay.phase-shutdown .xp-session-band,
    .xp-session-overlay.phase-shutdown .xp-session-footer {
  display: none;
}

.xp-session-overlay.phase-shutdown .xp-session-stage {
  background: #000;
}

.xp-session-overlay.phase-shutdown .xp-shutdown-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 28px 18px;
  text-align: center;
}

.xp-shutdown-screen .xp-session-logo {
  width: clamp(62px,10vw,104px);
}

.xp-shutdown-brand {
  color: #f0f0f0;
  font: 700 clamp(25px,6vw,55px)/.9 Arial,sans-serif;
  letter-spacing: -.06em;
}

.xp-shutdown-brand small {
  display: block;
  margin-bottom: 3px;
  font: 10px Tahoma,sans-serif;
  letter-spacing: .03em;
}

.xp-shutdown-brand em {
  color: #f08a43;
  font: italic 700 .5em Arial,sans-serif;
  letter-spacing: 0;
}

.xp-shutdown-screen h1,
.xp-shutdown-screen .xp-shutdown-heading {
  margin: 15px 0 3px;
  color: #ff7a45;
  font: 700 clamp(1.25rem,5vw,2.45rem)/1.15 Tahoma,sans-serif;
  text-shadow: 0 0 7px rgba(255,104,47,.45);
}

.xp-shutdown-screen > p {
  margin: 0;
  color: #aaa;
  font: 12px/1.4 Tahoma,sans-serif;
}

.xp-shutdown-actions {
  width: min(620px,100%);
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.xp-shutdown-action {
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #111;
  background: linear-gradient(#fff,#d8d8d8);
  border: 2px solid;
  border-color: #fff #5b5b5b #5b5b5b #fff;
  text-decoration: none;
  font: 700 13px Tahoma,sans-serif;
  cursor: pointer;
}

.xp-shutdown-action:active {
  border-color: #5b5b5b #fff #fff #5b5b5b;
  background: #c8c8c8;
}

.xp-shutdown-action.whatsapp {
  background: linear-gradient(#7be498,#2bbd5e);
}

.xp-shutdown-action.restart {
  grid-column: 1/-1;
  background: linear-gradient(#c6ddff,#75a9eb);
}

@media (max-width:700px) {
  

  

  

  

  

  

  

  

  

  

  

  .xp-session-overlay {
    grid-template-rows: 13% 1fr 13%;
  }

  .xp-session-overlay.phase-closing .xp-session-closing {
    flex-direction: column;
    text-align: center;
    gap: 13px;
  }

  .xp-session-footer {
    padding: 8px 12px;
  }

  .xp-session-footer > span {
    max-width: 58%;
    text-align: right;
  }

  .xp-login-brand {
    padding: 14px 15px 14px 8px;
    gap: 9px;
  }

  .xp-login-brand-row {
    gap: 8px;
  }

  .xp-login-brand .xp-session-logo {
    width: 46px;
  }

  .xp-login-wordmark strong {
    font-size: 25px;
  }

  .xp-login-wordmark em {
    font-size: 16px;
  }

  .xp-login-brand p {
    font-size: 11px;
  }

  .xp-login-users {
    padding: 14px 8px 14px 15px;
  }

  .xp-login-user {
    min-width: 0;
    width: 100%;
    grid-template-columns: 49px 1fr;
    gap: 7px;
    padding: 5px;
    font-size: 14px;
  }

  .xp-login-avatar {
    width: 49px;
    height: 49px;
    font-size: 27px;
  }

  .xp-login-user strong {
    font-size: 16px;
  }

  .xp-login-user small {
    display: none;
  }

  .xp-shutdown-screen h1 {
    max-width: 330px;
  }

  .xp-shutdown-actions {
    grid-template-columns: 1fr;
    max-width: 340px;
  }

  .xp-shutdown-action.restart {
    grid-column: auto;
  }
}

.window.minimized {
  display: none !important;
}

.window-controls button {
  pointer-events: auto;
  touch-action: manipulation;
}

.tray-volume {
  width: 23px;
  height: 25px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 14px/1 Tahoma,sans-serif;
  cursor: pointer;
  filter: drop-shadow(1px 1px rgba(0,0,0,.3));
}

.tray-volume:hover,.tray-volume:focus-visible {
  background: rgba(0,65,176,.45);
  border-color: rgba(255,255,255,.45);
  outline: 0;
}

.tray-volume[aria-pressed="true"] {
  background: rgba(130,20,20,.45);
}































































.paint-commandbar {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  background: #ece9d8;
  border-bottom: 1px solid #aca899;
}

.paint-commandbar .paint-tool {
  height: 26px;
}

.paint-size-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font: 11px Tahoma,sans-serif;
}

.paint-size-label input {
  width: 92px;
  accent-color: #245edb;
}

.paint-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: #808080;
  overflow: hidden;
}

.paint-sidebar {
  flex: 0 0 92px;
  width: 92px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #d4d0c8;
  border-right: 2px solid #716f64;
  overflow-y: auto;
  touch-action: manipulation;
}

.paint-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.paint-tools-grid .paint-tool {
  min-width: 0;
  height: 48px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.paint-tools-grid .paint-tool span {
  font-size: 19px;
  line-height: 1;
}

.paint-tools-grid .paint-tool small {
  font: 8px Tahoma,sans-serif;
}

.paint-current-colors {
  position: relative;
  border: 2px inset #fff;
}

.paint-current-colors span {
  background: var(--paint-swatch);
  border: 2px solid #111;
}

#paintCurrentColor {
  left: 9px;
  top: 4px;
  z-index: 2;
}

.paint-white-swatch {
  left: 25px;
  top: 9px;
  background: #fff !important;
}

.paint-palette {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 3px;
}

.paint-palette button {
  height: 24px;
  padding: 0;
  background: var(--paint-swatch);
  border: 3px solid;
  border-color: #fff #555 #555 #fff;
  cursor: pointer;
}

.paint-palette button.active {
  outline: 2px dotted #111;
  outline-offset: -5px;
}

.paint-custom-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font: 9px Tahoma,sans-serif;
}

.paint-custom-color input {
  width: 36px;
  height: 28px;
  padding: 1px;
  border: 2px solid #716f64;
}

.paint-workspace .paint-canvas-wrap {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px;
}























.stock-pile.empty::after {
  content: "↻";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.55);
  font: 32px Arial;
}

































@media (pointer:coarse),(max-width:900px) {
  #desktop .window.maximized:not(.doom-window):not(.pinball-window) {
    position: absolute !important;
    left: 2px !important;
    top: 2px !important;
    width: calc(100vw - 4px) !important;
    height: calc(100dvh - 46px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

@media (max-width:520px) {
  

  

  

  

  

  

  

  

  .paint-commandbar {
    max-height: none;
  }

  .paint-size-label {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .paint-sidebar {
    flex-basis: 76px;
    width: 76px;
    padding: 4px;
  }

  .paint-tools-grid {
    grid-template-columns: 1fr;
  }

  .paint-tools-grid .paint-tool {
    height: 38px;
    flex-direction: row;
  }

  .paint-palette button {
    width: 28px;
    height: 21px;
  }

  

  

  

  

  

  
}

#win-mi-pc .explorer-scroll {
  display: block;
  background: #eef4fb;
}

#win-mi-pc .xp-task-pane {
  display: none;
}

.web-site-header {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 58px;
  padding: 8px clamp(12px,3vw,28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  background: linear-gradient(90deg,#063f92,#0879d8 62%,#0da5d7);
  border-bottom: 4px solid #f4a024;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-family: Tahoma,Arial,sans-serif;
}

.web-site-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.web-site-brand b {
  font-size: clamp(18px,3vw,28px);
  letter-spacing: -1px;
}

.web-site-brand small {
  display: block;
  color: #d9efff;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.web-site-logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f39a18;
  font: bold 22px Arial;
  box-shadow: 0 2px 4px #04316c;
}

.web-site-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.web-site-nav a {
  padding: 6px 8px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  background: rgba(0,30,90,.22);
  text-decoration: none;
  font: bold 10px Tahoma,sans-serif;
}

.web-site-nav a:hover {
  background: #fff;
  color: #174b9d;
}

#win-mi-pc .xp-main-pane {
  width: min(100%,980px);
  margin: 0 auto;
  padding: clamp(16px,4vw,34px);
  background: #fff;
  box-shadow: 0 0 22px rgba(24,66,125,.14);
}

#win-mi-pc .xp-main-pane h1 {
  padding: clamp(16px,3vw,28px);
  margin: 0 0 10px;
  color: #fff;
  border-radius: 7px;
  background: linear-gradient(120deg,#1355b1,#168bd3);
  font-weight: bold;
  text-shadow: 1px 2px #063a82;
}

#win-mi-pc .xp-lead {
  margin: -4px 12px 19px;
  padding: 10px 13px;
  color: #293c55;
  background: #edf6ff;
  border-left: 5px solid #f39a18;
  font-size: 12px;
}

#win-mi-pc .xp-section-title {
  color: #123f8e;
  font-size: 16px;
  border-bottom: 3px solid #f39a18;
}

#win-mi-pc .service-folders {
  gap: 10px;
}

#win-mi-pc .service-folder {
  padding: 11px;
  border: 1px solid #c8d9ee;
  border-radius: 6px;
  background: linear-gradient(#fff,#f4f8fd);
  box-shadow: 0 2px 5px rgba(20,59,113,.1);
}

#win-mi-pc .service-folder:hover {
  transform: translateY(-1px);
  background: #e9f4ff;
  border-color: #4b8fd5;
}











#win-paint .paint-body,#win-paint .paint-body button,#win-paint .paint-body label,#win-paint .paint-status {
  color: #111 !important;
}

.paint-tools-grid .paint-tool small {
  color: #111 !important;
}

.paint-current-colors {
  flex: 0 0 auto;
  min-height: 39px;
  height: auto !important;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  background: #ece9d8 !important;
}

.paint-current-colors span {
  position: static !important;
  width: 100% !important;
  height: 27px !important;
  box-sizing: border-box;
}

.paint-palette {
  flex: 0 0 auto;
  overflow: visible;
}

.paint-palette button {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}

.paint-custom-color {
  flex: 0 0 auto;
  color: #111 !important;
}







.foundation-pile > span:not(.sol-card) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: .27;
  font: 700 calc(var(--card-w)*.48)/1 Georgia,serif;
}

.foundation-pile.red > span:not(.sol-card) {
  color: #ffbbc1;
}

.foundation-pile.black > span:not(.sol-card) {
  color: #c8dcce;
}

.foundation-pile {
  isolation: isolate;
  overflow: visible !important;
}




























#win-age.age-window {
  max-width: calc(100vw - 14px);
  max-height: calc(100dvh - 52px);
}

.age-body {
  padding: 0 !important;
  overflow: hidden !important;
  background: #050705 !important;
  color: #59ff71 !important;
  font-family: "Lucida Console","Courier New",monospace;
}

.age-loader {
  min-height: 270px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: radial-gradient(circle at 50% 0,#132014,#030503 65%);
}

.age-loader strong {
  color: #d6e8d5;
  font-size: 14px;
}

.age-loader-line {
  min-height: 18px;
  color: #65ff7a;
  font-size: 11px;
  text-shadow: 0 0 5px rgba(79,255,103,.5);
}

.age-loader-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #65ff7a;
  animation: ageBlink .65s steps(1) infinite;
}

@keyframes ageBlink {
  50% {
    opacity: 0;
  }
}

.age-error {
  min-height: 270px;
  padding: 22px;
  display: none;
  align-items: flex-start;
  gap: 14px;
  color: #111;
  background: #ece9d8;
  font-family: Tahoma,sans-serif;
}

.age-error.visible {
  display: flex;
}

.age-error-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d52a20;
  border-radius: 50%;
  font: bold 35px Arial;
  box-shadow: inset -3px -3px #8b150e,inset 3px 3px #ff8a7f;
}

.age-error-copy {
  flex: 1;
  min-width: 0;
}

.age-error-copy h3 {
  margin: 0 0 9px;
  color: #111;
  font: bold 14px Tahoma,sans-serif;
}

.age-error-copy p {
  margin: 0 0 15px;
  color: #111;
  font: 11px/1.5 Tahoma,sans-serif;
}

.age-error-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.age-error-actions button,.age-error-actions a {
  min-height: 31px;
  padding: 6px 12px;
  color: #111;
  background: #ece9d8;
  border: 2px solid;
  border-color: #fff #555 #555 #fff;
  text-decoration: none;
  font: 11px Tahoma,sans-serif;
  cursor: pointer;
}

.age-error-actions .age-whatsapp {
  color: #fff;
  background: #239a49;
  border-color: #8ee4a8 #0a5424 #0a5424 #8ee4a8;
  font-weight: bold;
}

@media (pointer:coarse),(max-width:900px) {
  

  

  #desktop #win-age.age-window:not(.maximized) {
    left: 3vw !important;
    top: 16vh !important;
    width: 94vw !important;
    height: min(330px,68dvh) !important;
    min-width: 0 !important;
    min-height: 280px !important;
    max-width: 540px !important;
  }
}

@media (max-width:520px) {
  .web-site-header {
    position: static;
    align-items: flex-start;
  }

  .web-site-nav {
    gap: 3px;
  }

  .web-site-nav a {
    padding: 4px;
    font-size: 8px;
  }

  #win-mi-pc .xp-main-pane {
    padding: 11px;
  }

  #win-mi-pc .service-folders {
    grid-template-columns: 1fr;
  }

  

  

  

  

  

  

  .paint-sidebar {
    flex-basis: 84px;
    width: 84px;
  }

  .age-error {
    padding: 14px;
    gap: 9px;
  }

  .age-error-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xp-welcome {
    transition-duration: 1ms;
  }

  .xp-session-overlay {
    transition-duration: 1ms;
  }

  .winamp-marquee span,.winamp-spectrum i {
    animation: none !important;
  }
}







.window-controls button {
  position: relative;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden;
}

.window-controls .btn-min::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.window-controls .btn-max::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 9px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid #fff;
  border-top-width: 2px;
  box-sizing: border-box;
  filter: drop-shadow(1px 1px rgba(0,0,0,.25));
}

.window-controls .btn-max.restore-icon::before {
  width: 9px;
  height: 8px;
  left: 47%;
  top: 54%;
  background: transparent;
}

.window-controls .btn-max.restore-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 7px;
  left: 55%;
  top: 41%;
  transform: translate(-50%,-50%);
  border: 1px solid #fff;
  border-top-width: 2px;
  box-sizing: border-box;
  background: #2b70d7;
  box-shadow: 1px 1px 0 rgba(0,0,0,.22);
}

.window-controls .btn-close::before,
    .window-controls .btn-close::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  left: 50%;
  top: 50%;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.23);
}

.window-controls .btn-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.window-controls .btn-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

.all-programs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
}

.all-programs .all-programs-arrow {
  width: 18px;
  height: 18px;
  margin-left: 8px !important;
  display: inline-block;
  vertical-align: middle;
  image-rendering: auto;
  flex: 0 0 18px;
}





































#menuCerrar i {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

#menuCerrar i::before,
    #menuCerrar i::after {
  content: none !important;
  display: none !important;
}

@media (max-width:520px) {
  #menuCerrar i {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
  }

  

  

  

  

  

  

  

  
}

.start-menu-footer {
  min-height: 52px;
  height: 52px;
  gap: 14px;
}

.start-footer-button i {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  font-size: 0 !important;
  overflow: visible;
}

#menuCerrar i {
  background-image: url("../icons/Logout.webp") !important;
}

#menuApagar i {
  background-image: url("../icons/Power.webp") !important;
}

#menuCerrar i::before, #menuCerrar i::after,
    #menuApagar i::before, #menuApagar i::after {
  content: none !important;
  display: none !important;
}

.xp-login-power i {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("../icons/ICON/241.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

#axelMsnToast {
  position: fixed;
  right: 10px;
  bottom: calc(48px + env(safe-area-inset-bottom));
  width: min(338px,calc(100vw - 20px));
  z-index: 10050;
  overflow: hidden;
  color: #20313c;
  background: linear-gradient(180deg,rgba(255,255,255,.96) 0,rgba(234,247,253,.98) 14%,rgba(211,236,247,.98) 100%);
  border: 1px solid #6f9eb4;
  border-radius: 9px;
  box-shadow: 0 5px 18px rgba(0,0,0,.42),
        inset 0 0 0 1px rgba(255,255,255,.92);
  font-family: Tahoma,Arial,sans-serif;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(100% + 62px));
  transition: transform .48s cubic-bezier(.22,.78,.24,1),
        opacity .28s ease,
        visibility .28s ease;
  user-select: none;
  -webkit-user-select: none;
}

#axelMsnToast.msn-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#axelMsnToast::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 7px;
  right: 7px;
  top: 2px;
  height: 1px;
  background: rgba(255,255,255,.95);
  pointer-events: none;
}

.axel-msn-titlebar {
  position: relative;
  min-height: 38px;
  padding: 6px 39px 5px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg,#fafdff 0,#e8f5fb 55%,#d5ebf5 100%);
  border-bottom: 1px solid rgba(91,144,168,.34);
}

.axel-msn-logo {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

.axel-msn-appname {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #405865;
  font-size: 12px;
  line-height: 1.22;
  padding-bottom: 2px;
  text-shadow: 0 1px #fff;
}

#axelMsnClose {
  position: absolute;
  z-index: 3;
  top: 5px;
  right: 6px;
  width: 28px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #526975;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0;
  font: bold 23px/1 Arial,sans-serif;
  cursor: pointer;
  text-shadow: 0 1px #fff;
  touch-action: manipulation;
}

#axelMsnClose:hover,
    #axelMsnClose:focus-visible {
  color: #a51e1e;
  background: rgba(255,255,255,.6);
  border-color: rgba(84,130,151,.34);
}

#axelMsnClose:active {
  transform: translateY(1px);
}

.axel-msn-body {
  min-height: 100px;
  padding: 11px 14px 12px;
  display: flex;
  align-items: center;
  gap: 13px;
}

.axel-msn-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid #59a9b9;
  border-radius: 5px;
  box-shadow: inset 0 0 0 3px #fff,
        0 2px 5px rgba(0,0,0,.22);
}

.axel-msn-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 3px solid #fff;
  box-sizing: border-box;
}

.axel-msn-copy {
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.axel-msn-copy strong {
  display: block;
  margin-bottom: 2px;
  color: #172831;
  font-size: 19px;
  font-weight: 400;
}

.axel-msn-copy span {
  display: block;
  color: #2c414d;
  font-size: 13px;
}

.axel-msn-copy small {
  display: block;
  margin-top: 7px;
  color: #36708e;
  font-size: 10px;
  line-height: 1.3;
}

.axel-msn-footer {
  min-height: 27px;
  padding: 3px 12px 7px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #176ca2;
  font-size: 11px;
  border-top: 1px solid rgba(255,255,255,.66);
}

#axelMsnToast:hover .axel-msn-footer span {
  text-decoration: underline;
}

#axelMsnToast:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

@media (max-width:520px) {
  #axelMsnToast {
    right: 6px;
    bottom: calc(45px + env(safe-area-inset-bottom));
    width: min(326px,calc(100vw - 12px));
  }

  .axel-msn-titlebar {
    min-height: 35px;
    padding-left: 8px;
  }

  .axel-msn-body {
    min-height: 88px;
    padding: 9px 11px 10px;
    gap: 10px;
  }

  .axel-msn-avatar {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .axel-msn-copy strong {
    font-size: 17px;
  }

  .axel-msn-copy span {
    font-size: 12px;
  }

  .axel-msn-copy small {
    margin-top: 5px;
    font-size: 9px;
  }

  .axel-msn-footer {
    min-height: 24px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #axelMsnToast {
    transition-duration: 1ms;
  }
}

/* ===== EL AXEL XP 2.2 · correcciones funcionales ===== */

/* Buscaminas: CTA visible y cuadro de resultado con carcasa XP. */


















/* Media Player: controles inspirados en WMP clásico. */
.media-transport {
  flex:0 0 auto;
  min-height:50px;
  padding:5px 7px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#14263c;
  background:linear-gradient(#eef5fb,#c5d5e3);
  border-top:1px solid #fff;
  border-bottom:1px solid #8396a8;
}
.media-transport-buttons { display:flex;align-items:center;gap:3px;flex:0 0 auto; }
.media-transport button {
  width:32px;
  height:31px;
  display:grid;
  place-items:center;
  padding:0;
  color:#172a40;
  background:linear-gradient(#fff,#ccd7e1);
  border:2px solid;
  border-color:#fff #65717c #65717c #fff;
  border-radius:3px;
  box-shadow:1px 1px 1px rgba(0,0,0,.2);
  font:bold 12px/1 Tahoma,sans-serif;
  cursor:pointer;
}
.media-transport button:active { border-color:#65717c #fff #fff #65717c;background:#b8c7d4;transform:translate(1px,1px); }
.media-transport .media-play-main {
  width:38px;height:38px;border-radius:50%;color:#fff;background:linear-gradient(#4b91d2,#1e5f9f);border-color:#bfe4ff #0b365d #0b365d #bfe4ff;font-size:16px;
}
.media-now-playing {
  min-width:0;
  flex:1;
  min-height:30px;
  padding:5px 8px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  color:#143653;
  background:linear-gradient(#e7f4fd,#fafdff);
  border:1px solid #8ba7bc;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.12);
  font:10px Tahoma,sans-serif;
}
.media-now-playing span:last-child { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.media-status-dot { width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#48a73f;box-shadow:0 0 3px #3c9d3c; }

@media (max-width:520px) {
  
  
  
  
  
  
  
  
  .media-transport { min-height:47px;padding:4px;gap:5px; }
  .media-transport-buttons { gap:2px; }
  .media-transport button { width:28px;height:28px;font-size:10px; }
  .media-transport .media-play-main { width:34px;height:34px;font-size:14px; }
  .media-now-playing { padding:4px 5px;font-size:8px; }
  .media-playlist { padding:5px; }
  .media-video-button { flex-basis:132px;width:132px;max-width:132px;font-size:9px; }
}

/* ===== EL AXEL XP 2.3 · Buscaminas móvil compacto ===== */


/* ===== EL AXEL XP 2.6 · Menú Ayuda compartido ===== */
.xp-help-trigger {
  cursor:pointer !important;
}

.notepad-menu {
  display:flex;
  align-items:center;
  gap:13px;
  word-spacing:0 !important;
}

.notepad-menu > span {
  display:inline-block;
  white-space:nowrap;
}

.notepad-menu .xp-help-trigger {
  padding:1px 3px;
}

.notepad-menu .xp-help-trigger:hover,
.notepad-menu .xp-help-trigger[aria-expanded="true"] {
  color:#fff;
  background:#316ac5;
}

.xp-menu-word.xp-help-trigger[aria-expanded="true"]{
  color:#fff !important;
  background:#316ac5 !important;
  border-color:#0b3e91 !important;
}

#xpHelpPopup {
  position:fixed;
  z-index:350000;
  min-width:188px;
  padding:2px;
  display:none;
  background:#ece9d8;
  border:1px solid #716f64;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #aca899,
    2px 3px 7px rgba(0,0,0,.34);
  font:11px Tahoma,sans-serif;
}

#xpHelpPopup.open {
  display:block;
}

#xpHelpPopup a {
  min-height:27px;
  padding:5px 18px 5px 27px;
  position:relative;
  display:flex;
  align-items:center;
  color:#111;
  background:transparent;
  text-decoration:none;
  white-space:nowrap;
}

#xpHelpPopup a::before {
  content:"?";
  position:absolute;
  left:7px;
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#316ac5;
  border-radius:50%;
  font:bold 10px/1 Tahoma,sans-serif;
}

#xpHelpPopup a:hover,
#xpHelpPopup a:focus-visible {
  color:#fff;
  background:#316ac5;
  outline:0;
}

#xpHelpPopup a:hover::before,
#xpHelpPopup a:focus-visible::before {
  color:#316ac5;
  background:#fff;
}

@media (max-width:520px) {
  #xpHelpPopup {
    min-width:176px;
    font-size:10px;
  }

  #xpHelpPopup a {
    min-height:32px;
    padding-top:7px;
    padding-bottom:7px;
  }

  .notepad-menu {
    gap:9px;
    padding-left:5px;
    padding-right:5px;
    font-size:10px;
  }
}


/* ===== EL AXEL XP 2.7 · DOOM táctil ergonómico ===== */






/* ===== EL AXEL XP 2.9 · Solitario funcional ===== */















/* ===== EL AXEL · Solitario: mesa limpia + fundaciones inteligentes ===== */





/* ===== EL AXEL · ventanas arrastrables también en móvil ===== */
@media (pointer:coarse), (max-width:900px) {
  .window:not(.maximized) > .window-header {
    touch-action:none !important;
    cursor:grab !important;
  }

  .window:not(.maximized) > .window-header:active {
    cursor:grabbing !important;
  }
}


/* ===== EL AXEL · WINDOWS MEDIA PLAYER XP ===== */
#win-media {
  background:#0c284c !important;
}

#win-media .window-header {
  flex:0 0 31px;
  height:31px;
  min-height:31px;
}

#win-media .title-icon,
#win-media .title-icon img {
  width:20px;
  height:20px;
}

.wmp9-body {
  min-height:0;
  padding:0 !important;
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
  background:#050505 !important;
  border:0 !important;
  font-family:Tahoma,Arial,sans-serif;
}

/* Menú gris clásico */
.wmp9-menubar {
  flex:0 0 31px;
  min-height:31px;
  padding:2px 10px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#171717;
  background:linear-gradient(#fbfaf5 0%,#ece9de 52%,#dedbcf 100%);
  border-top:1px solid #fff;
  border-bottom:1px solid #92958f;
  box-shadow:inset 0 -1px #c8c5bb;
  font:14px/1 Tahoma,Arial,sans-serif;
}

.wmp9-menubar > span {
  padding:4px 7px;
  white-space:nowrap;
  border:1px solid transparent;
}

.wmp9-menubar > span:hover,
.wmp9-menubar > span[aria-expanded="true"] {
  color:#fff;
  background:#316ac5;
  border-color:#194b97;
}

/* Franja superior metal/azul del WMP */
.wmp9-toolbar {
  flex:0 0 31px;
  min-height:31px;
  display:flex;
  align-items:stretch;
  background:
    linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.12) 37%,transparent 40%),
    linear-gradient(180deg,#dbe0e8 0%,#a6b3c8 46%,#697db3 50%,#576ca5 100%);
  border-bottom:1px solid #23365f;
  box-shadow:inset 0 1px #fff;
}

.wmp9-toolbar-blank {
  flex:1;
  margin:5px 0 5px 6px;
  background:linear-gradient(#fff,#e9e8e2);
  border:1px solid #9ca4ac;
  border-radius:1px;
  box-shadow:inset 1px 1px #fff;
}

.wmp9-view-tools {
  flex:0 0 210px;
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  margin-left:8px;
  background:linear-gradient(180deg,#7689c4,#485b9d);
  border-left:1px solid #30487d;
}

.wmp9-view-tool {
  width:52px;
  display:grid;
  place-items:center;
  color:#a9bde8;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(22,45,95,.5);
  font:bold 19px/1 Arial,sans-serif;
  text-shadow:0 1px #283c77;
}

/* Pantalla negra */
.wmp9-screen {
  position:relative;
  flex:1 1 0;
  min-height:210px;
  margin:0 5px;
  overflow:hidden;
  background:#000 !important;
  border-left:1px solid #5b6b78;
  border-right:1px solid #5b6b78;
  box-shadow:inset 0 0 0 1px #050505;
}

.wmp9-screen iframe {
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0;
  background:#000;
  display:block;
}

.wmp9-placeholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#ddd;
  background:#000 !important;
}

.wmp9-placeholder.hidden {
  display:none;
}

.wmp9-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transform:translateY(-2%);
}

.wmp9-windows-mark {
  width:116px;
  height:93px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  transform:skewY(-7deg) rotate(-2deg);
  filter:drop-shadow(3px 5px 2px rgba(255,255,255,.08));
}

.wmp9-windows-mark i {
  border-radius:10px 3px 10px 3px;
  box-shadow:
    inset 4px 4px 10px rgba(255,255,255,.45),
    inset -5px -5px 12px rgba(0,0,0,.25);
}

.wmp9-windows-mark i:nth-child(1) { background:linear-gradient(135deg,#ffb744,#e34c29); }
.wmp9-windows-mark i:nth-child(2) { background:linear-gradient(135deg,#a8ed72,#62af32); }
.wmp9-windows-mark i:nth-child(3) { background:linear-gradient(135deg,#76d6ff,#2877bd); }
.wmp9-windows-mark i:nth-child(4) { background:linear-gradient(135deg,#ffe86a,#e9b126); }

.wmp9-brand-copy {
  color:#d8d8d8;
  text-align:center;
  letter-spacing:-2px;
  text-shadow:0 2px 3px #000;
  font-family:Arial,Helvetica,sans-serif;
}

.wmp9-brand-copy strong,
.wmp9-brand-copy span {
  display:block;
}

.wmp9-brand-copy strong {
  font-size:43px;
  line-height:.9;
  font-weight:700;
}

.wmp9-brand-copy span {
  margin-left:57px;
  margin-top:2px;
  font-size:34px;
  line-height:.92;
  font-weight:700;
}

/* Status Ready / Listo */
.wmp9-statusbar {
  flex:0 0 28px;
  min-height:28px;
  margin:0 5px;
  padding:2px 0 1px 135px;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#b8c8ff;
  background:
    linear-gradient(180deg,#0c1019,#020307 58%,#0a0d13 60%,#111825);
  border-top:2px solid #aab5c5;
  border-bottom:1px solid #1b2d52;
  font:14px/1 "Trebuchet MS",Tahoma,sans-serif;
  text-shadow:0 1px 2px #000;
}

#mediaNowPlaying {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Deck azul de controles */
.wmp9-transport {
  flex:0 0 84px !important;
  min-height:84px !important;
  padding:7px 13px 8px !important;
  display:grid !important;
  grid-template-columns:auto minmax(90px,1fr) 155px;
  align-items:center !important;
  gap:13px !important;
  color:#0c2241 !important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.65),transparent 16%),
    linear-gradient(180deg,#9eb8ec 0%,#6e8bd0 26%,#5576c0 58%,#425ea8 100%) !important;
  border-top:1px solid #bed1f3 !important;
  border-bottom:1px solid #213a77 !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.65),
    inset 0 -2px rgba(19,44,99,.35);
}

.wmp9-left-controls {
  display:flex;
  align-items:center;
  gap:6px;
}

.wmp9-transport button {
  position:relative;
  display:grid !important;
  place-items:center;
  padding:0 !important;
  color:#243a5a !important;
  cursor:pointer;
  text-shadow:0 1px rgba(255,255,255,.75);
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.85),
    inset -1px -1px 2px rgba(25,50,95,.42),
    0 1px 2px rgba(23,44,88,.55) !important;
}

.wmp9-transport button span {
  transform:translateY(-1px);
}

.wmp9-play {
  width:59px !important;
  height:59px !important;
  border-radius:50% !important;
  color:#203d6d !important;
  background:
    radial-gradient(circle at 33% 25%,#fff 0%,#f7fbff 23%,#d9e7f8 43%,#a7bddb 72%,#6d83a6 100%) !important;
  border:2px solid #324d79 !important;
  outline:2px solid rgba(237,246,255,.72);
  font:bold 24px/1 Arial,sans-serif !important;
}

.wmp9-play span {
  margin-left:3px;
}

.wmp9-round-small {
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:linear-gradient(#f9fcff,#c4d4e9 58%,#8da5c5) !important;
  border:2px solid #40587c !important;
  font:bold 12px/1 Arial,sans-serif !important;
}

.wmp9-pill {
  width:50px !important;
  height:28px !important;
  border-radius:15px !important;
  background:linear-gradient(#f4f8fd,#c7d5e8 50%,#839cc0) !important;
  border:1px solid #40587c !important;
  font:bold 10px/1 Arial,sans-serif !important;
}

.wmp9-pause {
  width:38px !important;
}

.wmp9-transport button:active {
  transform:translateY(1px) !important;
  filter:brightness(.88);
}

.wmp9-progress-area {
  min-width:70px;
  display:flex;
  align-items:center;
  gap:8px;
}

.wmp9-progress-led {
  width:15px;
  height:28px;
  flex:0 0 15px;
  border-radius:3px;
  background:linear-gradient(#d4ff8c,#6fd631 48%,#36a913);
  border:1px solid #476d3b;
  box-shadow:inset 0 1px #f0ffd6,0 1px 2px rgba(0,0,0,.3);
}

.wmp9-progress-track {
  flex:1;
  height:8px;
  padding:1px;
  background:linear-gradient(#5e78b5,#9db3df);
  border:1px solid rgba(44,67,118,.6);
  box-shadow:inset 0 1px 2px rgba(26,45,88,.65);
}

.wmp9-progress-track i {
  display:block;
  width:18%;
  height:100%;
  background:linear-gradient(#b5dcff,#79a6dc);
  opacity:.38;
}

/* volumen verde, muy WMP */
.wmp9-volume {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:#20395f;
  font-size:13px;
}

.wmp9-volume input {
  width:120px;
  height:20px;
  margin:0;
  accent-color:#6acb33;
  cursor:pointer;
}

.wmp9-volume input::-webkit-slider-runnable-track {
  height:7px;
  background:linear-gradient(90deg,#5bd134,#80dc45 70%,#6f86bc 70%);
  border:1px solid #3d5b7c;
  border-radius:1px;
}

.wmp9-volume input::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:16px;
  height:29px;
  margin-top:-12px;
  border:1px solid #657f8b;
  border-radius:2px;
  background:linear-gradient(90deg,#8fe45c,#55bb30);
  box-shadow:inset 1px 0 #dfffd3,inset -1px 0 #377d26,0 1px 2px rgba(0,0,0,.35);
}

/* Lista, integrada como franja inferior y no como panel moderno */
.wmp9-playlist {
  flex:0 0 42px !important;
  min-height:42px;
  padding:4px 6px !important;
  gap:3px !important;
  overflow-x:auto !important;
  background:linear-gradient(#526eb4,#344d90) !important;
  border-top:1px solid #8ba5dc !important;
  scrollbar-width:thin;
}

.wmp9-playlist .media-video-button {
  flex:0 0 145px !important;
  width:145px !important;
  max-width:145px !important;
  min-height:30px !important;
  padding:3px 7px !important;
  color:#102a55 !important;
  background:linear-gradient(#f9fbff,#b9cae4) !important;
  border:1px solid #2f4b7e !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px #fff;
  font:9px/1.1 Tahoma,sans-serif !important;
}

.wmp9-playlist .media-video-button.active {
  color:#fff !important;
  background:linear-gradient(#416db5,#21457e) !important;
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.45);
}

@media (max-width:700px) {
  #win-media.window:not(.maximized) {
    height:72vh !important;
  }

  .wmp9-menubar {
    flex-basis:27px;
    min-height:27px;
    padding:1px 4px;
    gap:0;
    font-size:10px;
  }

  .wmp9-menubar > span {
    padding:4px;
  }

  .wmp9-toolbar {
    flex-basis:23px;
    min-height:23px;
  }

  .wmp9-toolbar-blank {
    margin:3px 0 3px 4px;
  }

  .wmp9-view-tools {
    flex-basis:105px;
  }

  .wmp9-view-tool {
    width:34px;
    font-size:13px;
  }

  .wmp9-brand {
    transform:scale(.72);
  }

  .wmp9-statusbar {
    flex-basis:23px;
    min-height:23px;
    padding-left:80px;
    font-size:10px;
  }

  .wmp9-transport {
    flex-basis:72px !important;
    min-height:72px !important;
    grid-template-columns:auto minmax(35px,1fr) 106px !important;
    gap:6px !important;
    padding:5px 7px !important;
  }

  .wmp9-left-controls {
    gap:3px;
  }

  .wmp9-play {
    width:49px !important;
    height:49px !important;
    font-size:20px !important;
  }

  .wmp9-round-small {
    width:31px !important;
    height:31px !important;
  }

  .wmp9-pill {
    width:37px !important;
    height:25px !important;
    font-size:8px !important;
  }

  .wmp9-pause {
    display:none !important;
  }

  .wmp9-progress-led {
    display:none;
  }

  .wmp9-volume {
    gap:2px;
    font-size:10px;
  }

  .wmp9-volume input {
    width:84px;
  }

  .wmp9-playlist {
    flex-basis:38px !important;
    min-height:38px;
  }

  .wmp9-playlist .media-video-button {
    flex-basis:118px !important;
    width:118px !important;
    max-width:118px !important;
    font-size:8px !important;
  }
}

@media (max-width:430px) {
  .wmp9-menubar > span:nth-child(4) {
    display:none;
  }

  .wmp9-brand {
    transform:scale(.62);
  }

  .wmp9-transport {
    grid-template-columns:auto 1fr 86px !important;
  }

  .wmp9-round-small {
    width:29px !important;
    height:29px !important;
  }

  .wmp9-pill {
    width:31px !important;
  }

  .wmp9-progress-track {
    min-width:24px;
  }

  .wmp9-volume input {
    width:64px;
  }
}


/* ===== EL AXEL · WMP XP · pulido V2 ===== */
#win-media .wmp9-toolbar { display:none !important; }

#win-media .wmp9-screen {
  margin-top:0 !important;
  border-top:1px solid #2a3a51 !important;
}

#win-media #nostalgiaFrame {
  pointer-events:none !important;
}

.wmp9-video-hitarea {
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}

#mediaPlaceholder {
  z-index:4;
  pointer-events:none;
}

.wmp9-statusbar {
  padding-left:118px !important;
  height:26px !important;
  min-height:26px !important;
  flex-basis:26px !important;
}

.wmp9-transport {
  flex-basis:78px !important;
  min-height:78px !important;
  grid-template-columns:auto minmax(48px,1fr) 170px !important;
  gap:10px !important;
  padding:6px 13px 7px !important;
}

.wmp9-left-controls {
  gap:5px !important;
}

.wmp9-play {
  width:58px !important;
  height:58px !important;
}

.wmp9-play.is-playing span {
  margin-left:0 !important;
  font-size:21px;
  letter-spacing:-3px;
}

.wmp9-round-small {
  width:37px !important;
  height:37px !important;
}

.wmp9-pill {
  width:47px !important;
  height:27px !important;
}

.wmp9-control-ridge {
  position:relative;
  min-width:44px;
  height:13px;
  align-self:center;
  opacity:.65;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),transparent 45%),
    repeating-linear-gradient(90deg,#6079b3 0 5px,#8fa7d6 5px 8px,#5670aa 8px 12px);
  border:1px solid rgba(44,67,118,.45);
  border-radius:2px;
  box-shadow:inset 0 1px 2px rgba(22,46,95,.35);
}

.wmp9-volume {
  justify-content:flex-end !important;
}

.wmp9-volume input {
  width:132px !important;
}

.wmp9-playlist {
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}

.wmp9-playlist::-webkit-scrollbar {
  display:none !important;
  width:0 !important;
  height:0 !important;
}

.wmp9-playlist .media-video-button {
  scroll-snap-align:start;
  min-height:31px !important;
  border-radius:14px 14px 4px 4px !important;
}

@media (max-width:700px) {
  .wmp9-statusbar {
    padding-left:60px !important;
  }

  .wmp9-transport {
    flex-basis:67px !important;
    min-height:67px !important;
    grid-template-columns:auto minmax(22px,1fr) 112px !important;
    gap:5px !important;
    padding:4px 6px !important;
  }

  .wmp9-play {
    width:48px !important;
    height:48px !important;
  }

  .wmp9-round-small {
    width:31px !important;
    height:31px !important;
  }

  .wmp9-pill {
    width:34px !important;
    height:24px !important;
  }

  .wmp9-control-ridge {
    min-width:18px;
  }

  .wmp9-volume input {
    width:82px !important;
  }
}

@media (max-width:430px) {
  .wmp9-transport {
    grid-template-columns:auto minmax(10px,1fr) 88px !important;
  }

  .wmp9-control-ridge {
    display:none;
  }

  .wmp9-volume input {
    width:64px !important;
  }
}


/* ===== EL AXEL · PAINT CLÁSICO ===== */
#win-paint {
  background:#c0c0c0 !important;
}

#win-paint .window-header {
  flex:0 0 30px;
  height:30px;
  min-height:30px;
}

.paint98-body {
  min-height:0;
  padding:0 !important;
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
  color:#111 !important;
  background:#c0c0c0 !important;
  border:0 !important;
  font-family:Tahoma,Arial,sans-serif;
}

.paint98-menubar {
  position:relative;
  z-index:20;
  flex:0 0 31px;
  min-height:31px;
  padding:1px 7px;
  display:flex;
  align-items:center;
  gap:2px;
  color:#111;
  background:#ece9d8;
  border-top:1px solid #fff;
  border-bottom:1px solid #7f7f7f;
}

.paint98-menu-trigger {
  min-height:26px;
  padding:3px 8px;
  color:#111 !important;
  background:transparent;
  border:1px solid transparent;
  font:13px/1 Tahoma,Arial,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}

.paint98-menu-trigger:hover,
.paint98-menu-trigger.open,
.paint98-menu-trigger[aria-expanded="true"] {
  color:#fff !important;
  background:#316ac5;
  border-color:#194b97;
}

.paint98-dropdown {
  position:absolute;
  top:29px;
  left:6px;
  z-index:60;
  min-width:170px;
  padding:2px;
  display:none;
  background:#ece9d8;
  border:1px solid #111;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #808080,2px 3px 5px rgba(0,0,0,.28);
}

.paint98-dropdown.open { display:block; }
.paint98-dropdown[data-paint-dropdown="edit"] { left:77px; }
.paint98-dropdown[data-paint-dropdown="view"] { left:151px; }
.paint98-dropdown[data-paint-dropdown="image"] { left:210px; }

.paint98-dropdown button {
  width:100%;
  min-height:27px;
  padding:4px 22px;
  color:#111 !important;
  background:transparent;
  border:0;
  text-align:left;
  font:11px Tahoma,Arial,sans-serif;
  cursor:pointer;
}

.paint98-dropdown button:hover {
  color:#fff !important;
  background:#316ac5;
}

.paint98-main {
  flex:1 1 0;
  min-height:0;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  background:#c0c0c0;
  border-bottom:1px solid #fff;
}

.paint98-toolbox {
  min-height:0;
  padding:5px 5px 6px;
  display:flex;
  flex-direction:column;
  gap:7px;
  background:#c0c0c0;
  border-right:2px solid;
  border-color:#fff #808080 #808080 #fff;
  overflow-y:auto;
  scrollbar-width:thin;
}

.paint98-tools-grid {
  display:grid;
  grid-template-columns:repeat(2,46px);
  grid-auto-rows:46px;
  gap:2px;
  justify-content:center;
}

.paint98-tool {
  width:46px !important;
  height:46px !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  display:grid;
  place-items:center;
  color:#111 !important;
  background:#c0c0c0 !important;
  border:2px solid !important;
  border-color:#fff #555 #555 #fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font:bold 22px/1 "Arial Unicode MS",Arial,sans-serif !important;
  text-shadow:none !important;
  cursor:pointer;
}

.paint98-tool span {
  display:block;
  transform:none !important;
}

.paint98-tool.active,
.paint98-tool:active {
  border-color:#555 #fff #fff #555 !important;
  background:#d8d8d8 !important;
  outline:1px dotted #111;
  outline-offset:-5px;
}

.paint98-tool-options {
  flex:0 0 auto;
  min-height:110px;
  padding:6px;
  color:#111;
  background:#c0c0c0;
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
}

.paint98-option-title {
  margin-bottom:8px;
  text-align:center;
  font:10px Tahoma,sans-serif;
}

.paint98-size-label {
  display:block;
  font:9px Tahoma,sans-serif;
}

.paint98-size-label span { display:block;margin-bottom:3px; }
.paint98-size-label input { width:100%;accent-color:#000; }

.paint98-size-preview {
  height:27px;
  margin-top:5px;
  display:grid;
  place-items:center;
  background:#fff;
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
}

#paintSizePreview {
  width:60%;
  height:5px;
  display:block;
  background:#111;
}

.paint98-canvas-area {
  min-width:0;
  min-height:0;
  padding:5px 5px 4px;
  overflow:hidden;
  background:#c0c0c0;
}

.paint98-canvas-wrap {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:4px !important;
  display:block !important;
  overflow:auto !important;
  background:#7f7f7f !important;
  border:2px solid;
  border-color:#555 #fff #fff #555;
  scrollbar-color:#c0c0c0 #dedede;
  touch-action:pan-x pan-y;
}

#win-paint #paintCanvas {
  display:block;
  width:1000px;
  height:600px;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  background:#fff;
  box-shadow:0 0 0 1px #555;
  touch-action:none;
  image-rendering:auto;
  cursor:crosshair;
  transform-origin:top left;
}

.paint98-canvas-wrap.paint-zoomed #paintCanvas {
  width:2000px;
  height:1200px;
}

.paint98-colors {
  flex:0 0 78px;
  min-height:78px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  background:#c0c0c0;
  border-top:2px solid;
  border-color:#fff transparent transparent transparent;
  scrollbar-width:thin;
}

.paint98-current-colors {
  position:relative;
  flex:0 0 58px;
  width:58px;
  height:58px;
  background:#fff;
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
}

.paint98-current-colors span {
  position:absolute;
  width:30px;
  height:30px;
  border:2px solid #111;
}

.paint98-secondary {
  right:6px;
  bottom:6px;
  background:#fff;
}

.paint98-primary {
  left:6px;
  top:6px;
  z-index:2;
  background:var(--paint-swatch,#e60000);
}

.paint98-palette {
  flex:0 0 auto;
  display:grid !important;
  grid-template-columns:repeat(14,28px) !important;
  grid-template-rows:repeat(2,28px) !important;
  gap:2px !important;
  overflow:visible !important;
}

.paint98-palette button {
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  background:var(--paint-swatch) !important;
  border:2px solid !important;
  border-color:#fff #555 #555 #fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.paint98-palette button.active {
  outline:2px dotted #111 !important;
  outline-offset:-5px !important;
}

.paint98-custom-color {
  flex:0 0 36px;
  width:36px;
  height:58px;
  display:grid;
  place-items:center;
  background:#c0c0c0;
  border:2px solid;
  border-color:#fff #555 #555 #fff;
}

.paint98-custom-color input {
  width:28px !important;
  height:46px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent;
}

.paint98-status {
  flex:0 0 31px;
  min-height:31px;
  padding:3px 4px !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) 125px;
  gap:4px;
  color:#111 !important;
  background:#c0c0c0 !important;
  border-top:2px solid #808080 !important;
  font:11px/1.2 Tahoma,sans-serif !important;
}

.paint98-status > span {
  min-width:0;
  padding:4px 6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
}

#paintCoords { text-align:center; }

/* Tablet / móvil: reorganización real, no simple reducción */
@media (pointer:coarse), (max-width:900px) {
  #win-paint.window:not(.maximized),
  #win-paint.window.maximized {
    left:2px !important;
    top:2px !important;
    width:calc(100vw - 4px) !important;
    height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
  }

  .paint98-menubar {
    flex:0 0 29px;
    min-height:29px;
    padding:1px 3px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }

  .paint98-menubar::-webkit-scrollbar { display:none; }
  .paint98-menu-trigger { min-height:25px;padding:3px 6px;font-size:11px; }

  .paint98-main {
    grid-template-columns:86px minmax(0,1fr);
  }

  .paint98-toolbox {
    padding:4px;
    gap:5px;
    overflow-y:auto;
  }

  .paint98-tools-grid {
    grid-template-columns:repeat(2,36px);
    grid-auto-rows:36px;
    gap:2px;
  }

  .paint98-tool {
    width:36px !important;
    height:36px !important;
    font-size:17px !important;
  }

  .paint98-tool-options {
    min-height:82px;
    padding:4px;
  }

  .paint98-option-title { display:none; }
  .paint98-size-label { font-size:8px; }
  .paint98-size-preview { height:22px; }

  .paint98-canvas-area { padding:3px; }
  .paint98-canvas-wrap { padding:3px !important; }

  /* En móvil el lienzo cabe inicialmente completo de ancho. Si activan lupa,
     vuelve a tamaño grande y se desplaza dentro de su área, sin cortar UI. */
  #win-paint #paintCanvas {
    width:min(1000px,calc(100vw - 100px));
    height:auto;
    aspect-ratio:5/3 !important;
  }

  .paint98-canvas-wrap.paint-zoomed #paintCanvas {
    width:1000px;
    height:600px;
    aspect-ratio:auto !important;
  }

  .paint98-colors {
    flex:0 0 67px;
    min-height:67px;
    padding:4px;
    gap:4px;
    -webkit-overflow-scrolling:touch;
  }

  .paint98-current-colors {
    flex-basis:50px;
    width:50px;
    height:50px;
  }

  .paint98-current-colors span { width:27px;height:27px; }

  .paint98-palette {
    grid-template-columns:repeat(14,24px) !important;
    grid-template-rows:repeat(2,24px) !important;
    gap:1px !important;
  }

  .paint98-palette button {
    width:24px !important;
    height:24px !important;
  }

  .paint98-custom-color {
    flex-basis:32px;
    width:32px;
    height:50px;
  }

  .paint98-custom-color input { width:24px !important;height:40px !important; }

  .paint98-status {
    flex-basis:27px;
    min-height:27px;
    grid-template-columns:minmax(0,1fr) 72px;
    font-size:9px !important;
  }

  .paint98-status > span { padding:3px 4px; }
}

@media (max-width:520px) {
  #win-paint .window-header {
    flex-basis:28px;
    height:28px;
    min-height:28px;
  }

  .paint98-main {
    grid-template-columns:76px minmax(0,1fr);
  }

  .paint98-tools-grid {
    grid-template-columns:repeat(2,32px);
    grid-auto-rows:32px;
  }

  .paint98-tool {
    width:32px !important;
    height:32px !important;
    font-size:15px !important;
  }

  .paint98-tool-options { min-height:72px; }
  .paint98-size-label span { display:none; }

  #win-paint #paintCanvas {
    width:min(1000px,calc(100vw - 88px));
  }

  .paint98-colors {
    flex-basis:61px;
    min-height:61px;
  }

  .paint98-palette {
    grid-template-columns:repeat(14,21px) !important;
    grid-template-rows:repeat(2,21px) !important;
  }

  .paint98-palette button {
    width:21px !important;
    height:21px !important;
  }

  .paint98-current-colors { flex-basis:44px;width:44px;height:44px; }
  .paint98-current-colors span { width:24px;height:24px; }
  .paint98-custom-color { height:44px; }
  .paint98-custom-color input { height:34px !important; }

  .paint98-status {
    grid-template-columns:1fr;
  }

  #paintCoords { display:none; }
}


/* ===== EL AXEL · Paint clásico 1.1 · ajuste de espacio y centrado ===== */

/* El lienzo queda centrado dentro del área gris. */
#win-paint .paint98-canvas-wrap {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:6px !important;
  overflow:auto !important;
}

/* En estado normal, mostrar siempre la tarjeta completa si cabe. */
#win-paint #paintCanvas {
  width:auto !important;
  height:auto !important;
  max-width:calc(100% - 4px) !important;
  max-height:calc(100% - 4px) !important;
  aspect-ratio:5 / 3 !important;
  flex:0 0 auto !important;
}

/* Cuando se activa Zoom, vuelve a tamaño real y permite desplazamiento. */
#win-paint .paint98-canvas-wrap.paint-zoomed {
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

#win-paint .paint98-canvas-wrap.paint-zoomed #paintCanvas {
  width:1000px !important;
  height:600px !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
}

/* PC: un poco más de aire para que la imagen completa se vea sin recortes. */
@media (min-width:901px) {
  #win-paint.window:not(.maximized) {
    width:min(900px,calc(100vw - 32px)) !important;
    height:min(700px,calc(100dvh - 58px)) !important;
  }

  #win-paint .paint98-main {
    min-height:0 !important;
  }

  #win-paint .paint98-canvas-area {
    min-height:0 !important;
  }
}

/* Móvil: la franja inferior deja de comerse media pantalla. */
@media (pointer:coarse), (max-width:900px) {
  #win-paint .paint98-colors {
    flex:0 0 50px !important;
    min-height:50px !important;
    height:50px !important;
    padding:3px 4px !important;
    gap:3px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  #win-paint .paint98-current-colors {
    flex:0 0 38px !important;
    width:38px !important;
    height:38px !important;
  }

  #win-paint .paint98-current-colors span {
    width:21px !important;
    height:21px !important;
    border-width:1px !important;
  }

  #win-paint .paint98-primary {
    left:4px !important;
    top:4px !important;
  }

  #win-paint .paint98-secondary {
    right:4px !important;
    bottom:4px !important;
  }

  #win-paint .paint98-palette {
    grid-template-columns:repeat(14,19px) !important;
    grid-template-rows:repeat(2,19px) !important;
    gap:1px !important;
  }

  #win-paint .paint98-palette button {
    width:19px !important;
    height:19px !important;
    border-width:1px !important;
  }

  #win-paint .paint98-custom-color {
    flex:0 0 28px !important;
    width:28px !important;
    height:38px !important;
  }

  #win-paint .paint98-custom-color input {
    width:22px !important;
    height:31px !important;
  }

  #win-paint .paint98-status {
    flex:0 0 23px !important;
    min-height:23px !important;
    height:23px !important;
    padding:2px 3px !important;
    font-size:8px !important;
  }

  #win-paint .paint98-status > span {
    padding:2px 4px !important;
  }

  /* El lienzo se centra también verticalmente en el teléfono. */
  #win-paint .paint98-canvas-wrap {
    padding:4px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #win-paint #paintCanvas {
    width:auto !important;
    height:auto !important;
    max-width:calc(100% - 2px) !important;
    max-height:calc(100% - 2px) !important;
  }
}

@media (max-width:520px) {
  #win-paint .paint98-menubar {
    min-height:27px !important;
    flex-basis:27px !important;
  }

  #win-paint .paint98-menu-trigger {
    min-height:23px !important;
    padding:2px 5px !important;
    font-size:10px !important;
  }

  #win-paint .paint98-colors {
    flex-basis:46px !important;
    min-height:46px !important;
    height:46px !important;
  }

  #win-paint .paint98-current-colors {
    flex-basis:34px !important;
    width:34px !important;
    height:34px !important;
  }

  #win-paint .paint98-current-colors span {
    width:19px !important;
    height:19px !important;
  }

  #win-paint .paint98-palette {
    grid-template-columns:repeat(14,17px) !important;
    grid-template-rows:repeat(2,17px) !important;
  }

  #win-paint .paint98-palette button {
    width:17px !important;
    height:17px !important;
  }

  #win-paint .paint98-custom-color {
    height:34px !important;
  }

  #win-paint .paint98-custom-color input {
    height:27px !important;
  }

  #win-paint .paint98-status {
    flex-basis:21px !important;
    min-height:21px !important;
    height:21px !important;
  }
}


/* ===== EL AXEL · Paint 1.2 · barra superior funcional ===== */
#win-paint .paint98-quickbar {
  flex:0 0 38px;
  min-height:38px;
  padding:3px 6px;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  background:linear-gradient(#f5f3ec,#dedbd0);
  border-top:1px solid #fff;
  border-bottom:1px solid #8c8a82;
  box-shadow:inset 0 1px #fff;
  scrollbar-width:none;
}

#win-paint .paint98-quickbar::-webkit-scrollbar {
  display:none;
}

#win-paint .paint98-quick-btn {
  flex:0 0 auto;
  min-width:98px;
  height:29px;
  padding:3px 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#111 !important;
  background:linear-gradient(#fff,#dedbd0);
  border:2px solid;
  border-color:#fff #666 #666 #fff;
  border-radius:1px;
  box-shadow:none;
  font:11px/1 Tahoma,Arial,sans-serif;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
}

#win-paint .paint98-quick-btn:hover,
#win-paint .paint98-quick-btn[aria-expanded="true"] {
  background:#e9e6dc;
}

#win-paint .paint98-quick-btn:active {
  border-color:#666 #fff #fff #666;
  transform:translate(1px,1px);
}

#win-paint .paint98-quick-btn:disabled {
  color:#888 !important;
  text-shadow:1px 1px #fff;
  cursor:default;
  filter:grayscale(1);
  opacity:.62;
}

@media (pointer:coarse), (max-width:900px) {
  #win-paint .paint98-quickbar {
    flex:0 0 34px;
    min-height:34px;
    height:34px;
    padding:2px 4px;
    gap:3px;
  }

  #win-paint .paint98-quick-btn {
    min-width:84px;
    height:27px;
    padding:2px 7px;
    gap:4px;
    font-size:10px;
  }
}

@media (max-width:520px) {
  #win-paint .paint98-quickbar {
    flex-basis:32px;
    min-height:32px;
    height:32px;
  }

  #win-paint .paint98-quick-btn {
    min-width:auto;
    height:25px;
    padding:2px 6px;
    font-size:9px;
  }
}


/* ===== EL AXEL · Age fake boot ===== */
.agefake-overlay[hidden] {
  display:none !important;
}

.agefake-overlay {
  position:fixed;
  inset:0;
  z-index:240000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease,visibility .14s ease;
  touch-action:none;
}

.agefake-overlay.visible {
  opacity:1;
  visibility:visible;
}

.agefake-stage {
  position:relative;
  width:min(980px,94vw);
  max-height:calc(100dvh - 36px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.agefake-image {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 36px);
  object-fit:contain;
  background:#000;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 12px 44px rgba(0,0,0,.72);
  user-select:none;
  -webkit-user-drag:none;
}

.agefake-error {
  position:absolute;
  left:50%;
  top:50%;
  width:min(470px,calc(100% - 28px));
  transform:translate(-50%,-46%) scale(.96);
  background:#ece9d8;
  border:3px solid #0054e3;
  border-top-color:#3f8cff;
  border-left-color:#3f8cff;
  border-right-color:#003399;
  border-bottom-color:#003399;
  border-radius:7px 7px 3px 3px;
  box-shadow:5px 8px 24px rgba(0,0,0,.68);
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  font-family:Tahoma,Arial,sans-serif;
  overflow:hidden;
}

.agefake-error.visible {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}

.agefake-error-titlebar {
  min-height:30px;
  padding:3px 36px 3px 8px;
  position:relative;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),transparent 22%),
    linear-gradient(90deg,#0054e3,#1686f1 52%,#0055d7);
  border-bottom:1px solid #003aa0;
  font:bold 12px Tahoma,Arial,sans-serif;
  text-shadow:1px 1px #0b3488;
}

.agefake-error-close {
  position:absolute;
  top:3px;
  right:4px;
  width:24px;
  height:22px;
  padding:0;
  display:grid;
  place-items:center;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(255,255,255,.6),transparent 35%),
    linear-gradient(#ed6b52,#c52d18);
  border:1px solid #fff;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px #9b1d0e,1px 1px 1px rgba(0,0,0,.42);
  font:bold 19px/1 Arial,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}

.agefake-error-close:active {
  transform:translateY(1px);
  filter:brightness(.86);
}

.agefake-error-content {
  min-height:128px;
  padding:20px 22px 14px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:15px;
  align-items:start;
  color:#111;
}

.agefake-error-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff756a 0,#e23327 45%,#aa170e 100%);
  border:2px solid #8d150d;
  border-radius:50%;
  box-shadow:inset 2px 2px 2px rgba(255,255,255,.6),1px 2px 3px rgba(0,0,0,.25);
  font:bold 36px/1 Arial,sans-serif;
}

.agefake-error-copy strong {
  display:block;
  margin:2px 0 8px;
  font:bold 13px Tahoma,Arial,sans-serif;
}

.agefake-error-copy p {
  margin:0;
  color:#111;
  font:11px/1.5 Tahoma,Arial,sans-serif;
}

.agefake-error-actions {
  min-height:55px;
  padding:8px 12px 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ece9d8;
  border-top:1px solid #fff;
}

.agefake-whatsapp {
  min-width:210px;
  min-height:31px;
  padding:6px 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111 !important;
  background:linear-gradient(#fafff7,#d9efd3);
  border:2px solid;
  border-color:#fff #716f64 #716f64 #fff;
  box-shadow:0 0 0 1px #003c74;
  text-decoration:none !important;
  font:bold 11px Tahoma,Arial,sans-serif;
  touch-action:manipulation;
}

.agefake-whatsapp:active {
  border-color:#716f64 #fff #fff #716f64;
  transform:translate(1px,1px);
}

@media (max-width:700px) {
  .agefake-overlay {
    padding:8px;
  }

  .agefake-stage {
    width:100%;
    max-height:calc(100dvh - 16px);
  }

  .agefake-image {
    max-width:100%;
    max-height:calc(100dvh - 16px);
  }

  .agefake-error {
    width:min(420px,calc(100vw - 24px));
  }

  .agefake-error-content {
    min-height:112px;
    padding:16px 14px 11px;
    grid-template-columns:44px minmax(0,1fr);
    gap:10px;
  }

  .agefake-error-icon {
    width:40px;
    height:40px;
    font-size:30px;
  }

  .agefake-error-copy strong {
    font-size:12px;
  }

  .agefake-error-copy p {
    font-size:10px;
    line-height:1.42;
  }

  .agefake-whatsapp {
    width:min(100%,260px);
    min-width:0;
    min-height:34px;
    font-size:10px;
  }
}

@media (max-width:430px) {
  .agefake-error {
    width:calc(100vw - 18px);
  }

  .agefake-error-content {
    padding:13px 11px 10px;
    grid-template-columns:38px minmax(0,1fr);
    gap:8px;
  }

  .agefake-error-icon {
    width:35px;
    height:35px;
    font-size:27px;
  }
}


/* ===== EL AXEL · WMP XP 3.0 · limpio + playlist invisible ===== */
#win-media .wmp9-body {
  background:#050505 !important;
}

/* Sin borde claro alrededor del video. */
#win-media .wmp9-screen {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#000 !important;
  overflow:hidden !important;
}

#win-media .wmp9-player-mount,
#win-media .wmp9-player-mount iframe {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:#000 !important;
}

#win-media .wmp9-player-mount iframe {
  pointer-events:none !important;
}

/* Capa neutra para que ningún estilo externo pinte la pantalla al hover. */
#win-media .wmp9-video-hitarea,
#win-media .wmp9-video-hitarea:hover,
#win-media .wmp9-video-hitarea:focus,
#win-media .wmp9-video-hitarea:active,
#win-media .wmp9-video-hitarea:focus-visible {
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  background-color:transparent !important;
  filter:none !important;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

#win-media #mediaPlaceholder {
  z-index:4;
  pointer-events:none;
}

/* La barra de estado queda pegada a la pantalla, tipo WMP clásico. */
#win-media .wmp9-statusbar {
  flex:0 0 27px !important;
  min-height:27px !important;
  height:27px !important;
  margin:0 !important;
  padding:2px 12px 2px 112px !important;
  border-top:2px solid #aab5c5 !important;
  border-bottom:1px solid #1b2d52 !important;
}

/* Panel inferior sin barra de tiempo falsa y sin lista de videos visible. */
#win-media .wmp9-transport {
  flex:0 0 84px !important;
  min-height:84px !important;
  padding:8px 14px !important;
  display:grid !important;
  grid-template-columns:auto minmax(18px,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
  background:
    radial-gradient(circle at 8% 14%,rgba(255,255,255,.62),transparent 17%),
    linear-gradient(180deg,#a8c1ee 0%,#7695d5 25%,#5c7cc3 58%,#4563aa 100%) !important;
  border-top:1px solid #c8d8f5 !important;
  border-bottom:2px solid #243d7a !important;
  box-shadow:inset 0 1px rgba(255,255,255,.72),inset 0 -2px rgba(19,44,99,.38) !important;
}

#win-media .wmp9-left-controls {
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}

#win-media .wmp9-transport-spacer {
  min-width:16px;
}

/* Botones con volumen y bisel más parecidos al skin de XP. */
#win-media .wmp9-transport button {
  color:#18345d !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.38) 37%,transparent 38%),
    linear-gradient(180deg,#e9f1fb 0%,#c8d9ee 50%,#8ea9ce 100%) !important;
  border:1px solid #344e78 !important;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,.95),
    inset -1px -1px 2px rgba(35,62,104,.42),
    0 1px 2px rgba(21,42,82,.56) !important;
  text-shadow:0 1px rgba(255,255,255,.9) !important;
  transition:none !important;
}

#win-media .wmp9-transport button:hover {
  filter:brightness(1.045) !important;
  background:
    linear-gradient(180deg,#fff 0%,#dbe8f7 49%,#9cb6d8 100%) !important;
}

#win-media .wmp9-transport button:active {
  filter:brightness(.9) !important;
  box-shadow:inset 2px 2px 3px rgba(34,58,96,.4) !important;
  transform:translateY(1px) !important;
}

#win-media .wmp9-play {
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  outline:2px solid rgba(231,242,255,.8) !important;
  font:bold 25px/1 Arial,sans-serif !important;
  background:
    radial-gradient(circle at 32% 27%,#fff 0%,#f8fbff 23%,#d8e6f6 45%,#a1b9d8 72%,#758cac 100%) !important;
}

#win-media .wmp9-play span {
  margin-left:3px;
}

#win-media .wmp9-play.is-playing span {
  margin-left:0 !important;
  font-size:22px !important;
  letter-spacing:-3px;
}

#win-media .wmp9-round-small {
  width:39px !important;
  height:39px !important;
  border-radius:50% !important;
  font-size:12px !important;
}

#win-media .wmp9-pill {
  width:50px !important;
  height:29px !important;
  border-radius:15px !important;
  font:bold 10px/1 Arial,sans-serif !important;
}

/* Volumen verde estilo WMP, más fino y sin apariencia del tema del sitio. */
#win-media .wmp9-volume {
  min-width:170px;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  color:#d5e3fb !important;
  font:10px Tahoma,Arial,sans-serif !important;
}

#win-media .wmp9-speaker {
  display:inline-block;
  min-width:28px;
  color:#d7e5ff;
  font:bold 10px/1 Arial,sans-serif;
  text-shadow:0 1px #29457c;
  letter-spacing:-1px;
}

#win-media #mediaVolume {
  -webkit-appearance:none !important;
  appearance:none !important;
  width:132px !important;
  height:22px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
}

#win-media #mediaVolume::-webkit-slider-runnable-track {
  height:7px;
  border:1px solid #345381;
  border-radius:1px;
  background:linear-gradient(180deg,#203d71,#5e7eba 48%,#aec2e7 49%,#607bad 100%);
  box-shadow:inset 0 1px 2px rgba(15,35,70,.72);
}

#win-media #mediaVolume::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:17px;
  height:31px;
  margin-top:-13px;
  border:1px solid #4a743b;
  border-radius:3px;
  background:linear-gradient(90deg,#a9ef77 0%,#6dd33b 42%,#50b52b 72%,#8be65c 100%);
  box-shadow:inset 1px 0 #dcffd0,inset -1px 0 #32821d,0 1px 2px rgba(0,0,0,.45);
}

#win-media #mediaVolume::-moz-range-track {
  height:7px;
  border:1px solid #345381;
  border-radius:1px;
  background:linear-gradient(180deg,#203d71,#5e7eba 48%,#aec2e7 49%,#607bad 100%);
}

#win-media #mediaVolume::-moz-range-progress {
  height:5px;
  background:#63d13b;
}

#win-media #mediaVolume::-moz-range-thumb {
  width:15px;
  height:29px;
  border:1px solid #4a743b;
  border-radius:3px;
  background:linear-gradient(90deg,#a9ef77,#58bd31,#8be65c);
}

/* La playlist antigua desaparece incluso si algún caché conserva el nodo. */
#win-media .wmp9-playlist,
#win-media #mediaPlaylist,
#win-media .wmp9-control-ridge,
#win-media .wmp9-progress-area,
#win-media .wmp9-progress-track {
  display:none !important;
}

@media (max-width:700px) {
  #win-media .wmp9-statusbar {
    padding-left:58px !important;
    font-size:10px !important;
  }

  #win-media .wmp9-transport {
    flex:0 0 70px !important;
    min-height:70px !important;
    padding:5px 7px !important;
    grid-template-columns:auto minmax(4px,1fr) auto !important;
    gap:6px !important;
  }

  #win-media .wmp9-left-controls {
    gap:4px !important;
  }

  #win-media .wmp9-play {
    width:50px !important;
    height:50px !important;
    font-size:20px !important;
  }

  #win-media .wmp9-round-small {
    width:32px !important;
    height:32px !important;
  }

  #win-media .wmp9-pill {
    width:36px !important;
    height:25px !important;
    font-size:8px !important;
  }

  #win-media .wmp9-volume {
    min-width:100px !important;
    gap:3px !important;
  }

  #win-media .wmp9-speaker {
    min-width:18px;
    font-size:8px;
  }

  #win-media #mediaVolume {
    width:80px !important;
  }
}

@media (max-width:430px) {
  #win-media .wmp9-transport {
    gap:4px !important;
  }

  #win-media .wmp9-pill {
    width:31px !important;
  }

  #win-media .wmp9-volume {
    min-width:76px !important;
  }

  #win-media .wmp9-speaker {
    display:none;
  }

  #win-media #mediaVolume {
    width:68px !important;
  }
}


/* ===== EL AXEL · avatar Moon ===== */
.start-avatar,
.xp-login-avatar {
  padding:0 !important;
}

.start-avatar img,
.xp-login-avatar img {
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover;
  object-position:center;
  border:0 !important;
  border-radius:1px;
  background:#fff;
  user-select:none;
  pointer-events:none;
}


/* ===== EL AXEL · FAQ más legible ===== */
#win-testimonios .faq-body {
  font-size:15px;
  line-height:1.48;
  overflow:auto;
  padding:12px 15px 18px;
}

#win-testimonios .faq-body h2 {
  font-size:21px;
  margin:0 0 14px;
}

#win-testimonios .faq-body p {
  margin:0 0 15px;
  color:#222;
}

#win-testimonios .faq-body p strong:first-child {
  font-size:15.5px;
  color:#111;
}

#win-testimonios .faq-body .xp-button {
  font-size:14px;
  padding:6px 13px;
  margin-top:2px;
}

@media (max-width:700px) {
  #win-testimonios .faq-body {
    font-size:14.5px;
    line-height:1.45;
    padding:10px 12px 16px;
  }

  #win-testimonios .faq-body h2 {
    font-size:19px;
    margin-bottom:12px;
  }

  #win-testimonios .faq-body p {
    margin-bottom:14px;
  }

  #win-testimonios .faq-body p strong:first-child {
    font-size:15px;
  }
}


/* ===== EL AXEL · ACERCA DE · ES / EN ===== */
#win-sobre-mi .about-body {
  position:relative;
  overflow:auto;
  padding:10px 14px 16px;
  font-size:14.5px;
  line-height:1.48;
}

#win-sobre-mi .about-lang-row {
  position:sticky;
  top:-10px;
  z-index:7;
  display:flex;
  justify-content:flex-end;
  margin:-4px -4px 2px 0;
  padding:4px 0 3px;
  pointer-events:none;
}

#win-sobre-mi .about-lang-switch {
  pointer-events:auto;
  display:inline-flex;
  padding:2px;
  border:1px solid #7f9db9;
  background:#ece9d8;
  box-shadow:
    inset 1px 1px #fff,
    inset -1px -1px #aca899;
  border-radius:2px;
}

#win-sobre-mi .about-lang-btn {
  min-width:37px;
  height:23px;
  margin:0;
  padding:1px 8px;
  border:1px solid transparent !important;
  border-radius:1px !important;
  background:transparent !important;
  color:#222 !important;
  box-shadow:none !important;
  font:bold 11px/1 Tahoma,Arial,sans-serif !important;
  cursor:pointer;
  text-shadow:none !important;
}

#win-sobre-mi .about-lang-btn:hover {
  background:#f5f3e8 !important;
}

#win-sobre-mi .about-lang-btn.active {
  color:#fff !important;
  border-color:#245edb !important;
  background:linear-gradient(180deg,#5c92f2,#2f69d9 52%,#2452b8) !important;
  box-shadow:inset 1px 1px rgba(255,255,255,.34) !important;
}

#win-sobre-mi .about-copy[hidden] {
  display:none !important;
}

#win-sobre-mi .about-copy h2 {
  margin:0 0 12px;
  font-size:21px;
}

#win-sobre-mi .about-copy p {
  margin:0 0 13px;
}

#win-sobre-mi .about-lead {
  font-size:15.5px;
  line-height:1.42;
  color:#111;
}

#win-sobre-mi .about-cta {
  margin-top:16px;
}

@media (max-width:700px) {
  #win-sobre-mi .about-body {
    padding:8px 11px 14px;
    font-size:14px;
    line-height:1.44;
  }

  #win-sobre-mi .about-lang-row {
    top:-8px;
  }

  #win-sobre-mi .about-copy h2 {
    font-size:19px;
    margin-bottom:10px;
  }

  #win-sobre-mi .about-lead {
    font-size:14.5px;
  }

  #win-sobre-mi .about-copy p {
    margin-bottom:12px;
  }
}


.external-game-window{overflow:hidden!important}.external-game-window>.external-game-body{display:flex!important;flex:1 1 auto!important;min-width:0!important;min-height:0!important;padding:0!important;overflow:hidden!important;background:#000!important}.external-game-host{position:relative;flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;background:#000}.external-game-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:18px;background:#000;color:#ddd;font:12px Tahoma,Arial,sans-serif;text-align:center}.external-game-host.loaded .external-game-loading{display:none}.external-game-frame{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;background:#000}#desktop .external-game-window.maximized{left:0!important;top:0!important;width:100%!important;height:calc(100% - 40px)!important;max-width:none!important;max-height:none!important;border-radius:0!important}

/* ===== JUEGOS EXTERNOS V2 · geometría original de las ventanas ===== */
#win-doom.doom-window{
  z-index: 60;
}#win-doom .window-header{
  flex: 0 0 30px;
  height: 30px;
  position: relative;
  z-index: 5;
}#win-doom .window-controls .btn-close{
  width: 24px;
  height: 22px;
  font-size: 0.7rem;
}@media (pointer: coarse), (max-width: 900px) {#win-doom.doom-window.maximized{
    height: calc(100% - 38px) !important;
  }}@media (max-width: 480px) {#win-doom.doom-window.maximized{
    height: calc(100% - 34px) !important;
  }#win-doom .window-header{
    height: 28px;
    flex-basis: 28px;
  }}#win-pinball.pinball-window{
  background: #000;
  z-index: 61;
}#win-pinball .window-header{
  flex: 0 0 30px;
  height: 30px;
  min-height: 30px;
  position: relative;
  z-index: 5;
}@media (pointer: coarse), (max-width: 900px) {#win-pinball.pinball-window{
    position: fixed !important;
    inset: 0 0 38px 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 38px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }#win-pinball .window-controls .btn-min,#win-pinball .window-controls .btn-max{
    display: none;
  }}@media (max-width: 430px) {#win-pinball.pinball-window{
    inset: 0 0 34px 0 !important;
    height: calc(100dvh - 34px) !important;
  }#win-pinball .window-header{
    height: 28px;
    min-height: 28px;
    flex-basis: 28px;
  }}#win-buscaminas{
  width: min(720px,68vw) !important;
  height: min(790px,82vh) !important;
  min-width: 420px !important;
  min-height: 500px !important;
}@media (max-width:700px) {#win-buscaminas.window:not(.doom-window):not(.pinball-window){
    top: 2vh !important;
    width: 96vw !important;
    height: min(calc(100dvh - 54px),calc(96vw + 132px)) !important;
    min-width: 0 !important;
    min-height: 430px !important;
    max-height: calc(100dvh - 54px) !important;
  }}#win-doom.doom-window{
  width: min(920px,calc(100vw - 24px)) !important;
  height: min(900px,calc(100vh - 58px)) !important;
  min-width: 560px !important;
  min-height: 430px !important;
  max-width: calc(100vw - 12px) !important;
  max-height: calc(100vh - 50px) !important;
  background: #090909;
  overflow: hidden;
}#win-doom.doom-window.maximized{
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - 8px) !important;
  height: calc(100% - 48px) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}#win-doom .window-header{
  cursor: grab;
}#win-doom .window-controls .btn-min,#win-doom .window-controls .btn-max,#win-doom .window-controls .btn-close{
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
}#win-pinball.pinball-window{
  width: min(900px,calc(100vw - 24px)) !important;
  height: min(900px,calc(100vh - 58px)) !important;
  min-width: 600px !important;
  min-height: 480px !important;
  max-width: calc(100vw - 12px) !important;
  max-height: calc(100vh - 50px) !important;
  overflow: hidden;
}#win-pinball.pinball-window.maximized{
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - 8px) !important;
  height: calc(100% - 48px) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}#win-pinball .window-controls .btn-min,#win-pinball .window-controls .btn-max{
  display: grid !important;
}#win-solitaire.solitaire-window{
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 54px);
}@media (pointer:coarse),(max-width:900px) {#win-doom.doom-window,#win-pinball.pinball-window{
    position: absolute !important;
    inset: auto !important;
    left: 2vw !important;
    top: 2vh !important;
    width: 96vw !important;
    height: calc(100dvh - 58px) !important;
    min-width: 0 !important;
    min-height: 380px !important;
    max-width: 96vw !important;
    max-height: calc(100dvh - 58px) !important;
    border-radius: 7px !important;
  }#win-doom.doom-window.maximized,#win-pinball.pinball-window.maximized{
    left: 2px !important;
    top: 2px !important;
    width: calc(100vw - 4px) !important;
    height: calc(100dvh - 46px) !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }#win-solitaire.solitaire-window{
    left: 2vw !important;
    top: 3vh !important;
    width: 96vw !important;
    height: calc(100dvh - 62px) !important;
    min-width: 0 !important;
    min-height: 430px !important;
    max-width: 96vw !important;
    max-height: calc(100dvh - 58px) !important;
  }}#desktop #win-buscaminas.window:not(.maximized){
  width: var(--mine-window-w,min(760px,96vw)) !important;
  height: var(--mine-window-h,auto) !important;
  aspect-ratio: 4/3 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: calc(100vw - 8px) !important;
  max-height: calc(100dvh - 50px) !important;
}@media (pointer:coarse),(max-width:900px) {#desktop #win-buscaminas.window:not(.maximized){
    left: 2vw !important;
    top: 3vh !important;
    width: 96vw !important;
  }}@media (pointer: coarse), (max-width: 900px) {#win-doom.doom-window,#win-doom.doom-window.maximized{
    height: calc(100dvh - 42px) !important;
    max-height: calc(100dvh - 42px) !important;
  }}@media (max-width:520px) {#win-solitaire.solitaire-window{
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:calc(100dvh - 46px) !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }}@media (max-width:520px) {#desktop #win-buscaminas.window:not(.maximized){
    left: 1vw !important;
    top: 2px !important;
    width: 98vw !important;
    height: calc(100dvh - 46px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 98vw !important;
    max-height: calc(100dvh - 46px) !important;
    aspect-ratio: auto !important;
  }}@media (max-width:520px) and (orientation:portrait) {#desktop #win-buscaminas.window:not(.maximized){
    height:auto !important;
    max-height:calc(100dvh - 46px) !important;
  }}

/* ============================================================
   EL AXEL · V3 · ajustes tras separar juegos
   ============================================================ */

/* Los juegos externos se ocultan sin destruir el viewport del iframe.
   Esto evita que WebGL/SDL vuelva desde 0×0 con pantalla negra. */
.external-game-window.external-minimized {
  display:flex !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:none !important;
}

/* Buscaminas ya no usa la vieja proporción 4:3 de la ventana completa.
   El tablero es cuadrado y necesita una ventana algo más vertical. */
#desktop #win-buscaminas.window:not(.maximized) {
  width:min(600px,calc(100vw - 20px)) !important;
  height:min(760px,calc(100dvh - 54px)) !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:calc(100vw - 8px) !important;
  max-height:calc(100dvh - 50px) !important;
  aspect-ratio:auto !important;
}

/* DOOM y Pinball conservan espacio inferior suficiente para sus CTA en PC. */
@media (pointer:fine) and (min-width:901px) {
  #win-doom.doom-window {
    width:min(900px,calc(100vw - 24px)) !important;
    height:min(920px,calc(100dvh - 54px)) !important;
  }

  #win-pinball.pinball-window {
    width:min(880px,calc(100vw - 24px)) !important;
    height:min(900px,calc(100dvh - 54px)) !important;
  }
}

@media (pointer:coarse), (max-width:900px) {
  #desktop #win-buscaminas.window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
    aspect-ratio:auto !important;
  }

  /* Pinball ya ocupa prácticamente toda la pantalla en móvil.
     Ocultamos maximizar, que no aporta espacio real y era una fuente de
     redimensionados innecesarios para WebGL. Minimizar y cerrar permanecen. */
  #win-pinball .btn-max {
    display:none !important;
  }

  /* Acerca de y FAQ: ventana completa útil + texto más compacto.
     Sin scroll en la propia ventana. */
  #win-sobre-mi,
  #win-testimonios {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
  }

  #win-sobre-mi .about-body,
  #win-testimonios .faq-body {
    overflow:hidden !important;
    min-height:0 !important;
  }

  #win-sobre-mi .about-body {
    padding:5px 9px 8px !important;
    font-size:clamp(9.5px,2.55vw,11.5px) !important;
    line-height:1.27 !important;
  }

  #win-sobre-mi .about-lang-row {
    position:static !important;
    margin:-2px 0 1px !important;
    padding:0 !important;
  }

  #win-sobre-mi .about-lang-btn {
    height:19px !important;
    min-width:31px !important;
    padding:1px 6px !important;
    font-size:9px !important;
  }

  #win-sobre-mi .about-copy h2 {
    margin:0 0 5px !important;
    font-size:15px !important;
  }

  #win-sobre-mi .about-copy p {
    margin:0 0 6px !important;
  }

  #win-sobre-mi .about-lead {
    font-size:clamp(10px,2.7vw,12px) !important;
    line-height:1.25 !important;
  }

  #win-sobre-mi .about-cta {
    margin-top:5px !important;
    padding:7px 8px !important;
  }

  #win-sobre-mi .about-cta strong {
    font-size:11px !important;
  }

  #win-sobre-mi .about-cta p {
    margin:2px 0 5px !important;
  }

  #win-sobre-mi .about-cta .xp-button {
    min-height:31px !important;
    padding:5px 8px !important;
    font-size:10px !important;
  }

  #win-testimonios .faq-body {
    padding:6px 9px 8px !important;
    font-size:clamp(8.7px,2.32vw,10.5px) !important;
    line-height:1.18 !important;
  }

  #win-testimonios .faq-body h2 {
    margin:0 0 6px !important;
    font-size:15px !important;
  }

  #win-testimonios .faq-body p {
    margin:0 0 5px !important;
    line-height:1.18 !important;
  }

  #win-testimonios .faq-body p strong:first-child {
    font-size:clamp(9px,2.42vw,10.8px) !important;
  }

  #win-testimonios .faq-body .xp-button {
    min-height:29px !important;
    margin-top:1px !important;
    padding:4px 8px !important;
    font-size:9.5px !important;
  }
}


/* ============================================================
   EL AXEL · JUEGOS V6 · GEOMETRÍA FINAL POR DISPOSITIVO
   La ventana reserva espacio real para header + iframe + taskbar.
   ============================================================ */

/* PC */
@media (min-width:1025px) and (pointer:fine) {
  #win-doom.doom-window:not(.maximized) {
    width:min(900px,calc(100vw - 32px)) !important;
    height:min(820px,calc(100dvh - 58px)) !important;
  }
  #win-pinball.pinball-window:not(.maximized) {
    width:min(900px,calc(100vw - 32px)) !important;
    height:min(820px,calc(100dvh - 58px)) !important;
  }
  #win-solitaire.solitaire-window:not(.maximized) {
    width:min(900px,calc(100vw - 32px)) !important;
    height:min(740px,calc(100dvh - 58px)) !important;
  }
  #desktop #win-buscaminas.window:not(.maximized) {
    width:min(620px,calc(100vw - 32px)) !important;
    height:min(700px,calc(100dvh - 58px)) !important;
  }
}

/* Tablet */
@media (min-width:601px) and (max-width:1024px) {
  #win-doom.doom-window:not(.maximized),
  #win-pinball.pinball-window:not(.maximized) {
    left:4vw !important;
    top:2vh !important;
    width:92vw !important;
    height:min(850px,calc(100dvh - 58px)) !important;
    max-width:92vw !important;
    max-height:calc(100dvh - 58px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #win-solitaire.solitaire-window:not(.maximized) {
    left:4vw !important;
    top:2vh !important;
    width:92vw !important;
    height:min(780px,calc(100dvh - 58px)) !important;
    max-width:92vw !important;
    max-height:calc(100dvh - 58px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #desktop #win-buscaminas.window:not(.maximized) {
    left:8vw !important;
    top:2vh !important;
    width:84vw !important;
    height:min(740px,calc(100dvh - 58px)) !important;
    max-width:84vw !important;
    max-height:calc(100dvh - 58px) !important;
  }
}

/* Móvil */
@media (max-width:600px) {
  #win-doom.doom-window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(930px,calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #win-pinball.pinball-window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(820px,calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #win-solitaire.solitaire-window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(760px,calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #desktop #win-buscaminas.window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(720px,calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
}

/* Paint owns text entry instead of delegating it to a native prompt. */
.paint-text-dialog {
  width:min(92vw,420px);
  max-height:calc(100dvh - 32px);
  padding:0;
  overflow:hidden;
  color:#111;
  background:#ece9d8;
  border:3px solid #0054e3;
  border-radius:8px 8px 3px 3px;
  box-shadow:7px 9px 28px rgba(0,0,0,.55);
  font:12px Tahoma,sans-serif;
}

.paint-text-dialog::backdrop {
  background:rgba(3,15,45,.5);
}

.paint-text-dialog form {
  display:flex;
  flex-direction:column;
  min-height:190px;
}

.paint-text-dialog-titlebar {
  min-height:29px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:3px 4px 4px 7px;
  color:#fff;
  background:linear-gradient(90deg,#0054e3,#1686f1 54%,#0055d7);
  border-bottom:1px solid #003aa0;
  text-shadow:1px 1px #0b3488;
}

.paint-text-dialog-titlebar button {
  width:23px;
  height:21px;
  flex:0 0 auto;
  border:1px solid #fff;
  border-radius:3px;
  color:#fff;
  background:linear-gradient(#ed6b52,#c52d18);
  box-shadow:inset 0 0 0 1px #9b1d0e;
  font:bold 13px/1 Tahoma,sans-serif;
}

.paint-text-dialog-body {
  flex:1;
  padding:18px 18px 12px;
}

.paint-text-dialog-body label {
  display:block;
  margin-bottom:6px;
  font-weight:bold;
}

.paint-text-dialog-body input {
  width:100%;
  min-height:34px;
  padding:5px 7px;
  color:#111;
  background:#fff;
  border:2px solid;
  border-color:#716f64 #fff #fff #716f64;
  font:14px Tahoma,sans-serif;
}

.paint-text-dialog-body input:focus-visible {
  outline:3px solid #f4a024;
  outline-offset:2px;
}

.paint-text-dialog-body p {
  margin:8px 0 0;
  color:#4b4b4b;
  line-height:1.4;
}

.paint-text-dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:9px 12px 12px;
}

.paint-text-dialog-actions button {
  min-width:82px;
  min-height:32px;
  padding:5px 12px;
  color:#111;
  background:#ece9d8;
  border:2px solid;
  border-color:#fff #716f64 #716f64 #fff;
  font:bold 11px Tahoma,sans-serif;
}

.paint-text-dialog-actions button.primary {
  color:#fff;
  background:linear-gradient(#3477e8,#174fb8);
  border-color:#78a7f3 #082e80 #082e80 #78a7f3;
}

@media (max-width:480px) {
  .paint-text-dialog-actions {
    flex-direction:column-reverse;
  }

  .paint-text-dialog-actions button {
    width:100%;
    min-height:42px;
  }
}

/* ============================================================
   EL AXEL · CREATIVE STUDIO V15
   The XP desktop remains the product shell; the first IE window
   embeds the focused commercial experience and owns one scroller.
   ============================================================ */
html,
body {
  scrollbar-color:#7b8190 #d4d0c8;
  scrollbar-width:auto;
}

@media (forced-colors:active) {
  html,
  body {
    scrollbar-color:auto;
  }
}

.desktop-icon:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 2px #123f8e;
}

.start-menu button.menu-item {
  width:100%;
  margin:0;
  appearance:none;
  background:transparent;
  text-align:left;
}

.start-menu button.menu-item:focus-visible {
  outline:2px solid #f4a024;
  outline-offset:-2px;
  background:#316ac5;
  color:#fff;
}

.start-menu button.menu-item:focus-visible small {
  color:#fff;
}

button.start-footer-button {
  margin:0;
  padding:4px 6px;
  color:inherit;
  background:transparent;
  border:0;
  appearance:none;
}

button.start-footer-button:focus-visible {
  outline:2px solid #fff;
  outline-offset:1px;
}

.xp-window-page-title {
  min-width:0;
  margin:0;
  overflow:hidden;
  color:inherit;
  font:inherit;
  text-overflow:ellipsis;
  text-shadow:inherit;
  white-space:nowrap;
}

#win-mi-pc .demo-frame-shell {
  position:relative;
  display:block;
  overflow:hidden;
  background:#f4f7fd;
}

#win-mi-pc .elaxel-demo-frame {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#f4f7fd;
}

.portfolio-intro {
  max-width:760px;
  color:#4a4a4a;
}

.portfolio-grid {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(220px,.75fr);
  gap:12px;
  margin-top:12px;
}

.portfolio-card,
.portfolio-side {
  min-width:0;
  padding:16px;
  border:1px solid #8da6cf;
  background:#fff;
  box-shadow:inset 0 0 0 1px #e7eef9, 3px 3px 0 rgba(36,94,219,.12);
}

.portfolio-card-featured {
  color:#fff;
  border-color:#123f8e;
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),transparent 44%),
    linear-gradient(145deg,#0f397f,#245edb 72%,#1686f1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 4px 4px 0 #f4a024;
}

.portfolio-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.portfolio-badge {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 7px;
  color:#0d2d68;
  background:#fff3b4;
  border:1px solid #f4a024;
  font:bold 9px/1.2 "Lucida Console",monospace;
  letter-spacing:.04em;
}

.portfolio-badge.neutral {
  color:#17479e;
  background:#e8f0ff;
  border-color:#a8c0e8;
}

.portfolio-mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  color:#123f8e;
  background:#fff;
  border:2px solid #f4a024;
  border-radius:50%;
  font:bold 13px Tahoma,sans-serif;
}

.portfolio-type {
  margin:14px 0 5px !important;
  color:#d9e9ff;
  font:bold 9px/1.35 "Lucida Console",monospace;
  letter-spacing:.06em;
}

.portfolio-card h3,
.portfolio-side h3 {
  margin:0 0 7px;
  color:inherit;
  font:bold 22px/1.1 "Trebuchet MS",Tahoma,sans-serif;
}

.portfolio-card p,
.portfolio-side p {
  margin:0 0 10px;
  line-height:1.5;
}

.portfolio-card ul {
  margin:10px 0 14px;
  padding-left:18px;
  line-height:1.5;
}

.portfolio-current {
  display:inline-flex;
  padding:6px 8px;
  color:#102f68;
  background:#fff;
  border:1px solid #f4a024;
  font-weight:bold;
}

.portfolio-side {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:linear-gradient(#fff,#f3f7fd);
}

.portfolio-side h3 {
  margin-top:12px;
  color:#17479e;
  font-size:18px;
}

.portfolio-tags {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:2px 0 14px;
}

.portfolio-tags span {
  padding:4px 6px;
  color:#27354c;
  background:#e8eef8;
  border:1px solid #c5d2e8;
  font-size:10px;
}

.portfolio-side .xp-button {
  margin-top:auto;
}

@media (max-width:700px) {
  /* The inline desktop geometry is intentionally overridden on phones. */
  #desktop #win-mi-pc.initial-window {
    left:2px !important;
    top:2px !important;
    width:calc(100% - 4px) !important;
    height:calc(100dvh - 46px) !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  .portfolio-grid {
    grid-template-columns:1fr;
  }

  .portfolio-card,
  .portfolio-side {
    padding:12px;
  }
}

@supports not (height:100dvh) {
  @media (max-width:700px) {
    /* Fallback for older mobile engines without dynamic viewport units. */
    #desktop #win-mi-pc.initial-window {
      height:calc(100vh - 46px) !important;
    }
  }
}

/* Maximizado: jamás pisa la taskbar */
#desktop #win-doom.maximized,
#desktop #win-pinball.maximized,
#desktop #win-solitaire.maximized,
#desktop #win-buscaminas.maximized {
  left:2px !important;
  top:2px !important;
  width:calc(100% - 4px) !important;
  height:calc(100% - 44px) !important;
  max-width:none !important;
  max-height:none !important;
}


/* ============================================================
   EL AXEL · PC FIX V7
   PC is determined by the top-level viewport. Child iframes may
   be <900px wide and must NOT switch themselves to mobile UI.
   ============================================================ */
@media (min-width:1025px) {
  #win-doom.doom-window:not(.maximized) {
    width:min(920px,calc(100vw - 32px)) !important;
    height:min(800px,calc(100dvh - 58px)) !important;
    min-width:720px !important;
    min-height:600px !important;
  }
  #win-pinball.pinball-window:not(.maximized) {
    width:min(920px,calc(100vw - 32px)) !important;
    height:min(800px,calc(100dvh - 58px)) !important;
    min-width:720px !important;
    min-height:600px !important;
  }
  #win-solitaire.solitaire-window:not(.maximized) {
    width:min(920px,calc(100vw - 32px)) !important;
    height:min(720px,calc(100dvh - 58px)) !important;
    min-width:720px !important;
    min-height:560px !important;
  }
  #desktop #win-buscaminas.window:not(.maximized) {
    width:min(600px,calc(100vw - 32px)) !important;
    height:min(700px,calc(100dvh - 58px)) !important;
    min-width:520px !important;
    min-height:580px !important;
  }
}


/* ============================================================
   EL AXEL · MOBILE FIX V8
   Sólo modifica geometría de las ventanas en móvil real.
   PC/tablet quedan con las reglas anteriores.
   ============================================================ */
@media (max-width:600px) {
  #desktop #win-buscaminas.window:not(.maximized) {
    height:min(615px,calc(100dvh - 46px)) !important;
    max-height:min(615px,calc(100dvh - 46px)) !important;
  }

  #desktop #win-solitaire.window:not(.maximized) {
    height:min(555px,calc(100dvh - 46px)) !important;
    max-height:min(555px,calc(100dvh - 46px)) !important;
  }

  #desktop #win-doom.window:not(.maximized) {
    height:min(860px,calc(100dvh - 46px)) !important;
    max-height:calc(100dvh - 46px) !important;
  }

  #desktop #win-pinball.window:not(.maximized) {
    height:min(850px,calc(100dvh - 46px)) !important;
    max-height:calc(100dvh - 46px) !important;
  }
}


/* ============================================================
   EL AXEL · MOBILE FIX V9
   Sólo móvil. No modifica PC/tablet.
   ============================================================ */
@media (max-width:600px) {
  /* Maximizar Buscaminas en un teléfono alto no debe convertirlo en una
     sábana beige. Expande a todo el ancho, pero conserva un alto útil. */
  #desktop #win-buscaminas.window.maximized {
    left:2px !important;
    top:2px !important;
    width:calc(100% - 4px) !important;
    height:min(650px,calc(100% - 44px)) !important;
    max-width:none !important;
    max-height:calc(100% - 44px) !important;
  }
}

@media (max-width:600px) {
  /* DOOM móvil: incluso al maximizar, usa un alto calculado desde el ancho
     del viewport + controles. Así el área 4:3 no necesita letterboxing. */
  #desktop #win-doom.window:not(.maximized),
  #desktop #win-doom.window.maximized {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(calc(73.5vw + 336px),calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:calc(100dvh - 46px) !important;
  }
}

/* ============================================================
   EL AXEL · MOBILE FIX V10 · tamaños fijos y ventanas limpias
   Sólo móvil real. PC y tablet quedan intactos.
   ============================================================ */
@media (max-width:600px) {
  /* DOOM y Pinball corren siempre maximizados en móvil. */
  #desktop #win-doom.window,
  #desktop #win-pinball.window {
    left:2px !important;
    top:2px !important;
    width:calc(100% - 4px) !important;
    height:calc(100% - 44px) !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #win-doom .btn-max,
  #win-pinball .btn-max {
    display:none !important;
  }

  /* Solitario normal: exactamente lo que necesita su contenido, sin franja verde inferior. */
  #desktop #win-solitaire.window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(484px,calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:min(484px,calc(100dvh - 46px)) !important;
    min-width:0 !important;
    min-height:0 !important;
  }

  /* Buscaminas móvil: tamaño fijo. Maximizar no aporta nada en vertical. */
  #desktop #win-buscaminas.window:not(.maximized) {
    left:1vw !important;
    top:2px !important;
    width:98vw !important;
    height:min(540px,calc(100dvh - 46px)) !important;
    max-width:98vw !important;
    max-height:min(540px,calc(100dvh - 46px)) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
  #win-buscaminas .btn-max {
    display:none !important;
  }

  /* Mis trabajos: el menubar estaba siendo empujado 8px hacia arriba por el inline original. */
  #win-trabajos .xp-menubar {
    margin:-4px -12px 10px !important;
  }

  /* FAQ: aprovechamos el espacio libre en vez de miniaturizar el texto. */
  #win-testimonios .faq-body {
    padding:8px 10px 10px !important;
    font-size:clamp(10.4px,2.78vw,12px) !important;
    line-height:1.22 !important;
  }
  #win-testimonios .faq-body h2 {
    margin:0 0 8px !important;
    font-size:18px !important;
    line-height:1.08 !important;
  }
  #win-testimonios .faq-body p {
    margin:0 0 7px !important;
    line-height:1.2 !important;
  }
  #win-testimonios .faq-body p strong:first-child {
    font-size:clamp(10.8px,2.9vw,12.4px) !important;
  }
  #win-testimonios .faq-body .xp-button {
    min-height:34px !important;
    margin-top:2px !important;
    padding:6px 9px !important;
    font-size:11px !important;
  }
}


/* ============================================================
   EL AXEL · MOBILE POLISH V11
   Sólo móvil. No altera tablet/PC.
   ============================================================ */
@media (max-width:600px) {
  /* Solitario: quita los últimos píxeles verdes que quedaban bajo el CTA. */
  #desktop #win-solitaire.window:not(.maximized) {
    height:min(475px,calc(100dvh - 46px)) !important;
    max-height:min(475px,calc(100dvh - 46px)) !important;
  }

  /* DOOM: ancho completo pero alto calculado desde su pantalla 4:3 + mandos + CTA.
     Así el iframe no crea un gran bloque negro sobrante. */
  #desktop #win-doom.window,
  #desktop #win-doom.window.maximized {
    left:2px !important;
    top:2px !important;
    width:calc(100% - 4px) !important;
    height:min(calc(73.5vw + 322px),calc(100dvh - 46px)) !important;
    max-width:none !important;
    max-height:calc(100dvh - 46px) !important;
    min-width:0 !important;
    min-height:0 !important;
  }
}


/* ===== EL AXEL 4.1 · rendimiento sin cambiar la estética ===== */
/* Ventanas cerradas no participan en layout/paint hasta que se abren. */
.window[style*="display:none"] {
  content-visibility:hidden;
  contain:layout style paint;
}

/* El iframe principal queda aislado del resto del escritorio. */
.demo-frame-shell {
  contain:layout paint;
}

/* Evita trabajo de pintura fuera del viewport en menús y overlays cerrados. */
#startMenu:not(.open),
#axelMsnToast:not(.msn-visible),
.agefake-overlay[hidden] {
  content-visibility:hidden;
}

@media (prefers-reduced-motion: reduce) {
  .xp-welcome, .xp-welcome * { animation:none !important; transition:none !important; }
}


/* ============================================================
   EL AXEL v4.4 · PINBALL BLOQUEADO EN MAXIMIZADO
   Sólo queda Cerrar. La ventana no puede minimizarse/restaurarse.
   ============================================================ */
#win-pinball .window-controls .btn-min,
#win-pinball .window-controls .btn-max{
  display:none !important;
}
#desktop #win-pinball.pinball-window.maximized{
  left:2px !important;
  top:2px !important;
  width:calc(100% - 4px) !important;
  height:calc(100% - 44px) !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:0 !important;
}

/* ============================================================
   AJUSTES DE INTERFAZ (capa de overrides)
   Agrupación de iconos, menú Inicio, accesibilidad, taskbar
   móvil, barra de IE compacta, scroll y legibilidad en móvil.
   ============================================================ */

/* D1 · Agrupar los iconos del escritorio por tipo (solo desktop) */
@media (min-width: 701px){
  .desktop-icons{ gap: 6px 10px; }
  .desktop-icons .desktop-icon:nth-child(1){ order: 1; }  /* Internet Explorer */
  .desktop-icons .desktop-icon:nth-child(2){ order: 2; }  /* Mis trabajos */
  .desktop-icons .desktop-icon:nth-child(7){ order: 3; margin-top: 16px; } /* Correo */
  .desktop-icons .desktop-icon:nth-child(8){ order: 4; }  /* WhatsApp */
  .desktop-icons .desktop-icon:nth-child(9){ order: 5; }  /* Acerca de */
  .desktop-icons .desktop-icon:nth-child(10){ order: 6; } /* Preguntas */
  .desktop-icons .desktop-icon:nth-child(3){ order: 7; margin-top: 16px; } /* Paint */
  .desktop-icons .desktop-icon:nth-child(4){ order: 8; }  /* Bloc de notas */
  .desktop-icons .desktop-icon:nth-child(5){ order: 9; }  /* AXELAMP */
  .desktop-icons .desktop-icon:nth-child(6){ order: 10; } /* Media Player */
  .desktop-icons .desktop-icon:nth-child(11){ order: 11; margin-top: 16px; } /* Buscaminas */
  .desktop-icons .desktop-icon:nth-child(12){ order: 12; } /* DOOM */
  .desktop-icons .desktop-icon:nth-child(13){ order: 13; } /* Pinball */
  .desktop-icons .desktop-icon:nth-child(14){ order: 14; } /* Solitario */
  .desktop-icons .desktop-icon:nth-child(15){ order: 15; } /* Age of Empires */
}

/* D3 · Foco visible claro en los iconos del escritorio */
.desktop-icon:focus-visible{
  outline: 2px solid #ff8a34 !important;
  outline-offset: -1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* D2 · Menú Inicio con scroll cómodo en pantallas bajas */
@media (max-width: 700px){
  .start-menu{
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== ESCRITORIO MÓVIL · accesos de contacto en la esquina superior derecha ===== */
@media (max-width: 768px){
  /* Altura estable: evita que los nombres largos desplacen los iconos. */
  .desktop-icons > .desktop-icon{
    height:74px;
    min-height:74px;
    box-sizing:border-box;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding:4px 2px !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }
  .desktop-icons > .desktop-icon > .icon-img{
    flex:0 0 32px;
    width:32px;
    height:32px;
    margin-top:0;
    margin-bottom:2px;
  }
  .desktop-icons > .desktop-icon > .icon-img img,
  .desktop-icons > .desktop-icon > .icon-img svg{
    width:32px;
    height:32px;
  }
  .desktop-icons > .desktop-icon > span:last-child{
    flex:0 0 auto;
  }

  .desktop-icons{
    position:relative;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:flex-start;
    overflow:hidden;
    row-gap:2px;
  }
  .desktop-icons > .desktop-icon.desktop-action[data-action="email"]{
    position:absolute;
    top:8px;
    right:8px;
    z-index:2;
    order:-1;
    margin-left:auto;
  }
  .desktop-icons > .desktop-icon.desktop-action[data-action="whatsapp"]{
    position:absolute;
    top:76px;
    right:8px;
    z-index:2;
    order:-1;
    margin-left:auto;
  }
  .desktop-icons > .desktop-icon[data-window="win-sobre-mi"]{
    position:absolute;
    top:144px;
    right:8px;
    z-index:2;
    order:-1;
    margin-left:auto;
  }
}

/* D4 · Barra de tareas móvil estable (hora y bandeja siempre visibles) */
@media (max-width: 700px){
  .taskbar{ display: flex; align-items: stretch; }
  .taskbar .start-btn{ flex: 0 0 auto; }
  .taskbar .task-items{ flex: 1 1 auto; min-width: 0; }
  .taskbar .system-tray{ flex: 0 0 auto; }
}

/* L1 · Barra de IE compacta en pantallas muy pequeñas */
@media (max-width: 520px){
  #win-mi-pc .xp-menubar{ display: none !important; }
  #win-mi-pc .xp-toolbar{ min-height: 30px !important; padding: 1px 4px !important; }
  #win-mi-pc .xp-addressbar{ padding: 2px 4px !important; }
}

/* C1 · Scroll interno cómodo en las ventanas de contenido (móvil) */
@media (max-width: 700px){
  #win-sobre-mi .about-body,
  #win-testimonios .faq-body,
  #win-trabajos .window-body,
  #win-contacto .contact-body,
  #win-notepad .notepad-body{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* C2 · Legibilidad de textos en las ventanas de contenido (móvil) */
@media (max-width: 700px){
  #win-sobre-mi .about-body,
  #win-testimonios .faq-body,
  #win-trabajos .window-body,
  #win-contacto .contact-body{
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ============================================================
   ANIMACIONES DE VENTANAS (estilo Windows XP)
   Opacas, con escalado hacia/desde la barra de tareas y rápidas.
   ============================================================ */
@keyframes elaxel-win-in {
  from { transform: scale(.9); }
  to   { transform: scale(1); }
}
.window-anim-in{
  animation: elaxel-win-in 150ms cubic-bezier(.2,.8,.25,1);
  transform-origin: 50% 100%; /* "crece" desde la barra de tareas */
  will-change: transform;
}

@keyframes elaxel-win-out {
  from { transform: scale(1); }
  to   { transform: scale(.88); opacity: 0; }
}
.window-anim-out{
  animation: elaxel-win-out 140ms cubic-bezier(.4,0,1,1) forwards;
  transform-origin: 50% 100%; /* "se encoge" hacia la barra de tareas */
  pointer-events: none;
  will-change: transform, opacity;
}

/* ============================================================
   MINIMIZAR / RESTAURAR estilo Windows XP
   La ventana se encoge hacia su botón de la barra de tareas.
   ============================================================ */
@keyframes elaxel-min {
  to { transform: scale(.06); opacity: 0; }
}
.window-minimizing{
  animation: elaxel-min 195ms cubic-bezier(.55,0,.8,.35) forwards;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes elaxel-restore {
  from { transform: scale(.06); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.window-restoring{
  animation: elaxel-restore 195ms cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce){
  .window-anim-in,
  .window-anim-out,
  .window-minimizing,
  .window-restoring{
    animation: none !important;
  }
}

/* ============================================================
   MAXIMIZAR AL MÁXIMO
   La ventana inicial (IE) tenía max-width:94vw / max-height:78vh
   que la frenaba al maximizar. Al maximizar llenamos el viewport
   (ancho completo, arriba a la izquierda, restando la barra de tareas).
   ============================================================ */
#desktop .window.maximized{
  width: 100vw !important;
  height: calc(100vh - 42px) !important;
  top: 0 !important;
  left: 0 !important;
  max-width: 100vw !important;
  max-height: calc(100vh - 42px) !important;
  border-radius: 0 !important;
}
#desktop #win-mi-pc.initial-window.maximized{
  width: 100vw !important;
  height: calc(100vh - 42px) !important;
  top: 0 !important;
  left: 0 !important;
  max-width: 100vw !important;
  max-height: calc(100vh - 42px) !important;
}

/* Tableta / móvil: maximizar de borde a borde (deja visible la barra de tareas). */
@media (pointer: coarse), (max-width: 900px){
  #desktop .window.maximized:not(.doom-window):not(.pinball-window):not(.external-game-window){
    width: 100vw !important;
    height: calc(100dvh - 42px) !important;
    max-width: 100vw !important;
    max-height: calc(100dvh - 42px) !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   BOTÓN "MOSTRAR ESCRITORIO" (tira fina al extremo derecho,
   como en Windows XP) y CONTROLES DE VENTANA más limpios.
   ============================================================ */
.show-desktop-btn{
  width: 20px;
  height: 100%;
  flex: 0 0 auto;
  margin-left: 2px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.15);
}
.show-desktop-btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10));
}
.show-desktop-btn::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 8px;
  transform: translate(-50%,-50%);
  border: 1px solid #fff;
  border-radius: 1px;
  box-shadow: inset 0 1px rgba(255,255,255,.6);
  background: linear-gradient(180deg, #f9fbfe, #cfe0f5);
}
.show-desktop-btn::before{
  content: "";
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 2px;
  width: 3px;
  height: 3px;
  transform: translateX(-50%);
  border: 1px solid #fff;
  border-top: 0;
}

/* Hover de los botones de control: azul XP iluminado (no caja beige). */
.window-controls button:hover{
  background: linear-gradient(180deg, #4c93ef, #1a66d6);
  filter: brightness(1.05);
}
/* Icono "restaurar": dos ventanas con interior claro (no bloque azul). */
.window-controls .btn-max.restore-icon::after{
  background: #bcd6f2;
  box-shadow: 1px 1px 0 rgba(0,0,0,.18);
}
/* Iconos min/max más nítidos. */
.window-controls .btn-max::before{
  background: rgba(255,255,255,.15);
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* ===== EL AXEL · BOTONES XP ORIGINALES ===== */
.window-controls button.btn-min,
.window-controls button.btn-max,
.window-controls button.btn-close{
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  border:0 !important;
  filter:none !important;
}
.window-controls button.btn-min{background-image:url('../icons/Minimize.webp') !important}
.window-controls button.btn-max{background-image:url('../icons/Restore.webp') !important}
.window-controls button.btn-close{background-image:url('../icons/Exit.webp') !important}
.window-controls button.btn-min::before,
.window-controls button.btn-max::before,
.window-controls button.btn-max::after,
.window-controls button.btn-close::before,
.window-controls button.btn-close::after{display:none !important}

/* Buscaminas conserva siempre su tamaño compacto XP: sin maximizar. */
#desktop #win-buscaminas .window-controls .btn-max{
  display:none !important;
}
#desktop #win-buscaminas.maximized{
  width:352px !important;
  height:512px !important;
  max-width:calc(100vw - 16px) !important;
  max-height:calc(100vh - 40px) !important;
}

/* ===== EL AXEL · BARRAS DE VENTANA A JUEGO CON LOS BOTONES XP ===== */
#desktop .window:not(#win-winamp) > .window-header{
  background:linear-gradient(180deg,#3c8cf1 0%,#176fda 48%,#0755c2 100%) !important;
  border-bottom:1px solid #06459e !important;
  text-shadow:1px 1px 0 rgba(0,38,104,.7);
}
#desktop .window:not(#win-winamp):not(.active-window) > .window-header{
  background:linear-gradient(180deg,#4f8ed8 0%,#2e69b5 48%,#1c4e93 100%) !important;
}

/* Marco exterior azul XP, a juego con los botones originales. */
#desktop .window:not(#win-winamp){
  border:3px solid #0757c7 !important;
  outline:1px solid #2f83ed !important;
  box-shadow:0 0 0 1px #8bc0ff,2px 4px 12px rgba(0,28,90,.48) !important;
}

/* ============================================================
   AXELAMP · skin clásico Winamp (webamp.org) · reconstruido
   Tres ventanas (Principal, Ecualizador, Playlist) con la estética
   Winamp 2.x: pizarra oscura, pantalla LED verde, sliders amarillos
   y playlist verde sobre negro.
   ============================================================ */
#win-winamp{
  background:#33353c;
  border-color:#6a707c #000 #000 #6a707c;
  box-shadow:3px 4px 16px rgba(0,0,0,.5);
}
#win-winamp .window-header{
  background:linear-gradient(90deg,#3f4552,#5a6a85 45%,#3f4552);
  border-color:#0b0d12;
  color:#d9e1ec;
}
#win-winamp .window-header .title,
#win-winamp .window-header .title *{ color:#e6edf7; text-shadow:1px 1px #000; }
.winamp-body{
  background:#1a1c22;
  color:#baff29;
  border-color:#5a5f6a #05060a #05060a #5a5f6a;
  padding:5px;
  scrollbar-color:#5c626e #14161c;
}

/* --- Cada ventana del skin --- */
.winamp-win{
  position:relative;
  margin-bottom:5px;
  background:#3a3d45;
  border:1px solid #54585f;
  box-shadow:inset 1px 1px 0 #4d515a, 1px 2px 3px rgba(0,0,0,.5);
}
.winamp-titlebar{
  height:15px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 5px;
  background:linear-gradient(180deg,#6a6f7a,#3a3e46 55%,#2c2f36);
  border-bottom:1px solid #191b20;
  color:#d7dce4;
  font:700 9px/1 Tahoma,Arial,sans-serif;
  letter-spacing:1px;
  text-shadow:1px 1px #000;
  cursor:default;
}
.winamp-win-title{ flex:1; text-align:center; letter-spacing:2px; }
.winamp-wt{
  font:900 11px/1 "Arial Black",Arial,sans-serif;
  color:#e8ecf3;
  letter-spacing:-2px;
  text-shadow:1px 1px #000;
  transform:skewX(-8deg);
}
.winamp-wt span{ color:#e8c62a; }
.winamp-win-btns{ display:flex; gap:3px; }
.winamp-win-btns i{
  width:11px; height:10px;
  display:flex; align-items:center; justify-content:center;
  font:700 7px/1 Tahoma,sans-serif; font-style:normal;
  color:#e6ecf4; background:#3f444d;
  border:1px solid #20232a;
  box-shadow:inset 0 1px 0 #58606c;
}

/* --- Pantalla LED principal --- */
.winamp-display{
  display:flex;
  gap:6px;
  padding:6px 6px 3px;
  background:#000;
}
.winamp-display-left{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding-top:2px;
}
.winamp-time{
  color:#baff29;
  font:bold 24px/1 "Courier New",monospace;
  letter-spacing:-2px;
  text-shadow:0 0 5px #70a900;
  white-space:nowrap;
}
.winamp-led{
  width:34px; height:12px;
  background:linear-gradient(180deg,#0f2a00,#052000);
  border:1px solid #000;
  box-shadow:inset 0 0 6px #000;
}
.winamp-led::after{
  content:"";
  display:block;
  width:5px; height:5px;
  margin:3px auto 0;
  background:#baff29;
  box-shadow:0 0 4px #7fc900;
}
.winamp-display-right{ flex:1; min-width:0; }
.winamp-marquee{
  height:14px;
  overflow:hidden;
  white-space:nowrap;
  color:#baff29;
  font:bold 8px/14px "Courier New",monospace;
  border-bottom:1px solid #0d1a02;
}
.winamp-marquee span{ display:inline-block; padding-left:100%; animation:winampScroll 12s linear infinite; }
.winamp-meta{
  display:flex;
  align-items:center;
  gap:7px;
  margin:4px 0 2px;
  color:#8d9a6a;
  font:bold 7px/1 Tahoma,sans-serif;
}
.winamp-meta b{ color:#c9d5a0; }
.winamp-state{ color:#baff29; font-size:9px; }
.winamp-stereo{ margin-left:auto; color:#baff29; }
#winampVisualizer{ display:block; width:100%; height:47px; background:#02030a; image-rendering:pixelated; }

/* --- Seek --- */
.winamp-seek-row{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 6px;
  color:#b7c0cc;
  font:bold 8px Tahoma,sans-serif;
  background:#000;
}
.winamp-seek-row input{ flex:1; min-width:0; accent-color:#baff29; }

/* --- Controles --- */
.winamp-controls-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 6px;
  background:linear-gradient(180deg,#494d55,#33363d);
}
.winamp-transport{ display:flex; gap:2px; flex:1; }
.winamp-transport button{
  width:21px; height:19px;
  padding:0;
  background:linear-gradient(180deg,#6c7079,#3c4047 55%,#262a30);
  border:1px solid #1c1f25;
  box-shadow:inset 0 1px 0 #7a7f88;
  color:#e6ecf4;
  font:bold 9px/1 Tahoma,sans-serif;
  cursor:pointer;
}
.winamp-transport button:active{
  background:#2c3037;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
  transform:translate(1px,1px);
}
#winampPlay{
  width:29px; height:23px;
  color:#0f2a00;
  background:linear-gradient(180deg,#d8ff90,#9be23f 48%,#5a9d0a 100%);
  border:1px solid #1c4d00;
  box-shadow:0 0 0 1px #111,0 0 7px rgba(159,235,51,.6),inset 0 1px rgba(255,255,255,.6);
  font-size:11px;
}
#winampPlay.active,#winampPlay:active{ background:linear-gradient(180deg,#477d0d,#284f04); color:#dfff9a; }
.winamp-toggles{ display:flex; gap:3px; }
.winamp-toggle{
  height:16px;
  padding:0 5px;
  background:linear-gradient(180deg,#565a62,#33363d 55%,#26292f);
  border:1px solid #1c1f25;
  box-shadow:inset 0 1px 0 #70757e;
  color:#c4ccd6;
  font:bold 7px/1 Tahoma,sans-serif;
  cursor:pointer;
}
.winamp-toggle.active{ color:#0f2a00; background:linear-gradient(180deg,#d8ff90,#9be23f 48%,#5a9d0a); }

/* --- Sliders VOL/BAL --- */
.winamp-sliders{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px 5px;
  background:#000;
}
.winamp-vol-labels{
  display:flex;
  gap:10px;
  color:#b7c0cc;
  font:bold 7px Tahoma,sans-serif;
}
.winamp-sliders input{ flex:1; min-width:0; accent-color:#c9c9c9; }
.wa-wt-corner{ font-size:10px; flex:0 0 auto; margin-left:2px; }

/* --- Ecualizador --- */
.winamp-eq-head{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 6px;
  background:linear-gradient(180deg,#494d55,#33363d);
}
.winamp-eq-on,.winamp-eq-auto,.winamp-presets{
  height:15px;
  padding:0 6px;
  background:linear-gradient(180deg,#565a62,#33363d 55%,#26292f);
  border:1px solid #1c1f25;
  box-shadow:inset 0 1px 0 #70757e;
  color:#c4ccd6;
  font:bold 7px/1 Tahoma,sans-serif;
  cursor:pointer;
}
.winamp-eq-on.active{ color:#0f2a00; background:linear-gradient(180deg,#d8ff90,#9be23f 48%,#5a9d0a); }
.winamp-presets{ margin-left:auto; }
.winamp-ridges{ flex:1; height:5px; opacity:.5; background:repeating-linear-gradient(to bottom,#6a707c 0 1px,#2a2d34 1px 3px); }
.winamp-eq-scale{
  display:flex;
  justify-content:space-between;
  padding:1px 8px 0;
  color:#b7c0cc;
  font:bold 6px Tahoma,sans-serif;
}
.winamp-eq-grid{
  display:grid;
  grid-template-columns:repeat(11,minmax(16px,1fr));
  align-items:end;
  gap:2px;
  padding:4px 6px;
  background:#000;
}
.winamp-eq-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  min-width:0;
}
.winamp-eq-band small{ color:#c9a400; font:600 6px Tahoma,sans-serif; }
.winamp-eq-band input{
  width:15px; height:58px;
  margin:0;
  writing-mode:vertical-lr;
  direction:rtl;
  accent-color:#e6c000;
}
.winamp-eq-band input::-webkit-slider-runnable-track{ height:6px; background:#2a2a2a; border-radius:2px; }
.winamp-eq-band input::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  margin-top:-4px;
  width:12px; height:15px;
  background:linear-gradient(180deg,#f5e57a,#c9a400);
  border:1px solid #8a6d00;
  border-radius:1px;
}

/* --- Playlist --- */
.winamp-playlist-screen{
  min-height:120px;
  max-height:180px;
  overflow-y:auto;
  padding:3px 6px;
  background:#000;
  color:#00ff00;
  font:11px/1.45 "Courier New",monospace;
  scrollbar-color:#5c6470 #060806;
  border-top:1px solid #191b20;
}
.winamp-track{
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:6px;
  align-items:center;
  width:100%;
  padding:2px 4px;
  background:transparent;
  border:0;
  text-align:left;
  color:#00ff00;
  cursor:pointer;
  font:inherit;
}
.winamp-track:hover{ background:#0d274e; color:#fff; }
.winamp-track.active{ background:#123a75; color:#fff; }
.winamp-track-index{ color:#7fff00; white-space:nowrap; }
.winamp-track-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.winamp-track-duration{ color:#7fff00; white-space:nowrap; text-align:right; }
.winamp-playlist-footer{
  display:flex;
  justify-content:space-between;
  padding:3px 4px;
  color:#b7c0cc;
  font:bold 7px Tahoma,sans-serif;
  border-top:1px solid #22262d;
}
.winamp-pl-footer{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  background:linear-gradient(180deg,#494d55,#33363d);
}
.winamp-pl-btn{
  height:16px;
  padding:0 7px;
  background:linear-gradient(180deg,#565a62,#33363d 55%,#26292f);
  border:1px solid #1c1f25;
  box-shadow:inset 0 1px 0 #70757e;
  color:#c4ccd6;
  font:bold 7px/1 Tahoma,sans-serif;
  cursor:pointer;
}
.winamp-pl-btn.sm{ padding:0 4px; }
.winamp-pl-time{
  flex:1;
  text-align:right;
  color:#baff29;
  font:bold 8px "Courier New",monospace;
}
.winamp-source-wrap{ padding:4px 6px; background:#000; }
.winamp-source-label{
  display:flex;
  justify-content:space-between;
  color:#baff29;
  font:bold 7px "Courier New",monospace;
}
.winamp-note{
  margin-top:3px;
  color:#7d8a6a;
  font:bold 7px/1.4 Tahoma,sans-serif;
}
.winamp-local-source div{
  display:flex;
  align-items:center;
  gap:5px;
  color:#baff29;
  font:bold 8px "Courier New",monospace;
}
.winamp-local-source small{ color:#7d8a6a; font:700 7px Tahoma,sans-serif; }

@media (max-width:700px){
  .winamp-time{ font-size:20px; }
  .winamp-eq-grid{ grid-template-columns:repeat(11,minmax(12px,1fr)); gap:1px; }
  .winamp-transport button{ width:18px; }
}

/* ============================================================
   MEDIA PLAYER · barra de avance (estilo WMP9)
   ============================================================ */
.wmp9-seekbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 3px;
  background:linear-gradient(180deg,#eef2f6,#cfd8e1);
  border-top:1px solid #aebfcc;
  border-bottom:1px solid #aebfcc;
}
.wmp9-time{
  color:#3b4552;
  font:700 11px/1 Tahoma,Arial,sans-serif;
  min-width:38px;
  text-align:center;
  user-select:none;
}
.wmp9-seek-track{
  position:relative;
  flex:1;
  min-width:0;
  height:20px;
}
.wmp9-seek-track .wmp9-progress-track{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:8px;
  transform:translateY(-50%);
  border:1px solid #83909b;
  border-radius:5px;
  background:#e6ebf1;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);
  overflow:hidden;
  pointer-events:none;
}
.wmp9-seek-track .wmp9-progress-track i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(180deg,#8ec7f0,#3287d6);
  border-right:1px solid #fff;
  transition:width .1s linear;
}
.wmp9-seek-track input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  background:transparent;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  touch-action:none;
}
.wmp9-seek-track input::-webkit-slider-runnable-track{
  background:transparent;
  height:20px;
  border:none;
}
.wmp9-seek-track input::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:13px;
  height:18px;
  margin-top:2px;
  background:linear-gradient(#fdfdfe,#cfd6dd 55%,#a9b3bd);
  border:1px solid #5a6a78;
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  cursor:pointer;
}
.wmp9-seek-track input::-moz-range-thumb{
  width:13px;
  height:18px;
  background:linear-gradient(#fdfdfe,#cfd6dd 55%,#a9b3bd);
  border:1px solid #5a6a78;
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.45);
  cursor:pointer;
}
.wmp9-seek-track input::-moz-range-track{
  background:transparent;
  border:none;
}
@media (max-width: 700px){
  .wmp9-seekbar{ padding:5px 8px 2px; gap:6px; }
  .wmp9-time{ font-size:10px; min-width:34px; }
}

/* ============================================================
   DOOM en PC: la ventana abre en 16:9 (sin barras) y al maximizar
   LLENA la pantalla; el juego se estira a llenar (renderAspect 16:9).
   ============================================================ */
@media (min-width: 701px) and (pointer: fine){
  #desktop #win-doom.doom-window:not(.maximized){
    aspect-ratio: 16 / 9 !important;
  }
  #desktop #win-doom.doom-window.maximized{
    left: 2px !important;
    top: 2px !important;
    right: 2px !important;
    bottom: 2px !important;
    width: calc(100% - 4px) !important;
    height: calc(100vh - 44px) !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* ============================================================
   Ventanas maximizadas con esquinas redondeadas (PC)
   ============================================================ */
@media (min-width: 701px) and (pointer: fine){
  #desktop .window.maximized:not(.doom-window):not(.pinball-window):not(.external-game-window){
    border-radius: 10px !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   DOOM TOUCH V17 · ventana completa hasta la barra de tareas
   En móvil y tablet la ventana siempre usa todo el escritorio útil.
   ============================================================ */
@media (max-width:1024px), (pointer:coarse){
  #desktop #win-doom.window,
  #desktop #win-doom.window.maximized{
    inset:auto !important;
    left:2px !important;
    top:2px !important;
    right:auto !important;
    bottom:auto !important;
    width:calc(100% - 4px) !important;
    height:calc(100% - 44px) !important;
    max-width:none !important;
    max-height:none !important;
    min-width:0 !important;
    min-height:0 !important;
    border-radius:0 !important;
  }

  #win-doom .btn-max{
    display:none !important;
  }
}

/* Unificación final: mismo tamaño visual que la barra de Solitario. */
.xp-menubar,.notepad-menu,.paint98-menubar,.wmp9-menubar,.minesweeper-menubar,.solitaire-menubar{
  min-height:27px !important;
  height:27px !important;
  padding:1px 5px !important;
  font-family:Tahoma,sans-serif !important;
  font-size:12px !important;
  line-height:20px !important;
}
.xp-menu-word,.notepad-menu > span,.paint98-menu-trigger,.wmp9-menubar > span,.minesweeper-menubar button,.solitaire-menubar button{
  padding:3px 7px !important;
  font-family:Tahoma,sans-serif !important;
  font-size:12px !important;
  line-height:20px !important;
}
.xp-menu-word:active,.notepad-menu > span:active,.paint98-menu-trigger:active,.wmp9-menubar > span:active,.minesweeper-menubar button:active,.solitaire-menubar button:active{
  color:#111 !important;
  background:#c8c6b8 !important;
  border-color:#77756b !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.38) !important;
  transform:translate(1px,1px) !important;
}

/* ===== MENÚS COMO LA BARRA DEL NAVEGADOR ===== */
html[data-elaxel-device="mobile"] body #win-paint .paint98-menubar .paint98-menu-trigger{
  display:inline-flex !important;
  align-items:center !important;
  min-height:31px !important;
  height:31px !important;
  padding:2px 7px !important;
  margin:0 !important;
  background:#e9e8dc !important;
  border:1px solid #aaa99c !important;
  color:#111 !important;
  font:11px/20px Tahoma,sans-serif !important;
  box-shadow:inset 1px 1px rgba(255,255,255,.85) !important;
}
html[data-elaxel-device="mobile"] body #win-paint .paint98-menubar .paint98-menu-trigger:active{
  background:#d6d2c5 !important;
  border-color:#716f64 !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.35) !important;
  transform:translate(1px,1px) !important;
}
#win-paint .paint98-menu-trigger,
#win-trabajos .xp-menu-word,
#win-media .wmp9-menubar > span,
#win-notepad .notepad-menu > span,
#win-mi-pc .xp-menu-word{
  display:inline-flex !important;
  align-items:center !important;
  min-height:31px !important;
  padding:2px 7px !important;
  background:#e9e8dc !important;
  border:1px solid #aaa99c !important;
  color:#111 !important;
  font:11px/20px Tahoma,sans-serif !important;
  box-shadow:inset 1px 1px rgba(255,255,255,.85) !important;
}
#win-paint .paint98-menu-trigger:active,
#win-trabajos .xp-menu-word:active,
#win-media .wmp9-menubar > span:active,
#win-notepad .notepad-menu > span:active,
#win-mi-pc .xp-menu-word:active{
  background:#d6d2c5 !important;
  border-color:#716f64 !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.35) !important;
  transform:translate(1px,1px) !important;
}
#win-mi-pc .xp-menu-word,
#win-trabajos .xp-menu-word,
#win-paint .paint98-menu-trigger,
#win-media .wmp9-menubar > span,
#win-notepad .notepad-menu > span {
  min-height:31px !important;
  padding:2px 7px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:#111 !important;
  font:11px/20px Tahoma,sans-serif !important;
}
#win-mi-pc .xp-menu-word:hover,
#win-trabajos .xp-menu-word:hover,
#win-paint .paint98-menu-trigger:hover,
#win-media .wmp9-menubar > span:hover,
#win-notepad .notepad-menu > span:hover {
  background:#fff !important;
  border-color:#316ac5 !important;
}
#win-mi-pc .xp-menu-word:active,
#win-trabajos .xp-menu-word:active,
#win-paint .paint98-menu-trigger:active,
#win-media .wmp9-menubar > span:active,
#win-notepad .notepad-menu > span:active {
  background:#d6d2c5 !important;
  border-color:#716f64 !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.35) !important;
  transform:translate(1px,1px) !important;
}
.xp-menu-word,
.notepad-menu > span,
.paint98-menu-trigger,
.wmp9-menubar > span,
.minesweeper-menubar button,
.solitaire-menubar button{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  min-height:31px !important;
  padding:2px 7px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:#111 !important;
  font:11px Tahoma,sans-serif !important;
  line-height:20px !important;
}
.xp-menu-word:hover,
.notepad-menu > span:hover,
.paint98-menu-trigger:hover,
.wmp9-menubar > span:hover,
.minesweeper-menubar button:hover,
.solitaire-menubar button:hover{
  border-color:#316ac5 !important;
  background:#fff !important;
  color:#111 !important;
}
.xp-menu-word:active,
.notepad-menu > span:active,
.paint98-menu-trigger:active,
.wmp9-menubar > span:active,
.minesweeper-menubar button:active,
.solitaire-menubar button:active{
  border-color:#716f64 !important;
  background:#d6d2c5 !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.35) !important;
  transform:translate(1px,1px) !important;
}

/* ===== MENÚS XP · estado presionado temporal y consistente ===== */
.xp-menubar > *,
.notepad-menu > *,
.paint98-menubar > *,
.wmp9-menubar > *,
.minesweeper-menubar button,
.solitaire-menubar button,
.xp-toolbar button,
.paint-toolbar button {
  color:#111 !important;
  transition:background-color .08s ease, box-shadow .08s ease, transform .08s ease;
}
.xp-menubar > *:hover,
.notepad-menu > *:hover,
.paint98-menubar > *:hover,
.wmp9-menubar > *:hover,
.minesweeper-menubar button:hover,
.solitaire-menubar button:hover,
.xp-toolbar button:hover,
.paint-toolbar button:hover {
  color:#111 !important;
  background:#e9e8dc !important;
}
.xp-menubar > *:active,
.notepad-menu > *:active,
.paint98-menubar > *:active,
.wmp9-menubar > *:active,
.minesweeper-menubar button:active,
.solitaire-menubar button:active,
.xp-toolbar button:active,
.paint-toolbar button:active {
  color:#111 !important;
  background:#c8c6b8 !important;
  border-color:#77756b !important;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,.38), inset -1px -1px rgba(255,255,255,.45) !important;
  transform:translate(1px,1px);
}
.xp-menubar > *:focus-visible,
.notepad-menu > *:focus-visible,
.paint98-menubar > *:focus-visible,
.wmp9-menubar > *:focus-visible {
  color:#111 !important;
  background:#e9e8dc !important;
}

/* Mi PC: explorador clásico XP. */
.my-computer-body { padding:0 !important; background:#fff !important; color:#111; font:12px Tahoma,Arial,sans-serif; }
.my-computer-address { display:flex; align-items:center; gap:12px; min-height:31px; padding:4px 8px; box-sizing:border-box; background:#ece9d8; border-bottom:1px solid #aaa99c; }
.my-computer-address strong { flex:1; height:21px; padding:2px 6px; box-sizing:border-box; background:#fff; border:1px solid #7f9db9; font-weight:normal; }
.my-computer-section { padding:10px 14px 2px; }
.my-computer-section h2 { margin:0 0 8px; padding-bottom:3px; border-bottom:1px solid #d0d0d0; color:#245edb; font:bold 13px Tahoma,Arial,sans-serif; }
.my-computer-items { display:flex; gap:18px; flex-wrap:wrap; }
.my-computer-item { display:flex; align-items:center; gap:7px; min-width:150px; padding:5px 7px; border:1px solid transparent; background:#fff; color:#111; font:12px Tahoma,Arial,sans-serif; text-align:left; cursor:pointer; touch-action:manipulation; }
.my-computer-item img { width:32px; height:32px; object-fit:contain; }
.my-computer-item:hover,.my-computer-item.selected { border-color:#316ac5; background:#dce9fa; }
.my-computer-status { margin:10px 14px; padding:5px 7px; border-top:1px solid #aaa99c; color:#666; font:11px Tahoma,Arial,sans-serif; }
.my-computer-access-alert { display:flex; flex-direction:column; gap:7px; margin:8px 14px; padding:10px; border:1px solid #d39b22; background:#fff8d7; color:#111; font:12px/18px Tahoma,Arial,sans-serif; }
.my-computer-access-alert[hidden] { display:none !important; }
.my-computer-access-alert strong { color:#245edb; font-size:13px; }
.my-computer-access-alert .xp-button { align-self:flex-start; padding:5px 10px; }
@media (max-width:700px) {
  #win-my-computer .my-computer-toolbar .xp-tool-button:nth-of-type(3),
  #win-my-computer .my-computer-toolbar .xp-tool-button:nth-of-type(4) {
    display:inline-flex !important;
  }
  #win-my-computer .my-computer-toolbar { overflow-x:auto; scrollbar-width:none; }
  #win-my-computer .my-computer-toolbar::-webkit-scrollbar { display:none; }
}
@media (max-width:700px) { .my-computer-section { padding-left:9px; padding-right:9px; } .my-computer-items { gap:6px; } .my-computer-item { min-width:135px; } }

/* FAQ móvil: ocupa todo el espacio útil, sin márgenes laterales ni recortes. */
@media (max-width:700px) {
  html body #win-testimonios {
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:calc(100dvh - 42px) !important;
    max-height:calc(100dvh - 42px) !important;
    min-width:0 !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }
  html body #win-testimonios .faq-body {
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    padding:10px 12px 16px !important;
    font-size:14px !important;
    line-height:1.4 !important;
  }
  html body #win-sobre-mi {
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:calc(100dvh - 42px) !important;
    max-height:calc(100dvh - 42px) !important;
    min-width:0 !important;
    min-height:0 !important;
    box-sizing:border-box !important;
  }
  html body #win-sobre-mi .about-body {
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    padding:10px 12px 16px !important;
    font-size:14px !important;
    line-height:1.4 !important;
  }
}