@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600;700&display=swap');

/* ══════════════════════════════════════════════════════
   MISSION CONTROL v6 — Windows Vista / Frutiger Aero
   Arquitectura limpia: wallpaper siempre visible,
   ventanas encima, íconos flotantes en Home.
══════════════════════════════════════════════════════ */

:root {
  --f: 'Noto Sans','Segoe UI',Tahoma,sans-serif;
  --tb-h: 46px;
  --win-title: linear-gradient(180deg,
    hsl(210,85%,76%) 0%, hsl(213,78%,60%) 48%,
    hsl(216,72%,52%) 49%, hsl(218,65%,56%) 100%);
  --win-sh: 0 16px 48px hsla(220,80%,8%,.55), 0 4px 12px hsla(220,70%,12%,.35);
  --glass: hsla(210,70%,93%,.90);
  --tb:    hsla(218,65%,14%,.90);
}

/* ── Reset scoped ──────────────────────────────────── */
.mc,.mc *,.mc *::before,.mc *::after{box-sizing:border-box;margin:0;padding:0;}

/* SAFETY: media elements never break out of their container */
.mc video, .mc audio { max-width:100%; max-height:100%; display:block; }
.mc img { max-width:100%; }
/* Si una ventana NO tiene .show, todo su contenido debe estar oculto */
.mc-win:not(.show){display:none !important;}

/* ══ Raíz ═══════════════════════════════════════════ */
.mc {
  width:100%; height:100vh;
  position:relative; overflow:hidden;
  font-family:var(--f);
}

/* ══ BOOT ════════════════════════════════════════════ */
.mc-boot {
  position:absolute; inset:0; z-index:1000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:linear-gradient(160deg,
    hsl(155,55%,28%) 0%, hsl(175,60%,22%) 25%,
    hsl(195,65%,18%) 55%, hsl(215,70%,16%) 80%,
    hsl(225,65%,12%) 100%);
  transition:opacity .8s;
}
.mc-boot.out{opacity:0;pointer-events:none;}

.mc-boot-rays{position:absolute;inset:0;overflow:hidden;}
.mc-boot-ray{
  position:absolute;top:-20%;left:50%;
  width:2px;transform-origin:bottom center;
  background:linear-gradient(180deg,transparent,hsla(165,70%,60%,.18),hsla(180,70%,55%,.06));
  animation:ray-sway 4s ease-in-out infinite;
}
.mc-boot-ray:nth-child(1){height:110vh;transform:rotate(-38deg);animation-delay:0s;}
.mc-boot-ray:nth-child(2){height:95vh; transform:rotate(-22deg);animation-delay:.4s;}
.mc-boot-ray:nth-child(3){height:120vh;transform:rotate(-8deg); animation-delay:.8s;}
.mc-boot-ray:nth-child(4){height:100vh;transform:rotate(6deg);  animation-delay:1.2s;}
.mc-boot-ray:nth-child(5){height:115vh;transform:rotate(20deg); animation-delay:.6s;}
.mc-boot-ray:nth-child(6){height:90vh; transform:rotate(32deg); animation-delay:1.0s;}
.mc-boot-ray:nth-child(7){height:105vh;transform:rotate(-50deg);animation-delay:.3s;}
@keyframes ray-sway{0%,100%{opacity:.5}50%{opacity:1}}

.mc-boot-center{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  margin-bottom:60px;
  opacity:0;animation:fade-up .7s ease .8s forwards;
}
.mc-boot-logo{
  width:140px !important;
  max-width:32vw !important;
  height:auto !important;
  display:block !important;
  /* Filtro para que el logo carita rojo sea blanco luminoso sobre el fondo oscuro */
  filter:brightness(0) invert(1)
         drop-shadow(0 0 24px hsla(200,90%,75%,.65))
         drop-shadow(0 0 60px hsla(200,80%,65%,.35));
  animation:mc-logo-glow 3.5s ease-in-out infinite alternate;
}
@keyframes mc-logo-glow{
  from{filter:brightness(0) invert(1)
        drop-shadow(0 0 20px hsla(200,90%,75%,.5))
        drop-shadow(0 0 50px hsla(200,80%,65%,.25));}
  to  {filter:brightness(0) invert(1)
        drop-shadow(0 0 32px hsla(195,100%,80%,.85))
        drop-shadow(0 0 80px hsla(200,90%,70%,.5));}
}
.mc-boot-welcome{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:12px;
  opacity:0;animation:fade-up .5s ease 1.6s forwards;
  color:hsl(200,40%,72%);font-size:1rem;font-weight:300;letter-spacing:.06em;
  text-shadow:0 0 12px hsla(200,60%,60%,.5);
}
.mc-boot-ring{
  width:20px;height:20px;border-radius:50%;
  border:2px solid hsla(200,70%,70%,.3);
  border-top-color:hsl(200,80%,72%);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══ DESKTOP ═════════════════════════════════════════ */
.mc-desktop {
  position:absolute; inset:0;
  opacity:0; transition:opacity 1s;
  pointer-events:none;
}
.mc-desktop.show{opacity:1;pointer-events:all;}

/* Wallpaper — parallax controlado por JS */
.mc-wallpaper {
  position:absolute;
  /* Bien más grande que el viewport así el parallax nunca muestra bordes */
  inset:-8% -8% -8% -8%;
  background:var(--bg) center/cover no-repeat;
  z-index:0;
  transform:translate3d(0,0,0) scale(1.12);
  transform-origin:center center;
  will-change:transform;
  /* Sin transition: el rAF loop del JS hace el smoothing */
}

/* ══ ÍCONOS DEL ESCRITORIO ════════════════════════════ */
.mc-icons{
  position:absolute; inset:0; bottom:var(--tb-h);
  z-index:10; pointer-events:none;
}
.mc-icons.hide{display:none;}

.mc-icon{
  position:absolute;
  width:88px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 4px;border-radius:5px;
  cursor:pointer;user-select:none;pointer-events:all;
  text-decoration:none;
  transition:background .15s, outline .15s;
}
.mc-icon:hover{
  background:hsla(210,85%,65%,.22);
  outline:1px solid hsla(210,75%,75%,.45);
}
.mc-icon img{
  width:72px;height:72px;
  object-fit:contain;display:block;
  background:transparent;
  image-rendering:auto;
  filter:drop-shadow(0 4px 10px hsla(220,60%,8%,.65));
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),filter .15s;
}
.mc-icon:hover img{
  transform:translateY(-3px) scale(1.05);
  filter:drop-shadow(0 6px 14px hsla(210,80%,35%,.55)) brightness(1.06);
}
/* Sacar los textos duplicados debajo de los íconos: las imágenes ya llevan el nombre */
/* Los íconos por defecto NO muestran texto (ya está en la imagen del PNG) */
.mc-icon span{display:none;}
/* Solo los íconos marcados como "labeled" muestran texto — Instagram y Merch */
.mc-icon--labeled span{
  display:block !important;
  font-family:var(--f);
  font-size:12px;font-weight:600;
  color:#fff;
  text-align:center;line-height:1.25;
  margin-top:4px;
  text-shadow:
    0 1px 3px hsla(220,80%,10%,.95),
    0 0 6px hsla(220,80%,10%,.7),
    1px 1px 2px hsla(220,80%,10%,.8);
  max-width:88px;
  white-space:nowrap;
}

/* Logo equisde flotante en el home — chico, arriba del centro */
.mc-home-logo{
  position:absolute;
  top:38%; left:50%;
  transform:translate(-50%,-50%);
  width:min(180px,18vw);
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 4px 14px hsla(220,50%,15%,.4))
         drop-shadow(0 1px 3px hsla(340,60%,25%,.35));
  opacity:0;
  animation:mc-home-logo-in 1.2s cubic-bezier(.34,1.2,.64,1) .3s forwards;
  will-change:transform;
  transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes mc-home-logo-in{
  from{opacity:0;}
  to  {opacity:.92;}
}

/* ══ MEDIA PLAYER ════════════════════════════════════ */
.mc-player{
  position:absolute;bottom:54px;right:16px;
  width:272px;z-index:200;
  border-radius:14px;overflow:hidden;
  display:none !important;flex-direction:column;
  background:radial-gradient(ellipse at 50% 0%,
    hsl(200,90%,72%) 0%,hsl(207,85%,58%) 35%,
    hsl(213,80%,44%) 70%,hsl(218,78%,34%) 100%);
  border:1.5px solid hsla(200,80%,80%,.6);
  box-shadow:0 8px 32px hsla(215,80%,10%,.55),inset 0 1px 0 hsla(200,100%,95%,.35);
}
.mc-player.show{display:flex !important;animation:pop-in .3s cubic-bezier(.34,1.2,.64,1);}
@keyframes pop-in{from{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:none}}

