/* ============================================================
   PORTADA ANIMADA: vitrina de marcas (arriba) y "Compre por marca"
   (ver vitrina.js). Usa las variables de styles.css.
   ============================================================ */

/* Con la vitrina, el título grande y la tira chica de marcas se ocultan (quedan en el HTML
   como respaldo si el JS no corre). */
.hl-hero.con-vitrina .hl-hero-titulo,
.hl-hero.con-vitrina .hl-hero-marcas{ display:none; }
.hl-hero.con-vitrina{ padding-top:22px; }
@media(min-width:900px){ .hl-hero.con-vitrina{ padding-top:30px; } }

.vitrina{ position:relative; text-align:left; margin:4px auto 0; }
.vt-escena{ position:relative; height:clamp(440px, 64vh, 560px); border-radius:22px; overflow:hidden; background:#14110E; isolation:isolate; }
.vt-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s var(--ease), visibility 0s .8s; }
.vt-slide.activa{ opacity:1; visibility:visible; transition:opacity .8s var(--ease); z-index:1; }
.vt-fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 6s ease-out; }
.vt-slide.activa .vt-fondo{ transform:scale(1); }
.vt-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,11,8,.86) 0%, rgba(14,11,8,.45) 52%, rgba(14,11,8,.12) 100%); }

