/* 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; }
}