.mc-player-shine{
  position:absolute;top:0;left:0;right:0;height:46%;
  background:linear-gradient(180deg,hsla(200,100%,98%,.38),transparent);
  border-radius:14px 14px 0 0;pointer-events:none;z-index:0;
}
.mc-player-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 4px;position:relative;z-index:1;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:hsla(210,20%,95%,.9);text-shadow:0 1px 3px hsla(215,80%,10%,.6);
}
.mc-player-x{
  width:18px;height:18px;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,hsl(2,82%,66%),hsl(0,72%,50%));
  border:1px solid hsl(0,60%,40%);
  display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff;
}
.mc-player-lcd{
  margin:4px 12px 6px;border-radius:6px;padding:10px 12px;
  background:hsl(215,60%,16%);
  border:1px solid hsl(215,50%,10%);
  box-shadow:inset 0 2px 6px hsla(215,80%,4%,.8);
  position:relative;z-index:1;
}
.mc-player-track{font-family:'Courier New',monospace;font-size:12px;font-weight:bold;color:hsl(150,80%,60%);text-shadow:0 0 8px hsla(150,80%,60%,.8);}
.mc-player-info{font-family:'Courier New',monospace;font-size:10px;color:hsl(150,60%,45%);margin-top:2px;}
.mc-player-bars{display:flex;align-items:flex-end;gap:2px;height:20px;margin-top:6px;}
.mc-bar{
  width:4px;border-radius:1px;
  background:hsl(150,80%,55%);box-shadow:0 0 4px hsla(150,80%,55%,.7);
  animation:bar-bounce var(--d,.6s) ease-in-out infinite alternate;transform-origin:bottom;
}
@keyframes bar-bounce{from{height:3px}to{height:var(--h,14px)}}

.mc-player-prog{
  margin:0 12px 4px;height:5px;border-radius:3px;overflow:hidden;
  background:hsla(215,60%,20%,.8);border:1px solid hsla(215,60%,15%,.6);
  position:relative;z-index:1;
}
.mc-player-fill{
  height:100%;
  background:linear-gradient(90deg,hsl(150,80%,55%),hsl(180,70%,60%));
  border-radius:3px;box-shadow:0 0 6px hsla(150,80%,55%,.6);
  animation:prog-anim 12s linear infinite;
}
@keyframes prog-anim{from{width:0%}to{width:100%}}

.mc-player-btns{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 12px 14px;position:relative;z-index:1;
}
.mc-pbtn{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(circle at 40% 32%,hsla(200,100%,88%,.7),hsla(205,80%,68%,.5),hsla(210,70%,50%,.4));
  border:1px solid hsla(200,80%,75%,.55);
  box-shadow:inset 0 1px 0 hsla(200,100%,95%,.5),0 2px 6px hsla(215,80%,10%,.4);
  font-size:12px;color:#fff;text-shadow:0 1px 2px hsla(215,80%,10%,.5);
  transition:filter .15s,transform .1s;
}
.mc-pbtn:hover{filter:brightness(1.2);}
.mc-pbtn:active{transform:scale(.93);}
.mc-pbtn-play{width:40px;height:40px;font-size:15px;}

/* ══ VENTANAS VISTA ══════════════════════════════════ */
.mc-win{
  position:absolute; inset:0; bottom:var(--tb-h);
  display:none; flex-direction:column;
  z-index:20;
  border-radius:8px 8px 0 0;
  overflow:hidden;
  box-shadow:var(--win-sh);
  animation:win-open .25s cubic-bezier(.34,1.2,.64,1);
}
.mc-win.show{display:flex;}
@keyframes win-open{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}

/* Barra de título */
.mc-win-bar{
  height:32px;flex-shrink:0;
  display:flex;align-items:center;padding:0 8px;gap:6px;
  background:var(--win-title);
  border-bottom:1px solid hsla(215,65%,42%,.55);
  box-shadow:inset 0 1px 0 hsla(210,100%,96%,.65);
}
.mc-win-flag{width:18px;height:18px;display:inline-block;flex:0 0 18px;background:url('titlebar-xd-logo.png') center/contain no-repeat;}
.mc-win-flag span{display:none;}

.mc-win-bartitle{
  font-size:12px;font-weight:600;flex:1;
  color:hsl(220,30%,18%);text-shadow:0 1px 0 hsla(210,70%,90%,.7);
  letter-spacing:.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mc-win-ctrls{display:flex;gap:3px;margin-left:auto;}
.mc-ctrl{
  width:22px;height:20px;border-radius:3px;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;cursor:pointer;border:1px solid;
  transition:filter .12s;
}
.mc-ctrl-min,.mc-ctrl-max{
  background:linear-gradient(180deg,hsl(207,75%,70%),hsl(212,68%,54%));
  border-color:hsl(212,58%,44%);color:hsl(215,50%,22%);
  text-shadow:0 1px 0 hsla(210,75%,88%,.5);
}
.mc-ctrl-cls{
  background:linear-gradient(180deg,hsl(2,82%,66%),hsl(0,72%,50%));
  border-color:hsl(0,60%,40%);color:#fff;
}
.mc-ctrl:hover{filter:brightness(1.2);}

/* Address bar */
.mc-win-addr{
  height:34px;flex-shrink:0;
  display:flex;align-items:center;padding:0 8px;gap:6px;
  background:linear-gradient(180deg,hsl(210,40%,96%),hsl(210,35%,92%));
  border-bottom:1px solid hsl(210,40%,78%);
}
.mc-addr-btn{
  width:24px;height:22px;border-radius:4px;
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg,hsl(210,60%,80%),hsl(212,55%,66%));
  border:1px solid hsl(212,50%,58%);font-size:13px;color:hsl(220,30%,25%);
  box-shadow:inset 0 1px 0 hsla(210,80%,90%,.5);
  transition:filter .12s;
}
.mc-addr-btn:hover{filter:brightness(1.15);}
.mc-addr-box{
  flex:1;height:22px;background:#fff;
  border:1px solid hsl(210,40%,68%);border-radius:3px;
  padding:0 8px;display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:hsl(215,35%,30%);
  overflow:hidden;white-space:nowrap;
}
.mc-addr-lock{font-size:11px;color:hsl(210,50%,50%);}

/* Cuerpo de la ventana */
.mc-win-body{
  flex:1;overflow-y:auto;
  background:hsla(210,65%,95%,.90);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  position:relative;
}
.mc-win-body::before{
  content:'';position:absolute;top:0;left:0;right:0;height:38%;
  background:linear-gradient(180deg,hsla(210,80%,99%,.42),transparent);
  pointer-events:none;z-index:0;
}
.mc-win-body::-webkit-scrollbar{width:14px;}
.mc-win-body::-webkit-scrollbar-track{background:linear-gradient(180deg,hsl(210,35%,88%),hsl(210,30%,82%));border-left:1px solid hsl(210,35%,76%);}
.mc-win-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,hsl(210,60%,72%),hsl(212,55%,58%));border:1px solid hsl(212,50%,50%);border-radius:3px;}

/* Status bar */
.mc-win-status{
  height:22px;flex-shrink:0;
  display:flex;align-items:center;padding:0 10px;gap:12px;
  background:linear-gradient(180deg,hsl(210,40%,88%),hsl(210,38%,83%));
  border-top:1px solid hsl(210,40%,74%);
  font-size:11px;color:hsl(220,30%,42%);font-family:var(--f);
}
.mc-sep{width:1px;height:12px;background:hsl(210,38%,72%);}

/* ══ CONTENIDO DE PÁGINAS ════════════════════════════ */
.mc-page{padding:24px 28px;display:flex;flex-direction:column;gap:18px;position:relative;z-index:1;}
.mc-ph{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;}
.mc-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 12px;border-radius:20px;align-self:flex-start;
  background:linear-gradient(180deg,hsla(210,80%,88%,.7),hsla(210,70%,80%,.6));
  border:1px solid hsla(210,70%,75%,.5);
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:hsl(220,72%,22%);
}
.mc-h1{
  font-size:clamp(1.6rem,2.4vw,2.6rem);font-weight:300;
  letter-spacing:-.025em;line-height:1.1;color:hsl(220,72%,22%);
}
.mc-h1 strong{font-weight:700;color:hsl(210,88%,54%);}
.mc-p{font-size:1rem;line-height:1.7;color:hsl(220,30%,38%);max-width:60ch;}

.mc-gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.mc-gal-item{
  border-radius:5px;aspect-ratio:4/3;
  background:linear-gradient(135deg,hsl(200,70%,80%),hsl(215,65%,65%));
  border:1px solid hsla(210,60%,78%,.5);
  display:grid;place-items:center;font-size:1.8rem;
  transition:filter .2s;
}
.mc-gal-item:hover{filter:brightness(1.08);}

.mc-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.mc-card{
  border-radius:6px;padding:18px;
  background:hsla(210,65%,98%,.75);
  border:1px solid hsla(210,60%,82%,.55);
  box-shadow:inset 0 1px 0 hsla(210,100%,100%,.7);
  display:flex;flex-direction:column;gap:8px;
}
.mc-ci{font-size:26px;line-height:1;}
.mc-card h3{font-size:14px;font-weight:600;color:hsl(220,72%,22%);}
.mc-card p{font-size:13px;line-height:1.6;color:hsl(220,25%,40%);}

.mc-woo-area{
  background:hsla(280,30%,98%,.7);
  border:1px solid hsla(280,40%,80%,.4);
  border-radius:6px;padding:22px;min-height:180px;
}
.mc-woo-area h3{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:hsl(280,45%,32%);margin-bottom:14px;}
.mc-woo-ph{font-size:13px;line-height:1.7;color:hsl(280,25%,50%);padding:18px;text-align:center;border:2px dashed hsla(280,45%,72%,.4);border-radius:5px;}
.mc-woo-ph code{display:block;margin-top:8px;padding:4px 10px;background:hsla(280,30%,90%,.6);border-radius:3px;font-size:12px;color:hsl(280,45%,32%);}

.mc-team{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.mc-member{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;border-radius:6px;text-align:center;background:hsla(210,60%,98%,.7);border:1px solid hsla(210,55%,82%,.5);}
.mc-avatar{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 32%,hsl(128,70%,58%),hsl(124,62%,36%),hsl(120,55%,22%));border:2px solid hsl(124,52%,36%);display:grid;place-items:center;font-size:1.6rem;}
.mc-member h4{font-size:13px;font-weight:600;color:hsl(220,72%,22%);}
.mc-member p{font-size:12px;color:hsl(220,25%,45%);line-height:1.5;}

