/* ============================================================================
   BOUTIQUE MALVA — hoja unica del sitio (portada, 4 categorias, 16 prendas)
   19-ago-2026: se saco del <style> del index al pasar a multipagina.
   ========================================================================== */

:root{
  /* ---------- PALETA (cambiar por cliente) ---------- */
  --bg:          #05060f;   /* navy profundo casi negro */
  --bg-2:        #0a0d20;
  --paper:       #0f1229;   /* cards */
  --paper-2:     #141833;
  --ink:         #f5f5fb;
  --ink-soft:    rgba(245,245,251,.72);
  --ink-mute:    rgba(245,245,251,.46);
  --accent:      #00e5ff;   /* cian eléctrico */
  --accent-2:    #ff2ec4;   /* magenta */
  --whatsapp:    #25d366;
  /* --------------------------------------------------- */
  --line: rgba(245,245,251,.12);
  --radius: 14px;
  --ease: cubic-bezier(.22,.9,.32,1);
  --font-display: 'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono: ui-monospace,'Cascadia Mono','Consolas','SF Mono','Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--font-display);font-weight:400;line-height:1.65;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;text-wrap:balance}
section{padding:clamp(56px,8vw,96px) 20px;position:relative}
.wrap{max-width:1080px;margin:0 auto;position:relative;z-index:1}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--accent);letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-mono);font-size:.72rem;font-weight:600;margin-bottom:16px}
.kicker::before{content:'//';color:var(--accent-2)}
.section-title{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:14px;max-width:16ch}
.section-title em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-sub{color:var(--ink-soft);max-width:540px;margin-bottom:46px;font-size:1.02rem}

/* ---------- BOTONES (firma: iridiscentes) ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:999px;
  font-family:var(--font-mono);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  border:none;cursor:pointer;color:#04040a;
  background:linear-gradient(110deg,var(--accent),var(--accent-2),var(--accent));
  background-size:220% 100%;background-position:0% 50%;
  box-shadow:0 10px 28px rgba(0,229,255,.16);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background-position .5s ease;
  animation:iridiscenteFluir 7s ease-in-out infinite;
}
@keyframes iridiscenteFluir{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,46,196,.26), 0 10px 24px rgba(0,229,255,.22)}
.btn:active{transform:translateY(-1px)}
.btn.small{padding:10px 18px;font-size:.72rem}
.btn.wa{background:var(--whatsapp);color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.26);animation:none}
.btn.wa:hover{box-shadow:0 16px 34px rgba(37,211,102,.32)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(245,245,251,.28);box-shadow:none;animation:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.btn{animation:none}}
.menu-toggle{display:none;background:none;border:none;color:var(--ink);font-size:1.6rem;cursor:pointer}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:100;background:rgba(5,6,15,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.logo{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.logo span{background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none}
.nav-links a{font-size:.85rem;font-family:var(--font-mono);letter-spacing:.03em;color:var(--ink-soft);transition:color .2s;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- LUZ que sigue el puntero (pack interactivo) ----------
   Escritorio: sigue el mouse. Táctil: recorre la página con el scroll.
   mix-blend screen sobre fondo oscuro = la zona "se enciende". */
.luz{position:fixed;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:0;
  transition:opacity .8s var(--ease);
  background:radial-gradient(420px 420px at var(--gx,50%) var(--gy,30%),
    rgba(0,229,255,.15), rgba(255,46,196,.08) 46%, transparent 72%)}
.luz.on{opacity:1}
@media(prefers-reduced-motion:reduce){.luz{display:none}}

/* ---------- BRILLO de paso (shine sweep) ----------
   Hover en escritorio; en táctil se dispara UNA vez al entrar al viewport. */
.shine{position:relative;overflow:clip}
.shine::after{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:34%;
  background:linear-gradient(105deg,transparent,rgba(0,229,255,.14),rgba(255,46,196,.14),transparent);
  transform:translateX(-160%) rotate(10deg);pointer-events:none}
.shine:hover::after{transition:transform .85s var(--ease);transform:translateX(460%) rotate(10deg)}
.shine.brillar::after{animation:brillar 1.1s var(--ease) 1}
@keyframes brillar{from{transform:translateX(-160%) rotate(10deg)}to{transform:translateX(460%) rotate(10deg)}}

