/* ============ MIAMI FASHION STORE — styles.css ============ */
:root{
  --bg:#070605; --bg2:#0d0b08; --panel:#12100a;
  --gold:#d4af37; --gold-l:#f5d97a; --gold-x:#fff7d6; --gold-d:#8a6a1f;
  --pink:#ff6fae;
  --txt:#f3ead5; --mut:#9a8f78; --line:#241f14;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Montserrat',sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Cinzel',serif}
::selection{background:var(--gold);color:#000}

/* monograma de marca repetido (estilo LV) — sutil, detrás de todo */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cg fill='%23d4af37' font-family='Georgia,serif'%3E%3Ctext x='24' y='96' font-size='30' letter-spacing='6' fill-opacity='.075' transform='rotate(-22 24 96)'%3EMIAMI FASHION%3C/text%3E%3Ctext x='318' y='208' font-size='15' letter-spacing='11' fill-opacity='.06' transform='rotate(-22 318 208)'%3ES T O R E%3C/text%3E%3Ctext x='128' y='190' font-size='21' fill-opacity='.07' transform='rotate(-22 128 190)'%3E%E2%9C%88%3C/text%3E%3Ctext x='66' y='332' font-size='15' letter-spacing='11' fill-opacity='.06' transform='rotate(-22 66 332)'%3ES T O R E%3C/text%3E%3Ctext x='196' y='452' font-size='28' letter-spacing='6' fill-opacity='.07' transform='rotate(-22 196 452)'%3EMIAMI FASHION%3C/text%3E%3Ctext x='428' y='372' font-size='20' fill-opacity='.065' transform='rotate(-22 428 372)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='404' y='520' font-size='21' fill-opacity='.07' transform='rotate(-22 404 520)'%3E%E2%9C%88%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px}

/* canvas del oro líquido: detrás de letras e imágenes, sobre el fondo */
#oro{position:fixed;inset:0;z-index:1;pointer-events:none}
/* todo el contenido va sobre el canvas */
nav,.hero-logo,.hero-content,.marquee,.catalog,.trust,.ig,.order,footer,
.wa-float,.wa-bubble,#sbar{position:relative;z-index:2}

/* barra de progreso */
#sbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--gold-d),var(--gold-l),var(--gold-x));
  box-shadow:0 0 10px rgba(212,175,55,.9)}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:14px 5vw;background:rgba(7,6,5,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-family:'Cinzel',serif;font-weight:900;font-size:1.02rem;letter-spacing:2px;white-space:nowrap;
  background:linear-gradient(110deg,var(--gold-d),var(--gold-l) 40%,var(--gold-x) 50%,var(--gold) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo em{font-style:normal;color:var(--pink);-webkit-text-fill-color:var(--pink);font-size:.8em}
nav ul{display:flex;gap:24px;list-style:none}
nav ul a{font-size:.76rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);transition:.3s}
nav ul a:hover{color:var(--gold-l);text-shadow:0 0 12px rgba(212,175,55,.6)}
.nav-wa{font-size:.74rem;font-weight:700;letter-spacing:1px;padding:9px 18px;border-radius:30px;
  border:1px solid var(--gold);color:var(--gold-l);transition:.3s;white-space:nowrap}
.nav-wa:hover{background:var(--gold);color:#000;box-shadow:0 0 22px rgba(212,175,55,.55)}
@media(max-width:860px){nav ul{display:none}}

/* ============ HERO ============ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:110px 6vw 70px;overflow:hidden;
  background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(212,175,55,.14),transparent 60%),
             radial-gradient(ellipse 40% 30% at 85% 90%,rgba(255,111,174,.05),transparent 70%)}
.hero-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);
  width:min(66vmin,620px);mix-blend-mode:screen;opacity:.92;border-radius:50%;
  filter:drop-shadow(0 0 70px rgba(212,175,55,.4));
  animation:logofloat 8s ease-in-out infinite;pointer-events:none}
@keyframes logofloat{0%,100%{transform:translate(-50%,-55%) scale(1)}50%{transform:translate(-50%,-57%) scale(1.025)}}
.hero-content{display:flex;flex-direction:column;align-items:center}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold-l);border:1px solid rgba(212,175,55,.4);padding:8px 20px;border-radius:30px;
  background:rgba(7,6,5,.55);animation:pulse-b 3s ease-in-out infinite}
@keyframes pulse-b{0%,100%{box-shadow:0 0 0 rgba(212,175,55,0)}50%{box-shadow:0 0 24px rgba(212,175,55,.35)}}
/* espacio reservado para que el logo de fondo respire sin texto encima */
.logo-space{height:min(46vh,420px)}
.hero p.sub{max-width:540px;margin:30px auto 0;color:#bdb295;font-weight:300;font-size:.88rem;line-height:1.75;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.hero p.sub b{color:var(--txt);font-weight:600}
@keyframes shine{to{background-position:220% center}}
.badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0 32px}
.badge{font-size:.72rem;letter-spacing:1px;padding:8px 16px;border-radius:8px;border:1px solid var(--line);
  background:rgba(13,11,8,.8);color:var(--mut)}
.badge b{color:var(--gold-l)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:40px;font-weight:700;
  font-size:.85rem;letter-spacing:2px;text-transform:uppercase;transition:.35s;cursor:pointer;border:none;font-family:inherit}
.btn-gold{background:linear-gradient(120deg,var(--gold-d),var(--gold),var(--gold-l));color:#120d02;
  box-shadow:0 0 30px rgba(212,175,55,.35)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 8px 44px rgba(212,175,55,.6)}
.btn-ghost{border:1px solid rgba(212,175,55,.5);color:var(--gold-l);background:rgba(7,6,5,.5)}
.btn-ghost:hover{background:rgba(212,175,55,.12);box-shadow:0 0 24px rgba(212,175,55,.3)}
.p{position:absolute;bottom:-12px;border-radius:50%;background:var(--gold-l);opacity:0;pointer-events:none;
  animation:rise linear infinite;box-shadow:0 0 8px rgba(245,217,122,.9)}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-105vh);opacity:0}}