/* ══ EXPOSÉ ══════════════════════════════════════════ */
.mc-expose{
  position:absolute;inset:0;bottom:var(--tb-h);
  z-index:50;display:none;
  background:hsla(218,70%,8%,.5);
  backdrop-filter:blur(2px);
}
.mc-expose.show{display:block;}

.mc-eth{
  position:absolute;cursor:pointer;
  border-radius:6px;overflow:hidden;
  border:2px solid transparent;
  box-shadow:0 8px 24px hsla(218,80%,6%,.6);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.mc-eth:hover{transform:scale(1.04);box-shadow:0 12px 32px hsla(218,80%,6%,.7);border-color:hsl(210,80%,70%);}

.mc-eth-label{
  position:absolute;bottom:8px;left:50%;translate:-50% 0;
  background:hsla(210,80%,90%,.92);border:1px solid hsla(210,70%,78%,.7);
  border-radius:3px;padding:3px 10px;
  font-size:11px;font-weight:600;color:hsl(220,72%,22%);
  white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none;
}
.mc-eth:hover .mc-eth-label{opacity:1;}

/* ══ TASKBAR ════════════════════════════════════════ */
.mc-taskbar{
  position:absolute;bottom:0;left:0;right:0;
  height:var(--tb-h);z-index:100;
  display:flex;align-items:center;padding:0 4px;gap:3px;
  background:var(--tb);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid hsla(210,70%,65%,.28);
  box-shadow:0 -2px 10px hsla(218,80%,4%,.6),inset 0 1px 0 hsla(210,90%,85%,.10);
}

/* Orbe equisde en la taskbar */
.mc-orb{
  width:40px;height:40px;border-radius:50%;
  flex-shrink:0;cursor:pointer;border:none;
  background:radial-gradient(circle at 38% 30%,
    hsl(0,0%,100%) 0%,
    hsl(210,25%,92%) 55%,
    hsl(210,30%,80%) 100%);
  padding:0;
  position:relative;
  display:grid;place-items:center;
  box-shadow:
    0 0 0 2px hsl(218,45%,32%),
    0 0 12px hsla(340,90%,55%,.45),
    0 3px 8px hsla(220,80%,10%,.4),
    inset 0 1px 2px hsla(0,0%,100%,.7);
  transition:filter .2s, transform .12s;
}
.mc-orb::before{
  /* brillo tipo Aero encima del orbe */
  content:'';position:absolute;top:6%;left:14%;right:14%;height:36%;
  background:linear-gradient(180deg,hsla(0,0%,100%,.8),transparent);
  border-radius:50%;
  pointer-events:none;
}
.mc-orb:hover{
  filter:brightness(1.06) drop-shadow(0 0 12px hsla(340,90%,60%,.7));
  transform:scale(1.04);
}
.mc-orb:active{transform:scale(.96);}
.mc-orb-logo{
  width:70%;height:70%;
  object-fit:contain;
  display:block;
  position:relative;z-index:1;
  filter:drop-shadow(0 1px 1px hsla(340,80%,30%,.4));
}

/* Botones de ventanas en la taskbar */
.mc-tb-btn{
  height:34px;min-width:110px;max-width:150px;
  display:flex;align-items:center;gap:5px;
  padding:0 10px;border-radius:4px;cursor:pointer;
  background:hsla(210,65%,70%,.15);
  border:1px solid hsla(210,70%,80%,.22);
  color:hsl(210,15%,90%);
  font-family:var(--f);font-size:11.5px;font-weight:400;
  letter-spacing:.01em;
  text-shadow:0 1px 3px hsla(220,80%,4%,.9);
  transition:background .15s,border-color .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  user-select:none;
}
.mc-tb-btn:hover,.mc-tb-btn.mc-active{
  background:hsla(210,65%,70%,.30);
  border-color:hsla(210,75%,82%,.45);
}

/* Tray / reloj */
.mc-tray{margin-left:auto;padding:0 10px;border-left:1px solid hsla(210,60%,70%,.18);}
.mc-clock{font-family:var(--f);text-align:right;}
.mc-clock span{display:block;font-size:11px;color:hsl(210,20%,88%);text-shadow:0 1px 3px hsla(220,80%,4%,.9);}
.mc-clock-date{font-size:10px !important;color:hsl(210,20%,75%) !important;}

/* ── Accesibilidad ── */
.mc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/* ══════════════════════════════════════════════════════
   PORTFOLIO v2 — galería compacta, tamaños fijos
══════════════════════════════════════════════════════ */

/* Tabs estilo Vista */
.mc-tabs{
  display:flex;gap:2px;
  border-bottom:1px solid hsl(210,40%,72%);
  margin-bottom:18px;padding-bottom:0;
}
.mc-tab{
  padding:8px 18px;font-size:12px;font-weight:600;cursor:pointer;
  color:hsl(215,30%,38%);user-select:none;
  border:1px solid transparent;border-bottom:none;
  border-radius:5px 5px 0 0;
  background:transparent;
  transition:all .15s;margin-bottom:-1px;
  position:relative;
}
.mc-tab:hover{color:hsl(213,80%,35%);background:hsla(210,80%,90%,.5);}
.mc-tab.active{
  color:hsl(213,85%,32%);
  background:linear-gradient(180deg,hsl(210,75%,93%),hsl(210,55%,82%));
  border-color:hsl(210,50%,68%);
  border-bottom:1px solid hsla(210,75%,90%,1);
  box-shadow:inset 0 1px 0 hsla(200,100%,98%,.7);
}

.mc-tab-panel{display:none;animation:tab-fade .3s ease;}
.mc-tab-panel.active{display:block;}
@keyframes tab-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* GRID DE POSTERS — FIJO ~180px */
.mc-port-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}

.mc-port-item{
  position:relative;
  border-radius:6px;overflow:hidden;
  border:1px solid hsla(210,50%,70%,.4);
  background:hsl(210,25%,90%);
  aspect-ratio:3/4;
  cursor:pointer;
  box-shadow:0 2px 8px hsla(215,40%,20%,.15);
  /* IMPORTANTE: width:100% para que respete el grid */
  width:100%;height:auto;
  transition:transform .25s cubic-bezier(.34,1.2,.64,1), box-shadow .25s;
}
.mc-port-item:hover{
  transform:translateY(-4px) scale(1.025);
  box-shadow:0 12px 24px hsla(215,60%,15%,.35);
  z-index:2;
  border-color:hsl(210,80%,65%);
}
.mc-port-item img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .4s ease, filter .25s;
}
.mc-port-item:hover img{transform:scale(1.08);filter:brightness(1.06) contrast(1.04);}

.mc-port-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 10px 8px;
  background:linear-gradient(transparent,hsla(220,70%,8%,.85));
  font-size:11.5px;font-weight:600;color:#fff;
  letter-spacing:.02em;
  opacity:0;transform:translateY(8px);
  transition:opacity .2s, transform .2s;
  text-shadow:0 1px 3px hsla(220,80%,5%,.95);
}
.mc-port-item:hover .mc-port-caption{opacity:1;transform:none;}

/* GRID DE RENDERS — más ancho 16:9 */
.mc-render-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.mc-render-grid .mc-port-item{aspect-ratio:16/9;}

/* GRID DE VIDEOS */
.mc-video-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.mc-video-wrap{
  position:relative;
  border-radius:6px;overflow:hidden;
  border:1px solid hsla(210,50%,70%,.4);
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 4px 14px hsla(215,50%,15%,.3);
  width:100%;
}
.mc-video-wrap video{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.mc-video-label{
  position:absolute;bottom:8px;left:8px;
  font-size:11px;font-weight:600;color:#fff;
  background:hsla(220,70%,10%,.7);
  padding:3px 9px;border-radius:3px;
  text-shadow:0 1px 2px hsla(220,80%,5%,.9);
  backdrop-filter:blur(4px);
  pointer-events:none;
}

.mc-empty-state{
  padding:30px;text-align:center;
  background:hsla(210,40%,95%,.5);
  border:2px dashed hsla(210,50%,70%,.4);
  border-radius:6px;
  color:hsl(220,25%,45%);font-size:12.5px;line-height:1.6;
}
.mc-empty-state code{
  display:inline-block;margin-top:6px;padding:3px 8px;
  background:hsla(210,40%,80%,.5);border-radius:3px;
  font-family:'Courier New',monospace;font-size:11px;
  color:hsl(215,60%,30%);
}

/* ══════════════════════════════════════════════════════
   MERCH v2 — tienda clásica, sidebar de carrito
══════════════════════════════════════════════════════ */
.mc-shop{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:18px;
  align-items:start;
}
@media (max-width:880px){
  .mc-shop{grid-template-columns:1fr;}
}

/* GRID DE PRODUCTOS — TAMAÑO FIJO 180px */
.mc-prod-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}

.mc-prod{
  background:#fff;
  border:1px solid hsla(210,40%,80%,.7);
  border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;
  width:100%;
  box-shadow:0 1px 3px hsla(215,40%,20%,.1);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  position:relative;
}
.mc-prod:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px hsla(215,50%,15%,.22);
  border-color:hsl(210,80%,65%);
  z-index:1;
}