/* ---------- HERO ---------- */
header.hero{position:relative;overflow:clip;padding:clamp(120px,16vw,168px) 20px clamp(56px,8vw,88px);min-height:100vh;min-height:100svh;display:flex;align-items:center;background:radial-gradient(ellipse 70% 55% at 78% 8%, rgba(255,46,196,.14), transparent 60%), var(--bg)}
.hero-glow{position:absolute;inset:-40% -10% -30% -10%;background:radial-gradient(38% 30% at 22% 20%, rgba(0,229,255,.16), transparent 72%),radial-gradient(30% 26% at 82% 70%, rgba(255,46,196,.13), transparent 74%);filter:blur(90px);pointer-events:none;z-index:0}
@supports (animation-timeline: scroll()){
  .hero-glow{animation:subirGlow linear;animation-timeline:scroll(root);animation-range:0 70vh}
  @keyframes subirGlow{to{transform:translateY(-26px)}}
}
.hero-watermark{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:700;
  font-size:min(24vw,280px);color:transparent;-webkit-text-stroke:1px rgba(245,245,251,.05);letter-spacing:-.02em;
  white-space:nowrap;pointer-events:none;z-index:0;user-select:none}
.hero-grid{max-width:1080px;margin:0 auto;position:relative;width:100%;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(15,18,41,.7);border:1px solid var(--line);color:var(--ink-soft);padding:8px 16px;border-radius:999px;font-family:var(--font-mono);font-size:.78rem;font-weight:500;margin-bottom:24px}
.hero-badge b{color:var(--accent)}
.hero h1{font-size:clamp(2.5rem,6vw,4.2rem);max-width:12ch;margin-bottom:18px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-type{color:var(--ink-soft);font-size:1.08rem;max-width:480px;margin-bottom:34px;min-height:3.4em}
.tw-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-.1em;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- PRENDA 3D (pack interactivo — CSS puro, sin Spline) ----------
   Percha + prenda en capas dentro de un contenedor con perspectiva:
   se inclina con el mouse (o giroscopio en Android, scroll en iOS/táctil).
   La sombra reacciona a la inclinación. */
.hero-art{position:relative;height:360px;display:grid;place-items:center}
/* 18-ago-2026: aca la prenda del hero estaba DIBUJADA con cinco divs
   (cuerpo, dos mangas, cuello, costura y brillo). La regla madre del proyecto
   prohibe dibujar objetos figurativos a codigo, y una blusa hecha de
   rectangulos se lee como un rectangulo. Ahora es una fotografia de moda de
   verdad. Se conserva el parallax 3D con el puntero y las etiquetas flotantes:
   el movimiento no era el problema, el dibujo si.
   (De paso desaparece .garment-seam, el div de 1px que el verificador movil
   marcaba como bloque colapsado.) */
.prenda-scene{position:relative;width:min(300px,74vw);height:auto;aspect-ratio:3/4;perspective:1000px}
.prenda-foto{position:absolute;inset:0;border-radius:18px;overflow:hidden;transform:translateZ(40px);
  box-shadow:0 34px 80px rgba(0,0,0,.62)}
.prenda-foto img{width:100%;height:100%;object-fit:cover;display:block}
.prenda-sombra{position:absolute;left:12%;right:12%;bottom:-4px;height:30px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6), transparent 72%);
  filter:blur(10px);transform:translateX(var(--sx,0px)) scale(var(--ss,1))}
.prenda-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg))}
.hanger{position:absolute;left:50%;top:2px;width:120px;height:40px;margin-left:-60px;transform:translateZ(66px)}
.hanger::before{content:"";position:absolute;top:20px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(245,245,251,.55),transparent)}
.hanger::after{content:"";position:absolute;top:0;left:50%;width:16px;height:16px;margin-left:-8px;
  border:3px solid rgba(245,245,251,.55);border-radius:50%;border-bottom-color:transparent;transform:rotate(-38deg)}
