/* VisuProd — estudio de mockups, animación de portada y redes. Estilo blanco, tokens de main.css. */

/* ---------- estudio ---------- */
.mkhero{padding-top:calc(var(--nav-h) + clamp(1.5rem,4vw,3rem));padding-bottom:clamp(1rem,3vw,2rem)}
.mkhero .lead{max-width:62ch;margin-top:var(--sp-2)}
.mkstudio{padding-top:clamp(.5rem,2vw,1.5rem)}
.mkwrap{display:grid;grid-template-columns:minmax(290px,360px) 1fr;gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.mkpanel{position:-webkit-sticky;position:sticky;top:calc(var(--nav-h) + 1rem);display:flex;flex-direction:column;gap:1.15rem;background:var(--c-bg-2);border:1px solid var(--c-line-soft);border-radius:var(--r-lg);padding:1.25rem;max-height:calc(100vh - var(--nav-h) - 2rem);overflow:auto}
.mkpanel h2{font-size:var(--fs-md);letter-spacing:-.01em}
.mkf{display:flex;flex-direction:column;gap:.45rem}
.mkf>label,.mkf>.lab{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted)}
.mkf input[type=text]{width:100%;padding:.75rem .9rem;border:1px solid var(--c-line);border-radius:var(--r-md);font:inherit;font-size:1.05rem;background:#fff;color:var(--c-text)}
.mkf input[type=text]:focus{outline:2px solid var(--c-accent);outline-offset:1px}
.seg{display:flex;flex-wrap:wrap;gap:.35rem}
.seg button{padding:.5rem .8rem;border:1px solid var(--c-line);border-radius:100px;background:#fff;font:inherit;font-size:var(--fs-xs);font-weight:500;cursor:pointer;color:var(--c-text)}
.seg button.on{background:var(--c-text);color:#fff;border-color:var(--c-text)}
.fonts{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.fontbtn{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .3rem;border:1px solid var(--c-line);border-radius:var(--r-md);background:#fff;cursor:pointer;color:var(--c-text)}
.fontbtn .fb__aa{font-size:1.5rem;line-height:1.1}
.fontbtn .fb__n{font-family:var(--font);font-size:.66rem;font-weight:500;letter-spacing:.04em;color:var(--c-text-muted)}
.fontbtn.on{border-color:var(--c-accent);box-shadow:0 0 0 2px rgba(255,91,31,.25)}
.swatches{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.swatch{width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--c-line);cursor:pointer}
.swatch.on{box-shadow:0 0 0 2px var(--c-text)}
.swatches input[type=color]{width:2rem;height:2rem;padding:0;border:1px solid var(--c-line);border-radius:50%;background:#fff;cursor:pointer}
.mkf input[type=range]{width:100%;accent-color:var(--c-accent)}
.mkup{display:flex;flex-direction:column;gap:.5rem;padding:.9rem;border:1.5px dashed var(--c-line);border-radius:var(--r-md);background:#fff}
.mkup input[type=file]{font-size:var(--fs-xs)}
.mkup small{color:var(--c-text-muted)}
.mkup label.chk{display:flex;gap:.45rem;align-items:center;font-size:var(--fs-xs);color:var(--c-text-soft)}
.mkup__ok{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:var(--fs-xs)}
.mkup__ok button{border:0;background:none;color:var(--c-accent);cursor:pointer;font:inherit;text-decoration:underline}

.mkbar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mkbar .seg button{background:var(--c-bg-2)}
.mkbar .seg button.on{background:var(--c-text)}
.mkcount{font-size:var(--fs-xs);color:var(--c-text-muted)}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(.6rem,1.4vw,1rem)}
.mk{position:relative;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:#E8E8EA;border:1px solid var(--c-line-soft)}
.mk--black{background:#26262B}
.mk__base,.mk__cv{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.mk__lg{position:absolute;height:auto;pointer-events:none}
.mk__cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.5rem .6rem;background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,0));font-size:.72rem;font-weight:600;letter-spacing:.04em;color:#222}
.mk--black .mk__cap{background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));color:#fff}
.mk__act{display:flex;gap:.3rem;opacity:0;transition:opacity .2s}
.mk:hover .mk__act,.mk:focus-within .mk__act,.mk.is-sel .mk__act{opacity:1}
@media (hover:none){.mk__act{opacity:1}}
.mk__act button{width:1.9rem;height:1.9rem;border-radius:50%;border:0;background:#fff;color:#111;cursor:pointer;font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.mk.is-sel .mk__sel{background:var(--c-accent);color:#fff}
.mk.is-sel{outline:3px solid var(--c-accent);outline-offset:-3px}
.mkact{position:-webkit-sticky;position:sticky;bottom:.75rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-top:1.25rem;padding:.8rem 1rem;border-radius:100px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--c-line);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.mkact__l{font-size:var(--fs-sm);color:var(--c-text-soft)}
.mkact__r{display:flex;flex-wrap:wrap;gap:.5rem}
.mknote{font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:.75rem;max-width:70ch}
@media (max-width:900px){.mkwrap{grid-template-columns:1fr}.mkpanel{position:static;max-height:none}.mkact{border-radius:var(--r-lg)}}

/* ---------- animación de portada: desfile de mockups ---------- */
.parade{position:relative;padding-block:clamp(1.25rem,3vw,2.25rem) clamp(1.75rem,4vw,3rem);overflow:hidden;background:var(--c-bg)}
.parade__head{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;justify-content:space-between;margin-bottom:1.25rem}
.parade__head h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.05}
.parade__row{display:flex;gap:clamp(.7rem,1.6vw,1.1rem);width:max-content;animation:paradeRun 46s linear infinite;will-change:transform}
.parade:hover .parade__row{animation-play-state:paused}
@keyframes paradeRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pd{position:relative;flex:0 0 auto;width:clamp(190px,21vw,300px);aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;background:#E8E8EA;border:1px solid var(--c-line-soft)}
.pd img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease}
.pd .pd__b{opacity:0}
.pd.k .pd__b{opacity:1}
.pd .pd__lg{position:absolute;height:auto;pointer-events:none;transition:opacity .45s ease,transform .6s var(--ease-out)}
.pd .pd__lg.out{opacity:0;transform:translate(-50%,-50%) scale(.85) !important}
.pd__tag{position:absolute;left:.6rem;bottom:.55rem;padding:.18rem .6rem;border-radius:100px;background:rgba(255,255,255,.9);font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#222;transition:background .5s,color .5s}
.pd.k .pd__tag{background:rgba(0,0,0,.65);color:#fff}
@media (prefers-reduced-motion:reduce){.parade__row{animation:none;overflow-x:auto}}

/* ---------- redes ---------- */
.social{display:flex;flex-wrap:wrap;gap:.6rem}
.social a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1px solid var(--c-line);border-radius:100px;font-size:var(--fs-sm);font-weight:500;background:#fff;transition:border-color .25s,transform .25s}
.social a:hover{border-color:var(--c-accent);transform:translateY(-2px)}
.social svg{width:1.1rem;height:1.1rem}
.msocial{padding-block:clamp(1.5rem,4vw,3rem)}
.msocial__box{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r-lg);background:var(--c-bg-2)}
.msocial__box h2{font-size:var(--fs-lg);letter-spacing:-.01em}
.msocial__box p{color:var(--c-text-soft);max-width:48ch;margin-top:.25rem}
.nav__link--hl{color:var(--c-accent)}

.mkhero .mhero__title{font-size:clamp(2.25rem,5vw,4rem)}
@media (min-width:901px){.mkact{margin-right:5.5rem}}

.mk__t{display:flex;flex-direction:column;line-height:1.15;min-width:0}.mk__t b{font-weight:600;font-size:.72rem}.mk__t small{font-weight:500;font-size:.62rem;letter-spacing:.08em;opacity:.7}

/* menu más compacto con el nuevo enlace */
.nav__links{gap:clamp(.9rem,1.6vw,1.8rem)}
@media (max-width:1560px){.nav .brand-tag{display:none}}

/* ---------- menú: submenú Visual Product + botón Crea tu mockup ---------- */
.nav .brand-tag{display:none}
@media (min-width:1500px){.nav .brand-tag{display:inline-block}}
.nav__dd{position:relative;display:flex;align-items:center}
.nav__dd__btn{background:none;border:0;font-family:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.nav__dd__car{font-size:.7em;transition:transform .25s}
.nav__dd.is-open .nav__dd__car{transform:rotate(180deg)}
.nav__dd__panel{position:absolute;top:calc(100% + .6rem);left:50%;width:min(460px,92vw);transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;background:#fff;color:#0B0A0C;border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(11,10,12,.16);padding:.85rem;transition:opacity .22s,transform .22s,visibility .22s;z-index:60}
.nav__dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:.8rem}
.nav__dd.is-open .nav__dd__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav__dd__panel a{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .7rem;border-radius:var(--r-md);text-transform:none;letter-spacing:0;color:#0B0A0C}
.nav__dd__panel a b{font-size:.92rem;font-weight:600}
.nav__dd__panel a span{font-size:.76rem;color:rgba(11,10,12,.55);font-weight:400}
.nav__dd__panel a:hover{background:var(--c-bg-2)}
.nav__dd__main{background:var(--c-bg-2);margin-bottom:.4rem}
.nav__dd__grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.nav__dd__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.6rem;padding:.7rem .4rem .1rem;border-top:1px solid var(--c-line)}
.nav__dd__soc{display:flex;gap:.35rem}
.nav__dd__panel .nav__dd__soc a{flex-direction:row;padding:.5rem;border:1px solid var(--c-line);border-radius:50%}
.nav__dd__soc svg{width:1.05rem;height:1.05rem}
.nav__dd__panel .btn{padding:.55rem 1.1rem;color:#fff}
.nav__cta{background:var(--gradient);color:#fff !important;border-color:transparent}
.nav__cta:hover{filter:brightness(1.08)}
.nav__cta[aria-current="page"]{box-shadow:0 0 0 2px rgba(255,91,31,.3)}
.nav__link[aria-current="page"]{color:var(--c-accent);opacity:1}
@media (max-width:1100px){.nav__links{display:none}}

/* ---------- portada con efecto ---------- */
.mhero--fx{position:relative;overflow:hidden;isolation:isolate}
.mhero__bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}
.mhero__bg i{position:absolute;border-radius:50%;-webkit-filter:blur(70px);filter:blur(70px);opacity:.5;will-change:transform}
.mhero__bg i:nth-child(1){width:42vw;height:42vw;max-width:620px;max-height:620px;right:-6vw;top:-8vw;background:radial-gradient(circle,#FF5B1F,transparent 65%);animation:blobA 16s ease-in-out infinite alternate}
.mhero__bg i:nth-child(2){width:34vw;height:34vw;max-width:520px;max-height:520px;left:-10vw;bottom:-12vw;background:radial-gradient(circle,#FF2E7A,transparent 65%);opacity:.32;animation:blobB 19s ease-in-out infinite alternate}
.mhero__bg i:nth-child(3){width:22vw;height:22vw;max-width:340px;max-height:340px;right:30vw;bottom:2vw;background:radial-gradient(circle,#FFB36B,transparent 65%);opacity:.28;animation:blobA 23s ease-in-out infinite alternate-reverse}
@keyframes blobA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6vw,5vw,0) scale(1.18)}}
@keyframes blobB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,-4vw,0) scale(1.22)}}
.mhero--fx .mhero__grid{align-items:center}
.mhero--fx .mhero__text>*{opacity:0;transform:translateY(18px);animation:heroIn .8s var(--ease-out) forwards}
.mhero--fx .mhero__text>*:nth-child(2){animation-delay:.08s}.mhero--fx .mhero__text>*:nth-child(3){animation-delay:.18s}
.mhero--fx .mhero__text>*:nth-child(4){animation-delay:.28s}.mhero--fx .mhero__text>*:nth-child(5){animation-delay:.38s}.mhero--fx .mhero__text>*:nth-child(6){animation-delay:.46s}
@keyframes heroIn{to{opacity:1;transform:none}}
.gtxt{background:linear-gradient(90deg,#FF5B1F,#FF2E7A,#FF5B1F);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gShift 6s linear infinite}
@keyframes gShift{to{background-position:200% 0}}
.mhero__dl{margin-top:1rem;font-size:var(--fs-sm)}
.hstage{position:relative;height:clamp(420px,66vh,660px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1rem);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.hcol{display:flex;flex-direction:column;gap:clamp(.6rem,1.4vw,1rem);animation:vUp 44s linear infinite;will-change:transform}
.hcol--b{animation-direction:reverse;animation-duration:52s}
@keyframes vUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hcol .pd{width:100%;flex:0 0 auto;box-shadow:0 14px 40px rgba(11,10,12,.10)}
@media (max-width:900px){
  .mhero--fx .mhero__grid{grid-template-columns:1fr}
  .hstage{height:clamp(300px,52vh,420px)}
}
@media (prefers-reduced-motion:reduce){.hcol,.mhero__bg i,.gtxt{animation:none}.mhero--fx .mhero__text>*{opacity:1;transform:none;animation:none}}

/* contacto: el correo no se corta */
.mcontact__card b{font-size:clamp(1.05rem,1.6vw,1.5rem);overflow-wrap:normal;word-break:normal;white-space:nowrap}
@media (max-width:420px){.mcontact__card b{font-size:1rem}}