.mc-prod-img-wrap{
  aspect-ratio:1;
  background:linear-gradient(160deg,hsl(210,30%,96%),hsl(210,20%,90%));
  overflow:hidden;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.mc-prod-img-wrap img{
  width:100%;height:100%;
  object-fit:contain;
  padding:8px;
  transition:transform .35s;
}
.mc-prod:hover .mc-prod-img-wrap img{transform:scale(1.06);}

.mc-prod-body{
  padding:10px 11px 12px;
  display:flex;flex-direction:column;gap:4px;
  flex:1;
}
.mc-prod-name{
  font-size:12.5px;font-weight:600;
  color:hsl(220,40%,18%);
  line-height:1.3;
  overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  min-height:32px;
}
.mc-prod-price{
  font-size:14px;font-weight:700;
  color:hsl(213,80%,38%);
  margin-top:auto;
}

.mc-add-btn{
  margin:0 11px 11px;
  padding:7px 10px;border-radius:4px;cursor:pointer;
  background:linear-gradient(180deg,
    hsl(210,75%,68%) 0%,
    hsl(213,70%,52%) 48%,
    hsl(216,68%,46%) 49%,
    hsl(218,65%,50%) 100%);
  border:1px solid hsl(214,55%,38%);
  color:#fff;
  font-size:11.5px;font-weight:600;
  text-align:center;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 hsla(210,90%,85%,.5), 0 1px 2px hsla(215,60%,10%,.2);
  text-shadow:0 1px 1px hsla(215,80%,15%,.5);
  transition:filter .15s, transform .08s;
}
.mc-add-btn:hover{filter:brightness(1.08);}
.mc-add-btn:active{transform:scale(.97);}
.mc-add-btn.added{
  background:linear-gradient(180deg,hsl(128,70%,55%),hsl(126,65%,42%));
  border-color:hsl(124,55%,32%);
  pointer-events:none;
}

/* CARRITO — sidebar pequeño y sticky */
.mc-cart{
  position:sticky;top:0;
  background:linear-gradient(180deg,
    hsla(210,75%,98%,.95),
    hsla(210,60%,92%,.95));
  border:1px solid hsla(210,55%,75%,.7);
  border-radius:8px;
  padding:14px;
  box-shadow:inset 0 1px 0 hsla(200,100%,98%,.7), 0 4px 14px hsla(215,40%,20%,.15);
  display:flex;flex-direction:column;gap:10px;
  max-height:calc(100vh - 200px);
}

.mc-cart-head{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;
  color:hsl(220,55%,22%);
  border-bottom:1px solid hsla(210,50%,75%,.6);
  padding-bottom:8px;
}
.mc-cart-badge{
  margin-left:auto;
  font-size:10.5px;font-weight:700;
  background:hsl(213,80%,48%);color:#fff;
  padding:2px 8px;border-radius:10px;
  min-width:22px;text-align:center;
  box-shadow:0 1px 3px hsla(213,80%,30%,.3);
}

.mc-cart-list{
  display:flex;flex-direction:column;gap:6px;
  min-height:60px;
  overflow-y:auto;
  max-height:300px;
  padding-right:2px;
}
.mc-cart-list::-webkit-scrollbar{width:6px;}
.mc-cart-list::-webkit-scrollbar-thumb{background:hsl(210,40%,70%);border-radius:3px;}

.mc-cart-empty{
  text-align:center;padding:24px 8px;
  font-size:12px;color:hsl(220,20%,55%);
  font-style:italic;
}

.mc-cart-row{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:8px;align-items:center;
  padding:7px;
  background:hsla(210,40%,98%,.7);
  border:1px solid hsla(210,40%,82%,.6);
  border-radius:5px;
  font-size:12px;
}
.mc-cart-row img{
  width:40px;height:40px;
  object-fit:contain;
  background:hsl(210,25%,94%);
  border-radius:3px;
  border:1px solid hsla(210,30%,80%,.5);
}
.mc-cart-row-info{display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.mc-cart-row-name{
  font-weight:600;color:hsl(220,40%,20%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:11.5px;
}
.mc-cart-row-meta{
  font-size:10.5px;color:hsl(220,25%,45%);
  display:flex;align-items:center;gap:6px;
}
.mc-qty{
  display:inline-flex;align-items:center;
  background:hsl(210,30%,92%);
  border:1px solid hsl(210,30%,78%);
  border-radius:3px;overflow:hidden;
}
.mc-qty button{
  width:18px;height:18px;border:none;cursor:pointer;
  background:transparent;color:hsl(215,40%,30%);
  font-size:11px;font-weight:700;
  display:grid;place-items:center;
}
.mc-qty button:hover{background:hsl(210,55%,80%);}
.mc-qty span{
  padding:0 5px;font-size:11px;font-weight:700;
  color:hsl(220,40%,20%);min-width:18px;text-align:center;
}
.mc-cart-row-price{
  font-weight:700;color:hsl(213,80%,38%);
  white-space:nowrap;font-size:11.5px;
  align-self:flex-start;text-align:right;
}
.mc-cart-rm{
  background:transparent;border:none;cursor:pointer;
  color:hsl(0,55%,50%);font-size:14px;
  width:16px;height:16px;display:grid;place-items:center;
  padding:0;line-height:1;
}
.mc-cart-rm:hover{color:hsl(0,75%,40%);}

.mc-cart-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:8px;border-top:1px solid hsla(210,50%,75%,.6);
  font-size:13px;color:hsl(220,40%,20%);
}
.mc-cart-total strong{
  font-size:16px;font-weight:700;
  color:hsl(213,85%,35%);
}

.mc-checkout{
  padding:10px;border-radius:5px;cursor:pointer;
  background:linear-gradient(180deg,
    hsl(128,68%,55%) 0%,
    hsl(126,64%,42%) 48%,
    hsl(124,60%,36%) 49%,
    hsl(126,58%,40%) 100%);
  border:1px solid hsl(124,55%,28%);
  color:#fff;font-size:13px;font-weight:700;
  text-align:center;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 hsla(128,80%,80%,.5), 0 2px 5px hsla(124,60%,15%,.3);
  text-shadow:0 1px 1px hsla(125,80%,12%,.5);
  transition:filter .15s,transform .08s;
}
.mc-checkout:hover{filter:brightness(1.08);}
.mc-checkout:active{transform:scale(.98);}
.mc-checkout:disabled{
  filter:grayscale(.5) brightness(.85);cursor:not-allowed;
}

/* Toast de "agregado" */
.mc-toast{
  position:fixed;
  bottom:80px;right:20px;
  background:linear-gradient(180deg,hsl(128,68%,52%),hsl(126,62%,38%));
  border:1px solid hsl(124,55%,28%);
  color:#fff;
  padding:10px 16px;border-radius:6px;
  font-size:12.5px;font-weight:600;
  box-shadow:0 8px 24px hsla(215,60%,10%,.4), inset 0 1px 0 hsla(128,80%,80%,.4);
  z-index:9999;
  opacity:0;transform:translateY(20px);
  transition:opacity .3s, transform .3s;
  pointer-events:none;
}
.mc-toast.show{opacity:1;transform:none;}

/* ══════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════ */
.mc-lb{
  position:fixed;inset:0;z-index:9999;
  background:hsla(220,70%,5%,.92);
  display:none;align-items:center;justify-content:center;
  padding:40px;
  cursor:zoom-out;
}
.mc-lb.show{display:flex;}
.mc-lb img{
  max-width:92vw;max-height:88vh;
  border-radius:6px;
  box-shadow:0 24px 64px hsla(220,80%,3%,.6);
  cursor:default;
}
.mc-lb-x{
  position:absolute;top:18px;right:22px;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(180deg,hsl(2,82%,66%),hsl(0,72%,50%));
  border:1px solid hsl(0,60%,40%);color:#fff;
  display:grid;place-items:center;font-size:15px;cursor:pointer;
  box-shadow:0 4px 12px hsla(0,60%,15%,.5);
}
.mc-lb-x:hover{filter:brightness(1.15);}

/* Hide titles when window body is being scrolled */
.mc-h1{margin-bottom:4px;}


/* ══════════════════════════════════════════════════════
   v9 — PORTFOLIO PRO con slider GSAP
══════════════════════════════════════════════════════ */

/* Vista de grilla compacta — siempre múltiples columnas */
.mc-projects-grid{
  display:grid;
  gap:22px !important;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important;
  width:100%;
}

/* IMPORTANTE: el window body tiene padding fijo, así que el grid se calcula bien */
.mc-win-body .mc-page{max-width:100%;}

.mc-proj{
  border-radius:6px;overflow:hidden;
  background:#fff;
  border:1px solid hsla(210,50%,75%,.6);
  box-shadow:0 2px 6px hsla(215,40%,20%,.12);
  cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.2,.64,1), box-shadow .25s, border-color .25s;
  display:flex;flex-direction:column;
  width:100%;
}
.mc-proj:hover{
  transform:translateY(-3px) scale(1.025);
  box-shadow:0 10px 22px hsla(215,60%,15%,.3);
  border-color:hsl(210,80%,62%);
  z-index:2;
}
.mc-proj-img{
  position:relative;
  aspect-ratio:3/4 !important;
  width:100% !important;
  height:auto !important;
  background:linear-gradient(160deg,hsl(210,28%,94%),hsl(210,22%,88%));
  overflow:hidden;
  display:block;
}
.mc-proj-img img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  display:block;
  transition:transform .4s ease;
}
.mc-proj:hover .mc-proj-img img{transform:scale(1.07);}

