/* landings/vinoteca-3d/assets/css/vinoteca-lq.css — Fase 234
   Vinoteca 3D montada sobre La Cuadra (Tailwind + custom.css de lacuadra).
   Va después de fabrica.css y vinoteca.css: solo ajusta cómo conviven la
   botella 3D y el resto de La Cuadra. */

/* sin desborde horizontal en celular (clip no rompe el header sticky) */
html:has(body.vx-lq) { overflow-x: clip; }
body.vx-lq { overflow-x: clip; }

/* la escena usa los colores de La Cuadra (Diseño Web → Colores) */
.vx-escena, .vx-preguntas {
  --fx-bg: var(--bg-dark, #120609);
  --fx-panel: var(--bg-card, #1A0A0E);
  --fx-line: var(--bg-border, #4A1D27);
  --texto: var(--text-main, #F2E8DC);
  font-family: var(--fx-body);
}

/* portada: entra justo debajo de la cinta + navbar de La Cuadra (≈160px) */
.vx-escena .fx-act.fx-hero { min-height: calc(100vh - 160px); min-height: calc(100svh - 160px); }
.vx-escena .fx-act { position: relative; }

/* lo que sigue (hero con fotos, catálogo, footer) siempre por encima de la botella */
body.vx-lq > main, body.vx-lq > footer, .vx-preguntas { position: relative; z-index: 2; }
.vx-escena .fx-solido { background: var(--fx-bg); }
.vx-preguntas .fx-solid { background: transparent; }
.vx-preguntas .fx-wrap { padding-top: 56px; }

/* Tailwind (preflight) les saca tamaño/peso a los títulos: se los devolvemos */
.vx-escena h1, .vx-escena h2, .vx-preguntas h2 { font-family: var(--fx-display); }
.vx-escena .fx-lineup a { color: inherit; }
.vx-escena .fx-lineup canvas { display: block; }
.vx-preguntas summary { list-style: revert; }

/* leyenda legal al pie del footer de La Cuadra */
.vx-leyenda-lq {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--bg-border, #4A1D27) 60%, transparent);
  text-align: center; font-family: var(--fx-body, 'Jost', sans-serif); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-gold, #C9A24A);
}

@media (max-width: 760px) {
  .vx-escena .fx-act.fx-hero { min-height: calc(100svh - 112px); }
  /* "Todos los varietales": de a 2 por fila en celular (si no, son 5 tarjetas enormes) */
  .vx-escena .fx-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vx-escena .fx-lineup a { padding: 16px 8px; gap: 6px; }
  .vx-escena .fx-lineup canvas { width: 104px; height: 180px; }
  .vx-escena .fx-lineup strong { font-size: 20px; }
  .vx-escena .fx-lineup span { font-size: 13px; }
}

/* ══ Fase 236: FOTOS reales de las botellas (sin 3D) ══════════════════════
   Cada foto va en un "arco de vitrina" color marfil. La foto se funde con el
   arco (mix-blend-mode: multiply), así las fotos de catálogo con fondo blanco
   no muestran el rectángulo blanco. Las PNG/WebP recortadas flotan solas
   (clase vx-recortada, la pone vinoteca-fotos.js). */
.vx-arco {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  border-radius: 999px 999px 14px 14px;
  background: radial-gradient(75% 60% at 50% 42%, #FFFDF8 0%, #F6EEE1 55%, #E7D8C1 100%);
  border: 1px solid color-mix(in srgb, var(--c, var(--fx-acc)) 55%, #E6C77A);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 6px color-mix(in srgb, var(--fx-bg, #120609) 70%, transparent), 0 0 0 7px color-mix(in srgb, var(--c, var(--fx-acc)) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.vx-arco img { width: 100%; height: 100%; object-fit: contain; padding: 14% 12% 8%; box-sizing: border-box; mix-blend-mode: multiply; display: block; }
.vx-arco::after { /* reflejo de luz arriba */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%);
}
.vx-sin-foto span {
  font-family: var(--fx-display); font-style: italic; font-weight: 600; text-align: center; line-height: 1;
  font-size: clamp(26px, 3vw, 40px); color: #3A1219; padding: 0 12%; overflow-wrap: anywhere;
}
.vx-recortada .vx-arco { background: transparent; border-color: transparent; box-shadow: none; overflow: visible; }
.vx-recortada .vx-arco::after { content: none; }
.vx-recortada .vx-arco img { mix-blend-mode: normal; padding: 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }

/* La vitrina en el escenario fijo (reemplaza a la botella dibujada) */
.vx-escena .fx-stage { --vx-nav: 130px; }
.vx-vitrina {
  position: absolute; left: 50%; top: calc(var(--vx-nav) + (100vh - var(--vx-nav)) / 2);
  height: min(64vh, 580px); aspect-ratio: 3 / 4.4; translate: -50% -50%;
  will-change: transform;
}
.vx-foto { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.vx-foto[data-i="0"] { opacity: 1; visibility: visible; }
.vx-foto::before { /* halo del color de la línea detrás del arco */
  content: ""; position: absolute; inset: -18% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent 75%);
}
.vx-escena .fx-stage { background: none; }

/* "Todos los varietales": la foto de cada línea en su arquito */
.vx-escena .fx-lineup .vx-arco { width: 150px; height: 220px; flex: 0 0 auto; }
.vx-escena .fx-lineup .vx-sin-foto span { font-size: 22px; }

@media (max-width: 760px) {
  /* en celular: arriba, entre el navbar y el texto */
  .vx-vitrina { top: calc(var(--vx-nav) + 16px); translate: -50% 0; height: min(40svh, 340px); }
  .vx-escena .fx-lineup .vx-arco { width: 112px; height: 164px; }
  .vx-escena .fx-lineup .vx-sin-foto span { font-size: 18px; }
}