.garment{position:absolute;left:50%;top:38px;width:180px;height:222px;margin-left:-90px}
.garment-sleeve{position:absolute;top:4px;width:52px;height:112px;background:linear-gradient(160deg,var(--paper-2),var(--paper));
  border:1px solid var(--line);border-radius:40% 12% 30% 50%;transform:translateZ(8px)}
.garment-sleeve.l{left:-32px;transform:translateZ(8px) rotate(16deg)}
.garment-sleeve.r{right:-32px;transform:translateZ(8px) rotate(-16deg) scaleX(-1)}
.garment-body{position:absolute;inset:0;border-radius:30% 30% 18px 18px/38% 38% 18px 18px;
  background:linear-gradient(165deg,var(--paper-2) 0%,#1c2247 42%,var(--paper-2) 100%);
  border:1px solid var(--line);
  box-shadow:inset 0 2px 20px rgba(255,255,255,.05), inset 0 -20px 34px rgba(0,0,0,.5), 0 28px 54px rgba(0,0,0,.55);
  transform:translateZ(0)}
.garment-collar{position:absolute;top:0;left:50%;width:66px;height:40px;margin-left:-33px;
  clip-path:polygon(0 0,100% 0,60% 100%,40% 100%);background:linear-gradient(180deg,var(--bg),rgba(5,6,15,.15));
  transform:translateZ(22px)}
.garment-seam{position:absolute;left:50%;top:42px;bottom:16px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(245,245,251,.2),transparent);transform:translateZ(15px)}
.garment-sheen{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%, rgba(0,229,255,.4) 46%, rgba(255,46,196,.32) 54%, transparent 68%);
  background-size:260% 260%;mix-blend-mode:screen;opacity:.9;transform:translateZ(32px);animation:sheenMove 5.5s ease-in-out infinite}
@keyframes sheenMove{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){.garment-sheen{animation:none}}
.tag-fly{position:absolute;background:rgba(15,18,41,.92);border:1px solid var(--line);border-radius:12px;
  padding:8px 13px;display:flex;flex-direction:column;gap:2px;box-shadow:0 16px 32px rgba(0,0,0,.5);
  transform:translateZ(54px)}
