/* Yates Mexico Marketplace 2.19.1 - Intro de portada (cortina navy con el logo). CSS en ASCII. */
.ymx-intro-skip #ymxIntro{display:none!important}
html.ymx-intro-lock,html.ymx-intro-lock body{overflow:hidden!important}
#ymxIntro{all:initial;position:fixed;inset:0;z-index:999999;display:block;background:#08131c;color:#f8f5ee;font-family:'Instrument Sans','Gabarito',system-ui,sans-serif;-webkit-font-smoothing:antialiased;will-change:transform}
#ymxIntro *{box-sizing:border-box;margin:0;padding:0;font-family:inherit}
#ymxIntro .yi-grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
#ymxIntro .yi-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 50%,rgba(29,51,73,.6),rgba(8,19,28,0) 70%),radial-gradient(50% 40% at 0% 0%,rgba(232,171,54,.08),rgba(232,171,54,0) 60%)}
#ymxIntro .yi-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vh,40px) clamp(20px,4.5vw,56px);padding-bottom:max(clamp(20px,4vh,40px),env(safe-area-inset-bottom))}
#ymxIntro .yi-meta{display:flex;justify-content:space-between;gap:16px;width:100%;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,245,238,.62);opacity:0}
#ymxIntro .yi-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,4.5vh,44px)}
#ymxIntro .yi-logo{position:relative;width:clamp(290px,62vw,780px);aspect-ratio:1418/233}
#ymxIntro .yi-sail,#ymxIntro .yi-mark,#ymxIntro .yi-shinewrap{position:absolute;inset:0}
#ymxIntro .yi-logo img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
#ymxIntro .yi-sail{clip-path:inset(100% 85.7% 0 0)}
#ymxIntro .yi-mark{clip-path:inset(0 100% 0 16.5%)}
#ymxIntro .yi-shinewrap{overflow:hidden;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#ymxIntro .yi-shine{position:absolute;top:0;bottom:0;left:0;width:28%;background:linear-gradient(100deg,rgba(243,196,89,0),rgba(243,196,89,.95) 50%,rgba(243,196,89,0));transform:translateX(-120%)}
#ymxIntro .yi-tag{display:flex;align-items:center;gap:14px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,245,238,.78);opacity:0}
#ymxIntro .yi-tag i{display:block;width:26px;height:1px;background:#e8ab36;flex:0 0 auto}
#ymxIntro .yi-bottom{display:flex;flex-direction:column;align-items:center;gap:22px}
:root #ymxIntro button.yi-enter,:root #ymxIntro button.yi-enter:hover{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:44px;padding:8px 16px;border:0;background:transparent;box-shadow:none;cursor:pointer;color:rgba(248,245,238,.62);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:0;border-radius:8px}
#ymxIntro .yi-enter:focus-visible{outline:2px solid #e8ab36;outline-offset:2px}
#ymxIntro .yi-enter b{position:relative;display:block;width:1px;height:48px;background:rgba(248,245,238,.22);overflow:hidden}
#ymxIntro .yi-enter em{position:absolute;left:0;top:0;width:1px;height:20px;background:#e8ab36}
#ymxIntro .yi-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#c8902a,#e8ab36,#f3c459);transform:scaleX(0);transform-origin:0 50%}
#ymxIntro.is-on .yi-meta{animation:yiFade .7s cubic-bezier(.16,1,.3,1) .15s both}
#ymxIntro.is-on .yi-bottom .yi-meta{animation-delay:.27s}
#ymxIntro.is-on .yi-sail{animation:yiSail 1s cubic-bezier(.16,1,.3,1) .3s both}
#ymxIntro.is-on .yi-mark{animation:yiMark 1.3s cubic-bezier(.76,0,.24,1) .85s both}
#ymxIntro.is-on .yi-shine{animation:yiShine 1.1s cubic-bezier(.45,0,.35,1) 2.15s both}
#ymxIntro.is-on .yi-tag{animation:yiUp .9s cubic-bezier(.16,1,.3,1) 2.05s both}
:root #ymxIntro.is-on button.yi-enter{animation:yiUp .9s cubic-bezier(.16,1,.3,1) 2.5s both}
#ymxIntro.is-on .yi-enter em{animation:yiCue 1.8s cubic-bezier(.65,0,.35,1) 2.5s infinite}
#ymxIntro.is-on .yi-bar{animation:yiBar 2.5s cubic-bezier(.45,0,.35,1) both}
#ymxIntro.is-out{transform:translateY(-100%);transition:transform 1.05s cubic-bezier(.76,0,.24,1) .08s}
#ymxIntro.is-out .yi-inner{opacity:0;transform:translateY(-8vh);transition:opacity .65s cubic-bezier(.76,0,.24,1),transform .65s cubic-bezier(.76,0,.24,1)}
@keyframes yiFade{from{opacity:0}to{opacity:1}}
@keyframes yiUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes yiSail{from{clip-path:inset(100% 85.7% 0 0);transform:translateY(14%)}to{clip-path:inset(0% 85.7% 0 0);transform:translateY(0)}}
@keyframes yiMark{from{clip-path:inset(0 100% 0 16.5%);opacity:.2}to{clip-path:inset(0 0% 0 16.5%);opacity:1}}
@keyframes yiShine{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
@keyframes yiCue{from{transform:translateY(-22px)}to{transform:translateY(52px)}}
@keyframes yiBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:640px){
#ymxIntro .yi-meta{font-size:11px;letter-spacing:.18em}
#ymxIntro .yi-bottom .yi-meta{flex-direction:column;align-items:center;gap:6px;text-align:center}
#ymxIntro .yi-tag{font-size:11px;letter-spacing:.18em;gap:10px}
#ymxIntro .yi-tag i{width:16px}
}
@media (prefers-reduced-motion:reduce){#ymxIntro{display:none!important}}