.vt-texto{ position:absolute; z-index:2; left:clamp(22px,5vw,64px); bottom:clamp(28px,7vh,64px); max-width:480px; color:#fff; }
.vt-texto small{ display:block; font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#E9D9A8; }
.vt-texto h2{ margin:10px 0 8px; font-family:var(--serif); font-weight:600; font-size:clamp(40px,6.4vw,72px); line-height:.98; letter-spacing:.005em; text-wrap:balance; }
.vt-texto p{ margin:0 0 20px; font-size:15px; line-height:1.45; color:rgba(255,255,255,.86); }
.vt-texto h2, .vt-texto p, .vt-texto .vt-btn{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.vt-slide.activa .vt-texto h2{ opacity:1; transform:none; transition-delay:.15s; }
.vt-slide.activa .vt-texto p{ opacity:1; transform:none; transition-delay:.28s; }
.vt-slide.activa .vt-texto .vt-btn{ opacity:1; transform:none; transition-delay:.4s; }

.vt-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:var(--radio-pill); background:#fff; color:#171310; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; transition:transform var(--t-media) var(--ease), box-shadow var(--t-media); }
.vt-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.vt-btn i{ font-style:normal; transition:transform var(--t-media) var(--ease); }
.vt-btn:hover i{ transform:translateX(4px); }

.vt-minis{ position:absolute; z-index:2; right:clamp(18px,4vw,44px); bottom:clamp(28px,7vh,64px); display:flex; gap:10px; }
.vt-mini{ width:96px; border-radius:14px; overflow:hidden; background:#fff; color:#171310; text-decoration:none; opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease), box-shadow var(--t-media); }
.vt-slide.activa .vt-mini{ opacity:1; transform:none; }
.vt-slide.activa .vt-mini:nth-child(1){ transition-delay:.35s; }
.vt-slide.activa .vt-mini:nth-child(2){ transition-delay:.47s; }
.vt-slide.activa .vt-mini:nth-child(3){ transition-delay:.59s; }
.vt-mini:hover{ box-shadow:0 10px 22px rgba(0,0,0,.3); }
.vt-mini img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--foto-bg); }
.vt-precio{ display:flex; justify-content:center; align-items:baseline; gap:6px; padding:6px 6px 7px; font-size:13px; }
.vt-precio b{ font-weight:600; }
.vt-precio s{ font-size:11px; color:var(--texto-3); }

.vt-flecha{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:26px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity var(--t-media), background var(--t-media); }
.vt-prev{ left:14px; } .vt-next{ right:14px; }
.vt-escena:hover .vt-flecha{ opacity:1; }
.vt-flecha:hover{ background:rgba(255,255,255,.3); }

.vt-barras{ display:flex; gap:8px; margin-top:14px; }
.vt-barras button{ flex:1 1 0; min-width:0; border:0; background:none; padding:0; cursor:pointer; text-align:left; font:600 10px/1.2 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vt-barras button::before{ content:""; display:block; height:3px; border-radius:3px; margin-bottom:8px; background:linear-gradient(90deg, var(--texto) var(--p,0%), var(--borde) var(--p,0%)); }
.vt-barras button.activa{ color:var(--texto); }
.vt-barras button.activa::before{ background:linear-gradient(90deg, var(--texto) var(--p,0%), var(--borde-fuerte) var(--p,0%)); }

@media(max-width:820px){
  .vt-escena{ height:clamp(470px, 78vh, 560px); border-radius:18px; }
  .vt-slide::after{ background:linear-gradient(180deg, rgba(14,11,8,.1) 15%, rgba(14,11,8,.55) 50%, rgba(14,11,8,.9) 100%); }
  .vt-texto{ left:20px; right:20px; bottom:164px; }
  .vt-texto p{ margin-bottom:16px; font-size:14px; }
  .vt-minis{ left:20px; right:20px; bottom:20px; }
  .vt-mini{ flex:1 1 0; width:auto; }
  .vt-flecha{ display:none; }
  .vt-barras{ gap:5px; }
  .vt-barras button{ font-size:0; }           /* en el teléfono solo las barritas */
  .vt-barras button::before{ margin-bottom:0; }
}

/* ---------- Compre por marca ---------- */
.cm-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 16px; -webkit-overflow-scrolling:touch; }
.cm-chips::-webkit-scrollbar{ display:none; }
.cm-chips button{ flex:none; border:1px solid var(--borde); background:var(--card); border-radius:var(--radio-pill); padding:10px 16px; font:600 11.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--texto-2); cursor:pointer; transition:all var(--t-media) var(--ease); }
.cm-chips button:hover{ border-color:var(--texto); color:var(--texto); }
.cm-chips button.activa{ background:var(--texto); border-color:var(--texto); color:#fff; }
.cm-chips button small{ margin-left:6px; font-weight:500; opacity:.65; }

.cm-zona{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:16px; }
.cm-lado{ position:relative; overflow:hidden; border-radius:18px; background:#171310; color:#fff; padding:26px; min-height:320px; display:flex; flex-direction:column; justify-content:flex-end; animation:cm-entra .45s var(--ease) both; }
.cm-lado img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.cm-lado > *:not(img){ position:relative; }
.cm-lado small{ font-size:11px; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:#E9D9A8; }
.cm-lado h3{ margin:8px 0 4px; font-family:var(--serif); font-weight:600; font-size:clamp(34px,4vw,46px); line-height:1; }
.cm-lado p{ margin:0 0 18px; font-size:14px; color:rgba(255,255,255,.85); }
.cm-lado .vt-btn{ align-self:flex-start; padding:12px 20px; }

.cm-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.cm-prod{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--borde); border-radius:16px; overflow:hidden; animation:cm-entra .45s var(--ease) both; }
.cm-prod:nth-child(2){ animation-delay:.06s; } .cm-prod:nth-child(3){ animation-delay:.12s; } .cm-prod:nth-child(4){ animation-delay:.18s; }
@keyframes cm-entra{ from{ opacity:0; transform:translateY(14px); } }
.cm-foto{ position:relative; display:block; overflow:hidden; background:var(--foto-bg); }
.cm-foto img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; transition:transform .5s var(--ease); }
.cm-prod:hover .cm-foto img{ transform:scale(1.05); }
.cm-desc, .cm-ei{ position:absolute; left:10px; top:10px; border-radius:var(--radio-pill); padding:4px 9px; font-size:10.5px; font-weight:600; letter-spacing:.04em; }
.cm-desc{ background:var(--rojo); color:#fff; }
.cm-ei{ background:#171310; color:#fff; }
.cm-desc + .cm-ei{ top:40px; }
.cm-info{ display:flex; flex-direction:column; gap:8px; padding:12px; flex:1; }
.cm-info b{ font-size:12.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.cm-info .vt-precio{ justify-content:flex-start; padding:0; font-size:16px; }
.cm-info .vt-precio s{ font-size:12px; }
.cm-comprar{ margin-top:auto; border:0; border-radius:var(--radio-pill); background:var(--texto); color:#fff; padding:10px 0; font:600 11px var(--font); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:transform var(--t-rapida), opacity var(--t-rapida); }
.cm-comprar:hover{ opacity:.88; }
.cm-comprar:active{ transform:scale(.97); }

@media(max-width:820px){
  .cm-zona{ grid-template-columns:1fr; }
  .cm-lado{ min-height:170px; padding:20px; }
  .cm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

@media(prefers-reduced-motion:reduce){
  .vt-slide, .vt-fondo, .vt-texto h2, .vt-texto p, .vt-texto .vt-btn, .vt-mini{ transition:none !important; transform:none !important; }
  .cm-lado, .cm-prod{ animation:none; }
}