.scroll-hint{margin-top:42px;font-size:.66rem;letter-spacing:3px;text-transform:uppercase;color:var(--mut);
  animation:bob 2s ease-in-out infinite;text-shadow:0 2px 8px #000}
@media(max-width:760px){
  .hero-logo{width:min(94vw,420px);opacity:.78;transform:translate(-50%,-62%)}
  @keyframes logofloat{0%,100%{transform:translate(-50%,-62%) scale(1)}50%{transform:translate(-50%,-64%) scale(1.025)}}
  .logo-space{height:min(36vh,330px)}
  .hero p.sub{font-size:.82rem}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ============ MARQUEE MARCAS ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(13,11,8,.92);
  overflow:hidden;padding:16px 0;white-space:nowrap}
.mtrack{display:inline-flex;align-items:center;animation:mq 30s linear infinite}
.mtrack i{color:var(--gold);font-style:normal;margin:0 22px;font-size:.8rem}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:.92rem;
  letter-spacing:4px;color:#c9b97f}
.brand svg{width:30px;height:30px;color:var(--gold)}
.brand svg text{letter-spacing:0}
.b-mos{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:6px}
.b-nova{font-family:'Montserrat',sans-serif;font-weight:700;font-style:italic;letter-spacing:3px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ CATÁLOGO ============ */
.catalog{max-width:1180px;margin:0 auto;padding:90px 4vw 40px}
.catalog .head{text-align:center;margin-bottom:80px}
.catalog .head h2,.sec-h{font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:3px;
  background:linear-gradient(110deg,var(--gold-d),var(--gold-l),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.8))}
.catalog .head p{color:var(--mut);margin:14px auto 0;font-weight:300;max-width:540px;line-height:1.7}

.cat{position:relative;margin-bottom:110px;text-align:center}
.cat h3{font-size:clamp(1.1rem,3vw,1.65rem);letter-spacing:3px;color:#4d4430;transition:.6s;
  display:inline-flex;align-items:center;gap:14px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.cat h3 .n{font-size:.62em;color:#3a301b;letter-spacing:2px;transition:.6s}
.cat.lit h3{color:var(--gold-l);text-shadow:0 0 24px rgba(212,175,55,.5),0 2px 14px rgba(0,0,0,.9)}
.cat.lit h3 .n{color:var(--pink)}
.cat .desc{color:var(--mut);font-size:.85rem;font-weight:300;margin:10px auto 30px;max-width:560px;opacity:.35;transition:.6s}
.cat.lit .desc{opacity:1}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;
  opacity:0;transform:translateY(36px);filter:blur(7px);
  transition:opacity .8s ease,transform .8s ease,filter .8s ease}
.cat.lit .grid{opacity:1;transform:none;filter:none}
.card{background:rgba(18,16,10,.82);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.5s}
.cat.lit .card{border-color:rgba(212,175,55,.5);box-shadow:0 0 22px rgba(212,175,55,.14)}
.card:hover{transform:translateY(-6px);border-color:var(--gold-l)!important;box-shadow:0 12px 38px rgba(212,175,55,.32)!important}
.card.extra{display:none}
.cat.expanded .card.extra{display:block}
.imgw{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:zoom-in;background:#0a0805}
.imgw img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:.6s}
.card:hover .imgw img{transform:scale(1.07)}
.tag{position:absolute;top:10px;left:10px;font-size:.6rem;font-weight:700;letter-spacing:1px;z-index:1;
  padding:5px 10px;border-radius:6px;background:rgba(7,6,5,.85);color:var(--gold-l);border:1px solid rgba(212,175,55,.5)}
.tag.pk{color:var(--pink);border-color:rgba(255,111,174,.5)}
.zoom-i{position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(7,6,5,.8);border:1px solid rgba(212,175,55,.5);color:var(--gold-l);font-size:.85rem;opacity:0;transition:.35s}
.card:hover .zoom-i{opacity:1}
.cinfo{padding:14px 14px 16px}
.cinfo h4{font-size:.84rem;font-weight:600;letter-spacing:.3px;margin-bottom:4px;min-height:2.1em}
.sizes{color:var(--mut);font-size:.7rem;letter-spacing:.5px;margin-bottom:11px}
.sizes b{color:var(--gold-l);font-weight:600}
.btn-wa{width:100%;padding:10px;border-radius:9px;border:1px solid rgba(212,175,55,.45);background:transparent;
  color:var(--gold-l);font-weight:700;font-size:.68rem;letter-spacing:1.1px;text-transform:uppercase;cursor:pointer;transition:.3s;font-family:inherit}
.btn-wa:hover{background:linear-gradient(120deg,var(--gold-d),var(--gold));color:#120d02;box-shadow:0 0 18px rgba(212,175,55,.45)}
.more{margin-top:26px;padding:12px 30px;border-radius:30px;border:1px solid rgba(212,175,55,.4);
  background:rgba(13,11,8,.7);color:var(--gold-l);font-weight:700;font-size:.74rem;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:.3s;font-family:inherit}
.more:hover{background:rgba(212,175,55,.14);box-shadow:0 0 20px rgba(212,175,55,.3)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .catalog{padding:70px 4vw 30px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cinfo{padding:11px 10px 13px}
  .btn-wa{font-size:.6rem;padding:9px 4px}
}

/* revelado de secciones cuando el oro las toca */
.lit-sec{opacity:.25;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.lit-sec.lit{opacity:1;transform:none}
/* tarjeta de consulta (jeans, cinturones, chalas, gorros) */
.card.ask{display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;
  background:rgba(212,175,55,.06);border-style:dashed}
.card.ask p{font-size:.8rem;color:var(--mut);line-height:1.65;margin-bottom:16px}

/* ============ CONFIANZA ============ */
.trust{background:rgba(13,11,8,.72);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:80px 6vw;text-align:center}
.stats{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;margin:46px 0 30px}
.stat b{display:block;font-family:'Cinzel',serif;font-size:2.2rem;
  background:linear-gradient(110deg,var(--gold),var(--gold-x));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.policies{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:760px;margin:0 auto}
.pol{font-size:.78rem;padding:10px 18px;border-radius:30px;border:1px solid rgba(212,175,55,.35);
  color:var(--txt);background:rgba(18,16,10,.8)}

/* ============ INSTAGRAM ============ */
.ig{padding:90px 4vw;text-align:center;max-width:1180px;margin:0 auto}
.ig>p{color:var(--mut);font-weight:300;max-width:560px;margin:14px auto 36px;line-height:1.7}
.igrow{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;margin-bottom:30px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.igrow::-webkit-scrollbar{height:6px}
.igrow::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:3px}
.igrow a{flex:0 0 auto;width:220px;scroll-snap-align:center;border-radius:12px;overflow:hidden;
  border:1px solid rgba(212,175,55,.35);transition:.4s;position:relative}
.igrow a:hover{border-color:var(--gold-l);box-shadow:0 8px 30px rgba(212,175,55,.3);transform:translateY(-4px)}
.igrow img{width:100%;height:300px;object-fit:cover}
.igrow a::after{content:'⌾ ver en Instagram';position:absolute;inset:auto 0 0 0;padding:8px;font-size:.62rem;
  letter-spacing:1px;color:var(--gold-l);background:linear-gradient(transparent,rgba(7,6,5,.95));text-align:center}

/* ============ UBICACIÓN / MAPA ============ */
.mapa{padding:90px 6vw;text-align:center;max-width:980px;margin:0 auto}
.mapa>p{color:var(--mut);font-weight:300;margin:14px auto 0;line-height:1.7}
.mapa>p b{color:var(--gold-l);font-weight:600}
.map-frame{max-width:860px;margin:34px auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid rgba(212,175,55,.45);box-shadow:0 0 44px rgba(212,175,55,.14)}
.map-frame{background:#15120c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60'%3E%3Ctext x='14' y='38' font-size='13' fill='%239a8f78' font-family='Arial'%3ECargando mapa…%3C/text%3E%3C/svg%3E") center/200px no-repeat}
.map-frame iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(.2) sepia(.18) contrast(.96) brightness(.92)}
@media(max-width:760px){.map-frame{aspect-ratio:4/5}}

/* ============ PEDIDO ============ */
.order{max-width:680px;margin:0 auto;padding:90px 6vw;text-align:center}
.order>p{color:var(--mut);font-weight:300;margin:14px 0 40px;line-height:1.7}
.form{background:rgba(18,16,10,.88);border:1px solid rgba(212,175,55,.3);border-radius:18px;padding:34px 30px;
  box-shadow:0 0 50px rgba(212,175,55,.08);text-align:left}
.form label{display:block;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold-l);margin:18px 0 8px}
.form label:first-child{margin-top:0}
.form input,.form select,.form textarea{width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--txt);font-family:inherit;font-size:.9rem;outline:none;transition:.3s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);box-shadow:0 0 14px rgba(212,175,55,.25)}
.form .btn-gold{width:100%;justify-content:center;margin-top:28px}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:60px 6vw 110px;text-align:center;background:rgba(13,11,8,.85)}
.f-logo{width:120px;height:120px;margin:0 auto 6px;border-radius:50%;mix-blend-mode:screen;
  filter:drop-shadow(0 0 30px rgba(212,175,55,.35))}
footer p{color:var(--mut);font-size:.82rem;margin:14px auto;max-width:420px;line-height:1.8;font-weight:300}
.socials{display:flex;gap:18px;justify-content:center;margin:24px 0}
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,175,55,.4);display:grid;place-items:center;
  color:var(--gold-l);font-size:1.05rem;transition:.3s}