.tag-fly .n{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tag-fly .l{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}
.tag-fly.f1{top:10%;left:-14%;animation:flotar1 6s ease-in-out infinite}
.tag-fly.f2{bottom:6%;right:-16%;animation:flotar2 6s ease-in-out 1.4s infinite}
@keyframes flotar1{0%,100%{transform:translateZ(54px) translateY(0)}50%{transform:translateZ(54px) translateY(-10px)}}
@keyframes flotar2{0%,100%{transform:translateZ(54px) translateY(0)}50%{transform:translateZ(54px) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.tag-fly.f1,.tag-fly.f2{animation:none}}

/* ---------- TRUST BAR ---------- */
.trust{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.trust-item{background:var(--paper);text-align:center;padding:28px 20px;transition:background .3s var(--ease)}
.trust-item:hover{background:var(--paper-2)}
.trust-item strong{display:block;font-family:var(--font-mono);font-size:1.7rem;color:var(--accent)}
.trust-item span{color:var(--ink-mute);font-size:.82rem;font-family:var(--font-mono)}

/* ---------- CATÁLOGO ---------- */
#catalogo{background:var(--bg)}
.menu-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.menu-tab{background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:9px 20px;border-radius:999px;
  font-size:.78rem;font-family:var(--font-mono);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:all .25s var(--ease)}
.menu-tab.active{background:linear-gradient(100deg,var(--accent),var(--accent-2));border-color:transparent;color:#04040a;font-weight:600}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.prod{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:clip;min-width:0;
  display:flex;flex-direction:column;transition:transform .3s var(--ease), border-color .3s var(--ease)}
.prod:hover{transform:translateY(-5px);border-color:rgba(0,229,255,.4)}
.prod-img{aspect-ratio:3/4;position:relative;overflow:clip;background:linear-gradient(160deg,var(--paper-2),#1c2247);
  display:flex;align-items:center;justify-content:center}
/* 18-ago-2026: las 16 prendas compartian 4 iconos dibujados, uno por categoria.
   La regla de Benja del 16-ago vale para todo catalogo, no solo para comida: "que
   al cliente le entre por los ojos". Ahora cada prenda lleva SU foto. La imagen va
   absoluta para que manden el aspect-ratio 3/4 de la caja y no el formato del
   original: sin eso, las verticales estiraban la tarjeta y rompian la grilla. */
.prod-img.con-foto{background:var(--paper-2)}
.prod-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-icon{width:34%;stroke:var(--ink);opacity:.35;transition:transform .5s var(--ease), opacity .5s var(--ease)}
.prod:hover .prod-icon{transform:scale(1.08);opacity:.16}
.prod-hover{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;
  background:linear-gradient(0deg, rgba(5,6,15,.97) 48%, rgba(5,6,15,.68) 82%, transparent);
  display:flex;flex-direction:column;gap:10px;transform:translateY(100%);transition:transform .42s var(--ease)}
.prod:hover .prod-hover,.prod:focus-within .prod-hover{transform:translateY(0)}
@media(hover:none){.prod-hover{transform:translateY(0)}}
.prod-hover p{color:var(--ink-soft);font-size:.82rem;line-height:1.5}
.prod-body{padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.prod-body h3{font-size:1.02rem;font-weight:600}
.prod-price{font-family:var(--font-mono);color:var(--accent);font-weight:600;font-size:1rem;white-space:nowrap}
.menu-note{margin-top:30px;color:var(--ink-mute);font-size:.88rem;font-family:var(--font-mono)}
.menu-note b{color:var(--accent-2)}

/* ---------- LOOKBOOK / GALERÍA ---------- */
#lookbook{background:var(--bg-2)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.shot{aspect-ratio:3/4;border-radius:var(--radius);overflow:clip;position:relative;
  background:linear-gradient(160deg,var(--paper-2),#1c2247);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;min-width:0}
.shot .ph{text-align:center;color:var(--ink-mute);font-family:var(--font-mono);font-weight:500;font-size:.78rem;padding:14px;position:relative;z-index:1}
.shot .ph svg{width:30px;height:30px;stroke:var(--ink-mute);fill:none;stroke-width:1.5;margin:0 auto 10px;display:block}

/* ---------- CANVAS DE PARTÍCULAS (destellos en el hero) ----------
   Motas cian/magenta que suben lento y titilan — nativo, sin librerías.
   Se apaga entero con prefers-reduced-motion y no bloquea nada si falla. */
#particulas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
@media(prefers-reduced-motion:reduce){#particulas{display:none}}

/* ---------- FAQ ---------- */
#faq{background:var(--bg-2)}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:760px}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:clip}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:600;font-size:.98rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(0,229,255,.12);color:var(--accent);
  display:grid;place-items:center;font-size:1.15rem;font-weight:800;transition:transform .25s var(--ease)}
.faq[open] summary .plus{transform:rotate(45deg)}
.faq .faq-a{padding:0 22px 20px;color:var(--ink-soft);font-size:.94rem;max-width:640px}

/* ---------- OPINIONES ---------- */
#opiniones{background:var(--bg)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;gap:14px}
.stars{color:var(--accent);letter-spacing:2px;font-size:.95rem}
.review p{color:var(--ink-soft);font-size:.96rem;flex:1}
.review .who{color:var(--ink-mute);font-size:.8rem;font-family:var(--font-mono)}
.review .who strong{color:var(--ink-soft)}

/* ---------- HORARIO + MAPA ---------- */
#ubicacion{background:var(--bg-2)}
.loc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:start}
.hours{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.hours h3{margin-bottom:18px;font-size:1.2rem}
.hours table{width:100%;border-collapse:collapse;font-size:.9rem;font-family:var(--font-mono)}
.hours td{padding:11px 0;border-bottom:1px dashed var(--line);color:var(--ink-soft)}
.hours td:last-child{text-align:right;color:var(--ink);font-weight:600}
.hours tr:last-child td{border-bottom:none}
.hours .addr{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.9rem}
.hours .addr strong{color:var(--accent);display:block;margin-bottom:4px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}
.map{border-radius:var(--radius);overflow:clip;border:1px solid var(--line)}
.map iframe{width:100%;height:380px;border:0;filter:grayscale(.4) invert(.92) contrast(.92)}

/* ---------- CTA FINAL ---------- */
.final-cta{background:linear-gradient(120deg,#0a0d20 0%, #14102b 55%, #0a0d20 100%);text-align:center;overflow:clip}
.final-cta::before{content:"";position:absolute;inset:-30% -10%;background:
  radial-gradient(32% 40% at 20% 30%, rgba(0,229,255,.14), transparent 70%),
  radial-gradient(30% 40% at 82% 70%, rgba(255,46,196,.14), transparent 70%);
  filter:blur(90px);pointer-events:none}
.final-cta .wrap{position:relative;z-index:1}
.final-cta h2{font-size:clamp(2rem,5vw,3.1rem);max-width:20ch;margin:0 auto 14px}
.final-cta h2 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.final-cta p{color:var(--ink-soft);margin-bottom:32px}
.final-cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{background:var(--bg-2);color:var(--ink-mute);padding:32px 20px;text-align:center;font-size:.84rem;border-top:1px solid var(--line)}
footer .logo{font-size:1.1rem;margin-bottom:8px;display:block;color:var(--ink);font-weight:700}
footer a{color:var(--accent)}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:200;width:58px;height:58px;border-radius:50%;
  background:var(--whatsapp);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-art{height:300px;order:-1}
  .prenda-scene{width:210px;height:250px}
  .hero-watermark{display:none}
}
@media(max-width:760px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-2);flex-direction:column;gap:0;border-bottom:1px solid var(--line)}
  .nav-links.open{display:flex}
  .nav-links li{width:100%;text-align:center}
  .nav-links a{display:block;padding:16px}
  .menu-toggle{display:block}
  .nav-cta{display:none}
  .loc-grid{grid-template-columns:1fr}
  .trust-inner{grid-template-columns:1fr}
  section{padding:52px 18px}
  .tag-fly.f1,.tag-fly.f2{display:none}
}

/* === UPGRADE DRAKO 15-ago-2026: detalles finos, accesibilidad y micro-interacción ===
   Aditivo y con selectores de elemento: no pisa las clases de la demo. */

/* Títulos que no dejan una palabra huérfana en la última línea */
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* Foco visible para quien navega con teclado — faltaba en varias */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid currentColor;outline-offset:3px;border-radius:5px}

/* El toque responde: acuse de recibo en móvil y en escritorio */
a,button,summary{-webkit-tap-highlight-color:transparent}
button:active,a:active{scale:.985}

/* Las fotos entran en vez de aparecer de golpe */
img{transition:opacity .45s ease,filter .45s ease}
img[loading="lazy"]{background:rgba(128,128,128,.08)}

/* Scroll suave si la demo no lo tenía */
html{scroll-behavior:smooth}

/* Barra de scroll acorde al sitio, no la del sistema */
*{scrollbar-width:thin}

/* Cursor de ayuda en lo que se puede tocar */
button:not(:disabled),summary{cursor:pointer}

/* 🔑 Respeta a quien pidió menos movimiento — apaga TODO de una,
   incluidas las animaciones que la demo declaró sin cubrir este caso. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* === fin UPGRADE DRAKO === */


/* 18-ago-2026: entran fotos reales donde habia placeholders dibujados.
   Regla madre: nada figurativo se dibuja a codigo. */
.shot img.foto-real{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.shot{overflow:hidden}

/* 18-ago-2026 · SEROTONINN: contador por categoria + secciones numeradas */
.menu-tab .tab-n{font-size:.78em;opacity:.55;font-variant-numeric:tabular-nums;margin-left:2px}
.menu-tab.active .tab-n{opacity:.85}
.kicker .k-n{font-style:normal;font-variant-numeric:tabular-nums;opacity:.5;
  margin-right:.35em;letter-spacing:.02em}

/* ==========================================================================
   19-ago-2026 — EL PASO A MULTIPÁGINA
   Benja: "es necesario también que sea multipage, porque el catálogo tiene que
   tener una zona apartada para ver más al detalle cada prenda", y cada prenda
   con varias fotos: en modelo, en maniquí, en colgador y en estudio blanco.
   ========================================================================== */

/* la tarjeta del catálogo ahora es un enlace a la ficha, no un botón de WhatsApp */
a.prod{display:block;color:inherit}
.prod-vistas{position:absolute;top:10px;right:10px;z-index:3;background:rgba(20,14,20,.82);
  color:#fff;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:999px;backdrop-filter:blur(4px)}

/* ---------- cabecera de subpágina ---------- */
.cabecera{padding:clamp(104px,12vw,140px) 0 clamp(24px,4vw,38px)}
.cabecera h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:12px}
.migas{font-size:.8rem;letter-spacing:.04em;opacity:.72;margin-bottom:14px}
.migas a{border-bottom:1px solid currentColor;padding-bottom:1px}

/* ---------- LA FICHA DE PRENDA ---------- */
.ficha{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,52px);align-items:start}
@media(max-width:900px){.ficha{grid-template-columns:1fr}}
.ficha-fotos{position:sticky;top:88px}
@media(max-width:900px){.ficha-fotos{position:static}}
.vista-grande{width:100%;aspect-ratio:832/1088;object-fit:cover;display:block;border-radius:16px;
  background:rgba(0,0,0,.06)}
.vista-pie{font-size:.78rem;opacity:.66;margin-top:9px;letter-spacing:.03em}

/* las cuatro miniaturas: la fila que hace evidente que son la MISMA prenda */
.vistas{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.vista-mini{padding:0;border:1.5px solid transparent;border-radius:11px;overflow:hidden;
  background:none;cursor:pointer;position:relative;transition:border-color .2s,transform .2s}
.vista-mini img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.vista-mini span{display:block;font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 3px;opacity:.7;text-align:center;line-height:1.2}
.vista-mini:hover{transform:translateY(-2px)}
.vista-mini.on{border-color:currentColor}
.vista-mini.on span{opacity:1;font-weight:700}

.ficha-datos h1{margin-bottom:8px}
.ficha-precio{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:700;margin:6px 0 18px;display:block}
.ficha-det{opacity:.82;margin-bottom:22px;max-width:52ch}
.ficha-fila{margin-bottom:18px}
.ficha-fila .et{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.6;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 15px;border:1px solid currentColor;border-radius:999px;font-size:.84rem;opacity:.78}
.ficha-nota{font-size:.8rem;opacity:.6;margin-top:16px;max-width:46ch}

/* ---------- rejilla de prendas de una categoría ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}

/* ---------- índice de categorías ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.cat-card{display:block;padding:22px 20px;border:1px solid currentColor;border-radius:16px;
  transition:transform .25s;color:inherit}
.cat-card:hover{transform:translateY(-4px)}
.cat-card b{display:block;font-size:1.12rem;margin-bottom:4px}
.cat-card span{display:block;font-size:.82rem;opacity:.66}

/* ---------- EL HERO QUE ROTA ----------
   "que la modelo vaya cambiando de prenda, o que sean varios modelos en
   diferentes prendas y diferentes outfits" — y más grande, que era el otro
   reparo: "que la imagen de portada esté un poco más grandecita". */
.hero-rota{position:relative;width:100%;max-width:none;aspect-ratio:832/1088;
  border-radius:20px;overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.28)}
.rota-foto{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:block;color:inherit}
.rota-foto.on{opacity:1}
.rota-foto img{width:100%;height:100%;object-fit:cover;display:block}
.rota-tag{position:absolute;left:14px;bottom:14px;background:rgba(24,16,24,.8);color:#fff;
  padding:9px 15px;border-radius:13px;font-size:.82rem;backdrop-filter:blur(6px);line-height:1.35}
.rota-tag b{display:block;font-size:.92rem;margin-bottom:1px}
.rota-puntos{position:absolute;right:14px;bottom:16px;display:flex;gap:7px;z-index:4}
.rota-punto{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.42);transition:background .25s,transform .25s}
.rota-punto.on{background:#fff;transform:scale(1.35)}
@media(prefers-reduced-motion:reduce){.rota-foto{transition:none}}