.mc-proj-count{
  position:absolute;top:6px;right:6px;
  background:hsla(220,75%,12%,.78);
  color:#fff;font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:10px;
  backdrop-filter:blur(4px);
  display:inline-flex;align-items:center;gap:3px;
  z-index:3;
}
.mc-proj-count::before{content:'⊞';font-size:11px;line-height:1;}

.mc-proj-info{
  padding:12px 14px 14px;
  background:#fff;
}
.mc-proj-title{
  font-size:15px;font-weight:600;
  color:hsl(220,40%,18%);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mc-proj-sub{
  font-size:12.5px;color:hsl(220,25%,48%);
  margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Para Renders 3D — sigue siendo 16:9 */
.mc-render-grid{
  display:grid;
  gap:16px !important;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important;
  width:100%;
}
.mc-render-grid .mc-port-item{
  aspect-ratio:16/9 !important;
  width:100%;
}
.mc-render-grid .mc-port-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Para videos */
.mc-video-grid{
  display:grid;
  gap:16px !important;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr)) !important;
}
.mc-video-grid .mc-video-wrap{
  aspect-ratio:16/9 !important;
  width:100%;
}
.mc-video-grid video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

/* Video con botón de expandir */
.mc-video-wrap{cursor:pointer;}
.mc-video-expand{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;border-radius:5px;
  background:hsla(220,75%,12%,.7);
  color:#fff;font-size:13px;
  display:grid;place-items:center;
  backdrop-filter:blur(6px);
  border:1px solid hsla(210,80%,70%,.25);
  opacity:0;transition:opacity .15s;
  pointer-events:none;
  z-index:3;
}
.mc-video-wrap:hover .mc-video-expand{opacity:1;}

/* ══════════════════════════════════════════════════════
   MODALES Vista
══════════════════════════════════════════════════════ */
.mc-modal{
  position:fixed;inset:0;z-index:9000;
  background:hsla(220,70%,6%,.7);
  backdrop-filter:blur(4px);
  display:none !important;align-items:center;justify-content:center;
  padding:24px;
  font-family:var(--f);
}
.mc-modal.show{display:flex !important;}
.mc-modal:not(.show) video,
.mc-modal:not(.show) audio { display:none !important; }

.mc-modal-win{
  background:hsl(210,55%,96%);
  border-radius:8px;
  border:1px solid hsla(210,60%,80%,.7);
  box-shadow:0 30px 70px hsla(220,80%,4%,.65), inset 0 1px 0 hsla(200,100%,98%,.6);
  max-width:880px;width:100%;
  max-height:90vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:modal-in .3s cubic-bezier(.34,1.2,.64,1);
}
@keyframes modal-in{
  from { opacity:0; transform:scale(.92) translateY(20px); }
  to   { opacity:1; transform:none; }
}
.mc-modal-win--video{max-width:1100px;background:#0a0a0a;}
.mc-modal-win--checkout{max-width:920px;}

.mc-modal-bar{
  height:34px;flex-shrink:0;
  display:flex;align-items:center;gap:6px;padding:0 8px;
  background:var(--win-title);
  border-bottom:1px solid hsla(215,65%,42%,.5);
  box-shadow:inset 0 1px 0 hsla(210,100%,96%,.6);
}
.mc-modal-title{
  font-size:12.5px;font-weight:600;
  color:hsl(220,30%,18%);
  text-shadow:0 1px 0 hsla(210,70%,90%,.7);
  flex:1;
}

.mc-modal-body{
  padding:20px;flex:1;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
}
.mc-modal-body::-webkit-scrollbar{width:12px;}
.mc-modal-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,hsl(210,60%,72%),hsl(212,55%,58%));border-radius:3px;}

/* ── Modal proyecto: galería ── */
.mc-proj-hero{
  position:relative;
  background:hsl(210,25%,90%);
  border-radius:6px;
  overflow:hidden;
  min-height:380px;
  max-height:65vh;
  display:flex;align-items:center;justify-content:center;
  border:1px solid hsla(210,40%,75%,.5);
}
.mc-proj-hero img{
  max-width:100%;max-height:65vh;
  object-fit:contain;
  display:block;
}
.mc-proj-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:hsla(220,80%,15%,.7);
  border:1px solid hsla(210,80%,80%,.4);
  color:#fff;font-size:16px;cursor:pointer;
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:background .15s,transform .15s;
}
.mc-proj-nav:hover{background:hsla(220,80%,15%,.92);transform:translateY(-50%) scale(1.08);}
.mc-proj-prev{left:14px;}
.mc-proj-next{right:14px;}
.mc-proj-counter{
  position:absolute;bottom:12px;right:14px;
  background:hsla(220,75%,12%,.72);
  color:#fff;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:11px;
  backdrop-filter:blur(4px);
}
.mc-proj-thumbs{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:4px 0;
}
.mc-proj-thumb{
  width:64px;height:64px;
  border-radius:5px;overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  background:hsl(210,25%,90%);
  transition:border-color .15s,transform .15s;
}
.mc-proj-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.mc-proj-thumb:hover{transform:scale(1.05);}
.mc-proj-thumb.active{border-color:hsl(210,85%,55%);box-shadow:0 0 0 1px hsl(210,85%,55%);}
.mc-proj-sub{
  font-size:13px;color:hsl(220,30%,38%);
  padding:4px 0;
}

/* ── Modal video ── */
#mc-vid-player{
  width:100%;
  max-height:75vh;
  display:block;
  background:#000;
}

/* ══════════════════════════════════════════════════════
   CHECKOUT WIZARD
══════════════════════════════════════════════════════ */
.mc-checkout-body{
  padding:0;
  display:grid;
  grid-template-columns:1fr 260px;
  grid-template-rows:auto 1fr auto;
  gap:0;
  max-height:80vh;
}
.mc-stepper{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:center;
  gap:6px;
  padding:14px 18px;
  background:linear-gradient(180deg,hsla(210,65%,92%,.5),hsla(210,55%,88%,.4));
  border-bottom:1px solid hsla(210,50%,78%,.5);
  flex-wrap:wrap;
}
.mc-step{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;
  color:hsl(220,20%,55%);
  padding:5px 11px;border-radius:14px;
  background:transparent;
  transition:all .25s;
}
.mc-step-num{
  width:22px;height:22px;border-radius:50%;
  background:hsl(210,30%,82%);
  color:hsl(220,30%,40%);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;
  transition:all .25s;
}
.mc-step.active{
  background:linear-gradient(180deg,hsl(210,80%,72%),hsl(213,72%,56%));
  color:#fff;
  box-shadow:0 2px 8px hsla(213,60%,20%,.3),inset 0 1px 0 hsla(200,100%,95%,.4);
  text-shadow:0 1px 1px hsla(215,80%,15%,.5);
}
.mc-step.active .mc-step-num{
  background:#fff;color:hsl(213,80%,40%);
}
.mc-step.done{
  background:hsla(128,55%,85%,.7);
  color:hsl(128,55%,28%);
}
.mc-step.done .mc-step-num{
  background:hsl(128,60%,46%);color:#fff;
}
.mc-step-arrow{
  color:hsl(220,25%,65%);font-size:11px;
}

.mc-step-panel{
  display:none;
  padding:22px 24px;
  overflow-y:auto;
}
.mc-step-panel.active{display:block;animation:tab-fade .3s;}

.mc-step-title{
  font-size:15px;font-weight:600;
  color:hsl(220,55%,22%);
  margin:0 0 14px;
  display:flex;align-items:center;gap:6px;
}

.mc-form-grid{
  display:grid;gap:12px;
  grid-template-columns:1fr 1fr;
}
.mc-form-grid label{
  display:flex;flex-direction:column;gap:5px;
  font-size:11.5px;font-weight:600;
  color:hsl(220,40%,32%);
}
.mc-form-full{grid-column:1 / -1;}
.mc-form-grid input,
.mc-form-grid select{
  height:32px;
  padding:0 10px;
  border-radius:4px;
  border:1px solid hsl(210,40%,68%);
  background:#fff;
  font-family:var(--f);
  font-size:13px;
  color:hsl(220,40%,18%);
  font-weight:400;
  box-shadow:inset 0 1px 2px hsla(215,30%,40%,.12);
  transition:border-color .15s,box-shadow .15s;
}
.mc-form-grid input:focus,
.mc-form-grid select:focus{
  outline:none;
  border-color:hsl(213,80%,55%);
  box-shadow:inset 0 1px 2px hsla(215,30%,40%,.12), 0 0 0 3px hsla(213,80%,55%,.18);
}
.mc-form-grid input.err{
  border-color:hsl(0,70%,55%);
  background:hsl(0,80%,98%);
}