.socials a:hover{background:var(--gold);color:#000;box-shadow:0 0 24px rgba(212,175,55,.5)}
.copy{font-size:.68rem!important;letter-spacing:1px;color:#5d543f!important}

/* ============ WHATSAPP FLOTANTE ============ */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:95;width:58px;height:58px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 6px 24px rgba(37,211,102,.45);transition:.3s;animation:pulse-w 2.6s infinite}
@keyframes pulse-w{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float:hover{transform:scale(1.1)}
.wa-bubble{position:fixed;right:20px;bottom:90px;z-index:95;width:270px;background:#14110b;
  border:1px solid rgba(212,175,55,.4);border-radius:16px;padding:18px;opacity:0;transform:translateY(16px);
  pointer-events:none;transition:.5s;box-shadow:0 14px 44px rgba(0,0,0,.6)}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-bubble .x{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--mut);cursor:pointer;font-size:1rem}
.wa-bubble p{font-size:.8rem;line-height:1.55;margin-bottom:12px}
.wa-bubble p b{color:var(--gold-l)}
.wa-bubble a{display:block;font-size:.74rem;font-weight:600;padding:9px 12px;border-radius:8px;margin-top:7px;
  border:1px solid rgba(212,175,55,.35);color:var(--gold-l);transition:.3s}
.wa-bubble a:hover{background:rgba(212,175,55,.12)}

/* ============ LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,3,2,.96);display:none;align-items:center;justify-content:center;flex-direction:column}
.lb.open{display:flex}
.lb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.lb-stage img{max-width:92vw;max-height:76vh;transform-origin:center;cursor:grab;user-select:none;-webkit-user-drag:none;
  border:1px solid rgba(212,175,55,.4);border-radius:8px;box-shadow:0 0 80px rgba(212,175,55,.2)}
.lb-bar{display:flex;gap:14px;align-items:center;padding:16px}
.lb-bar button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,175,55,.5);background:#14110b;
  color:var(--gold-l);font-size:1.15rem;cursor:pointer;transition:.3s}
.lb-bar button:hover{background:var(--gold);color:#000}
.lb-cap{color:var(--mut);font-size:.78rem;letter-spacing:1px;max-width:50vw;text-align:center}
.lb-x{position:absolute;top:18px;right:22px;font-size:1.6rem;background:none;border:none;color:var(--gold-l);cursor:pointer;z-index:2}
.lb-hint{color:#5d543f;font-size:.64rem;letter-spacing:1px;padding-bottom:14px;text-align:center}