/* landings/vinoteca-3d/assets/css/vinoteca.css — Plantilla "Vinoteca 3D" (Fase 233)
   Se carga después de fabrica.css (mismo esqueleto) y le cambia la estética:
   bordó casi negro, dorado, serif (Cormorant Garamond) + Jost. */
.vx-body {
  --fx-bg: var(--fondo, #120609);
  --fx-panel: var(--card-bg, #1E0B10);
  --fx-line: #4A1D27;
  --fx-muted: #CDB9A6;
  --fx-chrome: linear-gradient(180deg, #FBF0CC 0%, #E6C77A 40%, #9C7630 58%, #F2DEA0 100%);
  --fx-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fx-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --border: #4A1D27;
  --gray2: #241016;
  --gray3: #CDB9A6;
}
.vx-body .cs-utility { background: #0B0305; border-bottom-color: rgba(74,29,39,.7); }
.vx-body .cs-utility-inner button, .vx-body .cs-utility-inner a { font-family: var(--fx-body); font-weight: 500; letter-spacing: .14em; }
.vx-body .cs-ticker { color: #1A070B; font-family: var(--fx-body); font-weight: 600; letter-spacing: .2em; }
.vx-body .cs-nav { background: linear-gradient(180deg, rgba(18,6,9,.97), rgba(18,6,9,.9)); border-bottom-color: rgba(201,162,74,.25); }
.vx-body .fx-logo small { font-family: var(--fx-body); font-weight: 500; letter-spacing: .5em; color: #E6C77A; }
.vx-body .fx-logo b { font-style: italic; font-weight: 700; font-size: 28px; letter-spacing: .01em; }
.vx-body .fx-logo i { font-style: italic; font-weight: 600; font-size: 26px; }
.vx-body .cs-nav-link, .vx-body .cs-nav-links > a, .vx-body .cs-nav-drop > button { font-family: var(--fx-body); font-weight: 500; font-size: 12px; letter-spacing: .2em; }
.vx-body .cs-icon-btn { border-color: rgba(201,162,74,.35); }
.vx-body .cs-search-form input { background: rgba(30,11,16,.9); border-color: rgba(201,162,74,.3); }
.vx-body .cs-cart-count, .vx-body .cs-search-form button { color: #1A070B; }
.vx-body .cs-nav-drop-menu { background: #1E0B10; }
.vx-body .cs-mobile-menu { background: #120609; }

.vx-body .fx-giant { font-style: italic; font-weight: 600; letter-spacing: .02em; color: #F7EBD0; padding-top: 22vh; }
.vx-body .fx-eyebrow { font-family: var(--fx-body); font-weight: 500; letter-spacing: .34em; }
.vx-body .fx-act h1, .vx-body .fx-act h2, .vx-body .fx-solid h2 { font-weight: 600; letter-spacing: .01em; }
.vx-body .fx-act h2, .vx-body .fx-solid h2 { font-size: clamp(36px, 4.6vw, 64px); overflow-wrap: normal; word-break: normal; }
.vx-body .fx-act.fx-hero h1 { font-size: clamp(30px, 3.6vw, 48px); }
.vx-body .fx-act p { font-family: var(--fx-body); font-weight: 400; font-size: 17px; }
.vx-body .fx-btn { font-family: var(--fx-body); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: #1A070B; border-radius: 0; }
.vx-body .fx-btn.ghost { color: #F7EBD0; border-color: rgba(230,199,122,.6); }
.vx-body .fx-eyebrow-fija { color: #E6C77A; }
.vx-body .fx-lineup a { border-radius: 0; }
.vx-body .fx-lineup canvas { width: 150px; height: 230px; }
.vx-body .fx-lineup strong { font-style: italic; font-weight: 600; font-size: 24px; color: #F7EBD0; }
.vx-body .fx-perks strong { font-family: var(--fx-body); font-weight: 600; font-size: 14px; letter-spacing: .18em; color: #F7EBD0; }
.vx-body #preguntas summary { font-family: var(--fx-display); font-style: italic; font-weight: 600; font-size: 24px; color: #F7EBD0; }

.vx-body .fx-solido .cs-section-head h2, .vx-body .fx-solido .cs-home-cat-head h3 { font-weight: 600; color: #F7EBD0; }
.vx-body .btn { font-family: var(--fx-body); font-weight: 600; letter-spacing: .16em; }
.vx-body .btn.primario, .vx-body .cs-recibi-widget .rtp-row button { color: #1A070B; }
.vx-body .fx-solido .cs-prod-brand { font-family: var(--fx-body); letter-spacing: .18em; }
.vx-body .fx-solido .cs-prod-name { font-family: var(--fx-display); font-weight: 600; font-size: 17px; }
.vx-body .fx-solido .cs-prod-add { font-family: var(--fx-body); }

.vx-body .fx-footer h3 { font-family: var(--fx-body); font-weight: 500; letter-spacing: .34em; }
.vx-body .fx-evo { font-family: var(--fx-display); font-style: italic; font-weight: 600; font-size: 32px; letter-spacing: .04em; text-transform: none; color: #F7EBD0; }
.vx-body .fx-footer p { font-family: var(--fx-body); font-weight: 400; }
.vx-body .fx-leyenda { color: #E6C77A; font-family: var(--fx-body); }

/* La botella (canvas que dibuja assets/js/vinoteca.js) */
.vx-botella { position: absolute; left: -150px; top: -360px; width: 300px; height: 720px; filter: drop-shadow(0 0 46px color-mix(in srgb, var(--fx-acc) 28%, transparent)); }
.vx-body .fx-lineup canvas { width: 150px; height: 260px; }
.vx-body .fx-stage { background: radial-gradient(55% 60% at 50% 58%, color-mix(in srgb, var(--fx-acc) 34%, transparent) 0%, transparent 70%); }