/* Métodos de pago */
.mc-pay-options{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:14px;
}
.mc-pay-opt{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:#fff;
  border:1px solid hsl(210,40%,75%);
  border-radius:5px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.mc-pay-opt:hover{background:hsla(210,80%,95%,.7);}
.mc-pay-opt input[type=radio]{margin:0;}
.mc-pay-opt input[type=radio]:checked + div strong{color:hsl(213,85%,38%);}
.mc-pay-opt:has(input:checked){
  border-color:hsl(213,80%,55%);
  background:hsla(213,80%,96%,.8);
  box-shadow:inset 0 1px 0 hsla(200,100%,98%,.7);
}
.mc-pay-opt strong{font-size:13px;color:hsl(220,40%,22%);display:block;}
.mc-pay-opt small{font-size:11.5px;color:hsl(220,25%,50%);display:block;margin-top:2px;}

.mc-card-fields{
  padding-top:12px;
  border-top:1px dashed hsl(210,40%,82%);
}

/* Resumen lateral del checkout */
.mc-checkout-summary{
  grid-row:1 / 4;
  grid-column:2;
  background:linear-gradient(180deg,hsla(210,75%,94%,.85),hsla(210,65%,88%,.85));
  border-left:1px solid hsla(210,50%,75%,.5);
  padding:18px 16px;
  overflow-y:auto;
}
.mc-checkout-summary h4{
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(220,50%,30%);margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid hsla(210,50%,70%,.5);
}
.mc-co-items{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:12px;
  max-height:200px;overflow-y:auto;
}
.mc-co-item{
  display:grid;grid-template-columns:32px 1fr auto;gap:8px;
  align-items:center;font-size:11.5px;
  padding:5px 0;border-bottom:1px solid hsla(210,40%,78%,.5);
}
.mc-co-item img{
  width:32px;height:32px;object-fit:contain;
  background:#fff;border-radius:3px;
  border:1px solid hsla(210,30%,80%,.6);
}
.mc-co-item-info{
  overflow:hidden;
  display:flex;flex-direction:column;
}
.mc-co-item-info span{
  font-weight:600;color:hsl(220,40%,22%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mc-co-item-info small{font-size:10px;color:hsl(220,25%,48%);}
.mc-co-item strong{font-size:11px;color:hsl(213,80%,38%);white-space:nowrap;}

.mc-co-row{
  display:flex;justify-content:space-between;
  font-size:12px;color:hsl(220,35%,35%);
  padding:5px 0;
}
.mc-co-row strong{color:hsl(220,45%,22%);}
.mc-co-total{
  border-top:1px solid hsla(210,50%,70%,.5);
  margin-top:8px;padding-top:10px;
  font-size:14px;
}
.mc-co-total strong{color:hsl(213,85%,32%);font-size:16px;}

/* Botones del checkout */
.mc-checkout-actions{
  grid-column:1 / 2;
  display:flex;gap:8px;align-items:center;
  padding:14px 24px;
  background:linear-gradient(180deg,hsl(210,38%,90%),hsl(210,34%,84%));
  border-top:1px solid hsl(210,40%,72%);
}
.mc-btn-cancel,
.mc-btn-next,
.mc-btn-pay,
.mc-btn-done{
  padding:8px 18px;border-radius:4px;
  font-family:var(--f);font-size:12.5px;font-weight:600;
  cursor:pointer;letter-spacing:.01em;
  transition:filter .15s,transform .08s;
  box-shadow:inset 0 1px 0 hsla(255,100%,100%,.4),0 1px 2px hsla(215,60%,10%,.15);
}
.mc-btn-cancel{
  background:linear-gradient(180deg,hsl(210,30%,92%),hsl(210,25%,82%));
  border:1px solid hsl(210,30%,65%);
  color:hsl(220,35%,28%);
}
.mc-btn-next,
.mc-btn-pay,
.mc-btn-done{
  margin-left:auto;
  border:1px solid hsl(214,55%,38%);
  color:#fff;
  text-shadow:0 1px 1px hsla(215,80%,15%,.5);
}
.mc-btn-next{
  background:linear-gradient(180deg,hsl(210,75%,68%),hsl(213,70%,52%),hsl(216,68%,46%) 49%,hsl(218,65%,50%));
}
.mc-btn-pay{
  background:linear-gradient(180deg,hsl(128,68%,55%),hsl(126,64%,42%),hsl(124,60%,36%) 49%,hsl(126,58%,40%));
  border-color:hsl(124,55%,28%);
}
.mc-btn-done{
  background:linear-gradient(180deg,hsl(128,68%,55%),hsl(126,64%,42%));
  border-color:hsl(124,55%,28%);
}
.mc-btn-cancel:hover,.mc-btn-next:hover,.mc-btn-pay:hover,.mc-btn-done:hover{filter:brightness(1.1);}
.mc-btn-cancel:active,.mc-btn-next:active,.mc-btn-pay:active,.mc-btn-done:active{transform:scale(.97);}
.mc-btn-cancel:disabled{opacity:.5;cursor:not-allowed;}

/* Pantalla de éxito */
.mc-success-icon{
  display:grid;place-items:center;
  margin:14px 0 6px;
}
.mc-success-check{
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,hsl(128,75%,62%),hsl(126,68%,42%),hsl(124,60%,28%));
  color:#fff;font-size:36px;
  display:grid;place-items:center;
  box-shadow:0 8px 24px hsla(126,60%,20%,.4),inset 0 1px 2px hsla(128,80%,85%,.5);
  border:2px solid hsl(124,55%,28%);
  animation:check-pop .5s cubic-bezier(.34,1.5,.64,1);
}
@keyframes check-pop{from{transform:scale(0);opacity:0;}}
.mc-order-summary{
  background:#fff;border:1px solid hsl(210,40%,80%);border-radius:5px;
  padding:14px;margin-top:16px;font-size:12.5px;color:hsl(220,35%,30%);
}

/* Responsive checkout */
@media (max-width:760px){
  .mc-checkout-body{grid-template-columns:1fr;}
  .mc-checkout-summary{grid-row:auto;grid-column:1;border-left:none;border-top:1px solid hsla(210,50%,75%,.5);}
  .mc-form-grid{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════
   v9 — Overrides defensivos contra el tema de WordPress
══════════════════════════════════════════════════════ */

/* Forzar que ninguna imagen dentro del portfolio crezca más allá del grid */
.mc-win-body img{
  max-width:100% !important;
  height:auto;
}
.mc-win-body .mc-proj img,
.mc-win-body .mc-port-item img,
.mc-win-body .mc-prod img{
  height:100% !important;
}

/* El tema puede agregar márgenes/padding al body o sections — bloqueamos */
.mc figure, .mc .wp-block-image, .mc .wp-caption{
  margin:0 !important;padding:0 !important;
  display:block;
}

/* ══════════════════════════════════════════════════════
   v9 — Marquee shimmer effect en títulos (Frutiger Aero)
══════════════════════════════════════════════════════ */
.mc-h1{
  background:linear-gradient(100deg,
    hsl(220,40%,22%) 25%,
    hsl(210,90%,55%) 45%,
    hsl(220,40%,22%) 65%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:mc-shimmer 4s linear infinite;
}
.mc-h1 strong{
  background:linear-gradient(100deg,
    hsl(210,88%,54%) 25%,
    hsl(200,100%,80%) 45%,
    hsl(210,88%,54%) 65%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation:mc-shimmer 4s linear infinite;
}
@keyframes mc-shimmer{
  from{background-position:200% center;}
  to  {background-position:-200% center;}
}

/* ══════════════════════════════════════════════════════
   v10 — EXPOSÉ mejorado con previews reales
══════════════════════════════════════════════════════ */
.mc-eth-frame{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  border-radius:5px; overflow:hidden;
  box-shadow:0 8px 24px hsla(220,80%,4%,.4);
}
.mc-eth-titlebar{
  height:22px; flex-shrink:0;
  display:flex; align-items:center;
  padding:0 8px; gap:4px;
  background:linear-gradient(180deg, hsl(210,85%,76%), hsl(213,78%,60%));
  border-bottom:1px solid hsla(215,65%,42%,.5);
  box-shadow:inset 0 1px 0 hsla(210,100%,96%,.55);
}
.mc-eth-title{
  font-size:10.5px; font-weight:600;
  color:hsl(220,30%,20%);
  text-shadow:0 1px 0 hsla(210,70%,90%,.6);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  flex:1;
}
.mc-eth-btns{ display:flex; gap:2px; }
.mc-eth-btn{
  width:12px; height:12px;
  border-radius:2px;
  border:1px solid;
}
.mc-eth-btn-min{
  background:linear-gradient(180deg,hsl(207,75%,70%),hsl(212,68%,54%));
  border-color:hsl(212,58%,44%);
}
.mc-eth-btn-cls{
  background:linear-gradient(180deg,hsl(2,82%,66%),hsl(0,72%,50%));
  border-color:hsl(0,60%,40%);
}
.mc-eth-content{ flex:1; overflow:hidden; position:relative; }

/* ══════════════════════════════════════════════════════
   v12 — Team members con fotos reales
══════════════════════════════════════════════════════ */
.mc-team{
  display:grid !important;
  gap:20px !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  margin-top:16px;
}
.mc-member{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:22px 18px 20px;
  border-radius:8px;
  text-align:center;
  background:linear-gradient(180deg,hsla(210,70%,98%,.9),hsla(210,55%,90%,.85));
  border:1px solid hsla(210,55%,78%,.6);
  box-shadow:inset 0 1px 0 hsla(200,100%,98%,.7), 0 4px 14px hsla(215,40%,20%,.15);
  transition:transform .25s cubic-bezier(.34,1.2,.64,1), box-shadow .25s;
}
.mc-member:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 hsla(200,100%,98%,.7), 0 10px 22px hsla(215,50%,15%,.28);
}
.mc-avatar-photo{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  min-height:96px !important;
  max-width:96px !important;
  max-height:96px !important;
  border-radius:50% !important;
  overflow:hidden;
  border:2px solid hsl(210,80%,72%);
  box-shadow:
    0 0 0 2px hsl(0,0%,100%),
    0 4px 12px hsla(215,60%,20%,.3),
    inset 0 1px 3px hsla(200,100%,98%,.4);
  background-color:hsl(210,25%,88%);
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  flex-shrink:0;
  display:block;
}
.mc-member h4{
  font-size:14.5px !important;
  font-weight:700 !important;
  color:hsl(220,55%,22%) !important;
  line-height:1.3;
  margin:0;
}
.mc-member p{
  font-size:12px !important;
  color:hsl(220,25%,45%) !important;
  line-height:1.5;
  margin:0;
}


/* v6.4 — Cursor Windows XP, navegación modal y slider centrado */
#mc-root,
#mc-root * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2v22l5.5-5.2 4.1 9.1 4.1-1.9-4-8.7H21z' fill='%23fff' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
}
#mc-root a,
#mc-root button,
#mc-root [role="button"],
#mc-root .mc-tab,
#mc-root .mc-proj,
#mc-root .mc-video-wrap,
#mc-root .mc-desktop-icon,
#mc-root .mc-task-btn,
#mc-root .mc-ctrl,
#mc-root .mc-proj-thumb,
#mc-root input[type="button"],
#mc-root input[type="submit"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M10 4c0-1.7 2.8-1.7 2.8 0v8h.7V8c0-1.7 2.8-1.7 2.8 0v4h.7V9.5c0-1.7 2.8-1.7 2.8 0V12h.7v-1c0-1.7 2.8-1.7 2.8 0v7.5c0 5-3.3 9-8.3 9h-1.8c-3.2 0-5.2-1.7-6.8-4.3l-3.2-5.1c-.9-1.5 1.4-3 2.5-1.7l2.5 2.8V4z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 9 3, pointer;
}

.mc-projects-slider[data-slider="posters"] {
  justify-content:center !important;
  margin-inline:auto !important;
}

.mc-video-modal-body{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:320px;
  background:#050505;
}
.mc-video-modal-body video{
  width:100%;
  max-height:78vh;
  display:block;
}
.mc-video-modal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:8;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid hsl(212,60%,48%);
  background:linear-gradient(180deg,hsla(210,80%,80%,.96),hsla(213,72%,55%,.96));
  color:#fff;
  font-size:22px;
  font-weight:700;
  box-shadow:0 5px 16px hsla(215,70%,5%,.55), inset 0 1px 0 hsla(200,100%,95%,.6);
  text-shadow:0 1px 2px hsla(215,80%,15%,.7);
}
.mc-video-modal-prev{left:14px;}
.mc-video-modal-next{right:14px;}
.mc-video-modal-counter{
  position:absolute;
  right:16px;
  bottom:14px;
  z-index:8;
  padding:4px 9px;
  border-radius:4px;
  background:hsla(220,70%,8%,.74);
  color:#fff;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(5px);
}
@media (max-width:1100px){
  .mc-projects-slider[data-slider="posters"]{justify-content:flex-start !important;}
}
@media (max-width:700px){
  .mc-video-modal-nav{width:40px;height:40px;font-size:18px;}
  .mc-video-modal-prev{left:8px;}
  .mc-video-modal-next{right:8px;}
}


/* v6.5 — Posters ligeramente más grandes */
.mc-projects-slider[data-slider="posters"] .mc-proj{
  flex-basis:330px !important;
}
@media (max-width:700px){
  .mc-projects-slider[data-slider="posters"] .mc-proj{
    flex-basis:min(86vw,330px) !important;
  }
}


/* v6.7 — tipografia uniforme, iconos limpios y retratos ajustados */
.mc-icon{
  width:96px !important;
  gap:6px !important;
}
.mc-icon img{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
}
.mc-icon--labeled span{
  display:block !important;
  font-family:'Segoe UI',Tahoma,sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  color:#fff !important;
  text-align:center !important;
  margin-top:0 !important;
  min-height:16px;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.8) !important;
}
.mc-member h4{
  font-size:15px !important;
  line-height:1.25 !important;
  min-height:19px;
}
.mc-member p{
  font-size:13px !important;
  line-height:1.4 !important;
  min-height:18px;
}
.mc-member img{ transform-origin:center center; }

/* v6.8 — evita etiquetas duplicadas en iconos cuyo PNG ya incluye texto */
.mc-icon:not(.mc-icon--labeled) span{display:none !important;}

/* v6.9 — todos los iconos usan etiquetas HTML uniformes */
.mc-icon span,
.mc-icon--labeled span,
.mc-icon:not(.mc-icon--labeled) span{
  display:block !important;
  width:100%;
  min-height:16px;
  margin-top:2px !important;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:16px !important;
  letter-spacing:0 !important;
  color:#fff !important;
  text-align:center !important;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.98),0 0 4px rgba(0,0,0,.85) !important;
}
.mc-icon img{
  width:64px !important;
  height:64px !important;
  object-fit:contain !important;
}

/* v7.0 — etiquetas de escritorio estrictamente idénticas */
#mc-root .mc-icon,
#mc-root .mc-icon--labeled {
  width: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}
#mc-root .mc-icon img,
#mc-root .mc-icon--labeled img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;
  object-fit: contain !important;
}
#mc-root .mc-icon > span,
#mc-root .mc-icon--labeled > span,
#mc-root .mc-icon:not(.mc-icon--labeled) > span {
  display: block !important;
  box-sizing: border-box !important;
  width: 96px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px #10294b, -1px -1px 1px rgba(16,41,75,.65), 0 0 3px rgba(16,41,75,.9) !important;
}

/* v7.1 — uploaded text-free desktop icons */


/* v7.2 — Instagram más grande/cercano y Paint actualizado */
#mc-root .mc-icon[href*="instagram"] { gap: 1px !important; }
#mc-root .mc-icon[href*="instagram"] img {
  width: 76px !important;
  height: 76px !important;
  margin-bottom: -2px !important;
}
#mc-root #mc-paint-btn img {
  width: 70px !important;
  height: 70px !important;
}

/* v7.3 — Instagram: icono realmente recortado, más grande y pegado al texto */
#mc-root .mc-icon[href*="instagram"] {
  gap: 0 !important;
  padding-top: 2px !important;
}
#mc-root .mc-icon[href*="instagram"] img {
  width: 88px !important;
  height: 88px !important;
  margin: 0 0 -8px 0 !important;
  object-fit: contain !important;
}

@media (max-width: 980px){.mc-team{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width: 620px){.mc-team{grid-template-columns:1fr !important;}}

/* v7.9 — Video de equipo y Paint integrado */
.mc-team-video-wrap{
  margin:28px auto 10px;
  width:min(100%,1100px);
  overflow:hidden;
  border:1px solid hsl(214,50%,53%);
  border-radius:7px;
  background:#0b1725;
  box-shadow:0 10px 28px hsla(214,45%,15%,.24), inset 0 1px 0 rgba(255,255,255,.65);
}
.mc-team-video-titlebar{
  height:31px;
  display:flex;
  align-items:center;
  padding:0 11px;
  font:700 12px Tahoma,Arial,sans-serif;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  background:linear-gradient(#62a8ef,#1f73cf 52%,#0e58b5 53%,#2b83db);
  border-bottom:1px solid #0b4d9f;
}
.mc-team-video{display:block;width:100%;max-height:calc(100vh - 210px);background:#000;object-fit:contain;}
.mc-paint-frame-wrap{position:relative;flex:1;min-height:0;background:#d4d0c8;overflow:hidden;}
.mc-paint-frame{display:block;width:100%;height:100%;min-height:520px;border:0;background:#fff;}
.mc-paint-fallback{position:absolute;right:12px;bottom:10px;padding:7px 10px;border:1px solid #174f91;border-radius:4px;background:linear-gradient(#fff,#d9eaff);font:700 11px Tahoma,Arial,sans-serif;color:#174f91;text-decoration:none;box-shadow:0 2px 7px rgba(0,0,0,.22);}
@media(max-width:700px){.mc-team-video-wrap{margin-top:20px}.mc-paint-frame{min-height:420px;}}

/* v8.0 — Brandboard bajo demanda y Paint compacto */
.mc-brandboard-launch{
  display:flex;
  justify-content:center;
  margin:30px auto 12px;
}
.mc-xp-button{
  min-width:190px;
  min-height:38px;
  padding:7px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid #003c74;
  border-radius:4px;
  background:linear-gradient(180deg,#fff 0%,#f4f4ee 48%,#e3e3d8 49%,#f7f7f2 100%);
  box-shadow:inset 0 0 0 1px #fff, inset 0 -2px 0 rgba(0,0,0,.08), 0 2px 5px rgba(0,0,0,.18);
  color:#16365c;
  font:700 13px Tahoma,Arial,sans-serif;
  text-shadow:0 1px 0 #fff;
  cursor:pointer;
}
.mc-xp-button:hover{background:linear-gradient(180deg,#fff,#eef6ff 48%,#d8eaff 49%,#f8fbff);border-color:#1767ad;}
.mc-xp-button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18);}
.mc-xp-button-icon{font-size:12px;color:#2e8b22;filter:drop-shadow(0 1px 0 #fff);}
.mc-team-video-wrap[hidden]{display:none !important;}
.mc-team-video-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92%,980px);
  max-height:calc(100% - 48px);
  margin:0;
  z-index:60;
  overflow:hidden;
}
.mc-team-video-titlebar{justify-content:space-between;}
.mc-brandboard-close{
  width:20px;height:20px;display:grid;place-items:center;padding:0;
  border:1px solid #8b1b12;border-radius:3px;
  background:linear-gradient(#ff8a78,#d83f2d 55%,#bd261a 56%,#ea5d4c);
  color:#fff;font:700 14px/1 Tahoma,Arial,sans-serif;cursor:pointer;
}
#mc-win-paint{
  inset:7vh 8vw calc(var(--tb-h) + 7vh) 8vw;
  border-radius:8px;
}
#mc-win-paint .mc-paint-frame{min-height:0;height:100%;}
@media (min-width:1500px){#mc-win-paint{inset:9vh 11vw calc(var(--tb-h) + 9vh) 11vw;}}
@media (max-width:900px){
  #mc-win-paint{inset:4vh 3vw calc(var(--tb-h) + 4vh) 3vw;}
  .mc-team-video-wrap{width:94%;max-height:calc(100% - 32px);}
  .mc-team-video{max-height:calc(100vh - 180px);}
}
@media (max-width:620px){
  .mc-brandboard-launch,.mc-team-video-wrap{display:none !important;}
  #mc-win-paint{inset:0 0 var(--tb-h) 0;border-radius:0;}
}

/* v8.2 — Brandboard cargado desde assets/brandboard */
.mc-brandboard-upload-note{
  display:inline-block;
  max-width:760px;
  padding:8px 12px;
  border:1px solid #8aa8c8;
  background:#f4f8fc;
  color:#24415f;
  font:12px/1.45 Tahoma,Arial,sans-serif;
  box-shadow:inset 1px 1px #fff;
}
.mc-brandboard-upload-note code{font:11px Consolas,monospace;}


/* v8.4 — Imagen de marca */
.mc-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid hsl(212,60%,48%);background:linear-gradient(180deg,hsl(210,80%,80%),hsl(213,72%,60%));color:#fff;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px hsla(215,60%,15%,.35),inset 0 1px 0 hsla(200,100%,95%,.5)}
.mc-slider-arrow-prev{left:-6px}.mc-slider-arrow-next{right:-6px}
.mc-file-card{min-height:290px;border:1px solid #9db8d6;border-radius:8px;background:linear-gradient(#fff,#eaf3fc);box-shadow:0 3px 10px rgba(30,60,90,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#203652!important;text-align:center}
.mc-pdf-icon{width:96px;height:120px;border-radius:6px;background:linear-gradient(135deg,#d92323,#a90000);color:#fff;font:bold 26px Tahoma,sans-serif;display:grid;place-items:center;box-shadow:0 5px 14px rgba(0,0,0,.25);margin-bottom:18px}


/* v8.9 — la portada del PDF es la tarjeta clickeable */
.mc-file-card:has(.mc-pdf-preview-link){
  flex-basis:clamp(360px,42vw,560px) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:0 4px 14px hsla(215,45%,20%,.22) !important;
}
.mc-pdf-preview-link{
  border:1px solid #8eb5dc;
  border-radius:8px;
  box-sizing:border-box;
}
.mc-pdf-preview-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:5px 10px;
  border:1px solid #184b83;
  border-radius:4px;
  background:linear-gradient(#fff,#d9eafa);
  color:#143b69;
  font:700 12px Tahoma,Arial,sans-serif;
  opacity:0;
  transform:translateY(4px);
  transition:.18s ease;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
}
.mc-file-card:hover .mc-pdf-preview-hint,
.mc-file-card:focus-visible .mc-pdf-preview-hint{
  opacity:1;
  transform:none;
}

/* v9.0 — PDF preview enlazado y manifiesto */
.mc-pdf-card{cursor:pointer!important;}
.mc-pdf-card:hover{filter:brightness(1.03);box-shadow:0 6px 18px rgba(30,60,90,.28);}
.mc-manifiesto-launch{margin-top:12px;}


/* v9.1 — botones lado a lado + portada PDF sin recorte */
.mc-brandboard-launch,
.mc-manifiesto-launch{
  display:inline-flex;
  vertical-align:top;
  margin:0 14px 18px 0;
}
.mc-manifiesto-launch{margin-top:0;}

.mc-pdf-card{
  align-items:stretch;
  justify-content:flex-start;
}
.mc-pdf-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:#111;
}

@media (max-width:700px){
  .mc-brandboard-launch,
  .mc-manifiesto-launch{
    display:flex;
    margin:0 0 12px 0;
  }
}


/* v9.2 — launch row, logo de ventana, portada de video */
.mc-launch-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  width:min(720px,100%);
  margin:30px auto 12px;
}
.mc-launch-row .mc-brandboard-launch,
.mc-launch-row .mc-manifiesto-launch{
  display:flex;
  flex:1 1 0;
  margin:0;
}
.mc-launch-row .mc-brandboard-launch{justify-content:flex-start;}
.mc-launch-row .mc-manifiesto-launch{justify-content:flex-end;}
@media (max-width:700px){
  .mc-launch-row{
    flex-direction:column;
    gap:12px;
    width:100%;
  }
  .mc-launch-row .mc-brandboard-launch,
  .mc-launch-row .mc-manifiesto-launch{
    justify-content:center;
  }
}


/* v9.3 — pestaña Webs */
.mc-webs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  width:100%;
  padding:12px 8px 28px;
}
.mc-web-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border:1px solid hsla(210,55%,70%,.72);
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#edf5fd);
  color:hsl(220,45%,20%) !important;
  text-decoration:none !important;
  box-shadow:0 4px 14px hsla(215,45%,20%,.18);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mc-web-card:hover{
  transform:translateY(-4px);
  border-color:hsl(210,75%,58%);
  box-shadow:0 10px 24px hsla(215,55%,18%,.26);
}
.mc-web-card-image{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#09090c;
}
.mc-web-card-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}
.mc-web-card-info{
  padding:14px 15px 16px;
  background:linear-gradient(180deg,#fff,#edf5fd);
}
.mc-web-card-title{
  font:700 15px/1.3 Tahoma,Arial,sans-serif;
  color:hsl(220,48%,20%);
}
.mc-web-card-url{
  margin-top:5px;
  overflow:hidden;
  color:hsl(215,30%,48%);
  font:12px/1.35 Tahoma,Arial,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:1000px){
  .mc-webs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:650px){
  .mc-webs-grid{grid-template-columns:1fr;}
}


/* v9.4 — contacto Gmail + Instagram */
.mc-contact-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  flex-wrap:wrap;
}
.mc-contact-btn{
  min-width:170px;
  min-height:42px;
  padding:7px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #174f91;
  border-radius:4px;
  background:linear-gradient(#fff,#e7e3d8 48%,#d7d2c5 49%,#f7f5ee);
  box-shadow:inset 1px 1px #fff,0 2px 5px rgba(0,0,0,.22);
  color:#14345e!important;
  text-decoration:none!important;
  font:700 13px Tahoma,Arial,sans-serif;
  text-shadow:0 1px #fff;
  cursor:pointer;
}
.mc-contact-btn:hover{
  background:linear-gradient(#fff,#f0eadf 48%,#ded7c8 49%,#fffdf7);
  box-shadow:inset 1px 1px #fff,0 3px 8px rgba(0,0,0,.26);
}
.mc-contact-btn:active{
  transform:translateY(1px);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.2);
}
.mc-contact-mail-icon{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:4px;
  background:linear-gradient(135deg,#e54b3f,#b6231b);
  color:#fff;
  font:700 18px/1 Arial,sans-serif;
  text-shadow:none;
  box-shadow:inset 0 1px rgba(255,255,255,.55);
}
.mc-contact-instagram img{
  width:30px!important;
  height:30px!important;
  object-fit:contain!important;
  display:block!important;
}
@media(max-width:620px){
  .mc-contact-actions{align-items:stretch;}
  .mc-contact-btn{width:100%;}
}


/* v9.6 — Seguros Vásquez agrupado */
.mc-brand-project-card{position:relative;aspect-ratio:16/10;border:1px solid #7fa9d5;border-radius:8px;overflow:hidden;padding:0;background:#111;cursor:pointer;box-shadow:0 4px 14px rgba(24,55,90,.25)}
.mc-brand-project-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.mc-brand-project-card:hover img{transform:scale(1.025)}
.mc-brand-project-overlay{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;text-align:left;background:linear-gradient(transparent,rgba(5,18,35,.92));color:#fff;display:flex;flex-direction:column;gap:3px}.mc-brand-project-overlay strong{font:700 16px Tahoma,Arial,sans-serif}.mc-brand-project-overlay small{font:12px Tahoma,Arial,sans-serif;opacity:.85}
.mc-brand-project-fallback{width:100%;height:100%;display:grid;place-items:center;color:#fff;font:700 72px Georgia,serif;background:#34487f}
.mc-brand-project-window{max-width:1120px;background:#eef5fc}.mc-brand-project-body{position:relative;overflow:hidden}
.mc-brand-project-stage{min-height:420px;max-height:68vh;border:1px solid #9bb6d3;border-radius:6px;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mc-brand-project-stage img,.mc-brand-project-stage video{max-width:100%;max-height:68vh;width:auto;height:auto;object-fit:contain;display:block}
.mc-brand-project-thumbs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px}.mc-brand-project-thumb{flex:0 0 76px;height:58px;padding:0;border:2px solid transparent;border-radius:5px;overflow:hidden;background:#dfeaf6;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;flex-direction:column;color:#1b3b63}.mc-brand-project-thumb.active{border-color:#2b78c5;box-shadow:0 0 0 1px #fff inset}.mc-brand-project-thumb img{width:100%;height:100%;object-fit:cover;display:block}.mc-brand-project-thumb span{font-size:20px}.mc-brand-project-thumb small{font:10px Tahoma,Arial,sans-serif}.mc-brand-pdf-link{align-self:flex-start;text-decoration:none;color:#17385f!important}
@media(max-width:700px){.mc-brand-project-stage{min-height:260px}.mc-brand-project-window{max-width:96vw}.mc-brand-project-card{flex-basis:88vw!important}}