/* ═══════════════════════════════════════════════════════════
   VWT · BLENDING EXPERIENCE
   No es un tour: es una experiencia de autoría. La página se
   construye alrededor de eso, y por eso tiene dos piezas que
   no existen en ninguna otra: la mesa de blending, donde se
   prueba el corte, y la etiqueta, donde se escribe el nombre.

   CONTRATO DEL SITIO, sin excepción:
     · eje y márgenes de .vt-in
     · ritmo vertical var(--vh-sec)
     · título de sección clamp(2.6rem,6.4vw,6.2rem) / -.055em / .94
     · volanta .82rem, peso 600, bordó, sin filete
     · texto de apoyo clamp(1rem,1.2vw,1.16rem), peso 300, 1.6
     · Poppins única familia
   Componentes reutilizados: hero, apertura, otras experiencias
   y blog. Lo demás es propio de esta página.
   ═══════════════════════════════════════════════════════════ */

.bx{
  --bx-pad: var(--vt-pad, clamp(1.4rem, 5vw, 6rem));
  --bx-max: var(--vt-max, 1400px);
  --bx-sec: var(--vh-sec, clamp(3.2rem, calc(7 * var(--1vh)), 5.6rem));
  --bx-t: var(--vh-t, .9s);
  --bx-e: var(--vh-e, cubic-bezier(.22,1,.36,1));
  --bx-acc: var(--vh-acc, #AC3749);
}

/* ── piezas comunes ── */
.bx-h2{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0; max-width: 22ch;
  font-size: calc(99.2px * var(--k, 1));
  font-weight: 700; letter-spacing: -.055em; line-height: .94;
  color: var(--vh-ink);
}
.bx-h2-light{ color: #fff }
.bx-kick{ margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--bx-acc) }
.bx-kick-light{ color: rgba(255,255,255,.78) }
.bx-lead{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 54ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.6;
  font-weight: 300; color: var(--vh-soft);
}
.bx-lead-light{ color: rgba(255,255,255,.8) }
.bx-btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.1rem; border-radius: 100px; border: 1px solid transparent;
  background: var(--bx-acc); color: #fff; text-decoration: none; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--bx-t) var(--bx-e), border-color var(--bx-t) var(--bx-e),
              color var(--bx-t) var(--bx-e), transform var(--bx-t) var(--bx-e);
}
.bx-btn:hover{ background: #6B1D2A; border-color: #6B1D2A; transform: translateY(-2px) }
.bx-btn:focus-visible, .bx-op:focus-visible, .bx-color:focus-visible,
.bx-q summary:focus-visible, .bx-reset:focus-visible{ outline: 3px solid var(--bx-acc); outline-offset: 3px }

/* ═══════════════════════════════════════════════════════════
   LA MESA DE BLENDING
   Cuatro mandos a la izquierda y, a la derecha, la copa que se
   tiñe con la mezcla, el nombre del corte y el perfil en
   cuatro barras. Todo se recalcula al mover cualquier mando.
   ═══════════════════════════════════════════════════════════ */
.bx-mesa{ padding: var(--bx-sec) var(--bx-pad); background: var(--vh-paper) }
.bx-mesa-hd{ margin-bottom: calc(57.6px * var(--k, 1))}
.bx-mesa-grid{
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: calc(80.0px * var(--k, 1)); align-items: start;
}
.bx-mandos{ display: grid; gap: calc(32.0px * var(--k, 1))}
.bx-mando-hd{ display: flex; align-items: center; gap: .6rem }
.bx-mando-p{ width: 12px; height: 12px; border-radius: 50%; background: var(--bx-c); flex: 0 0 auto }
.bx-mando-hd b{
  flex: 1 1 auto; font-size: calc(18.9px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.03em; color: var(--vh-ink);
}
.bx-mando-v{ font-size: 1rem; font-weight: 700; color: var(--bx-acc); font-variant-numeric: tabular-nums }
.bx-mando-d{
  margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--vh-soft);
}
.bx-mando-d i{ font-style: normal; font-weight: 600; color: var(--vh-ink) }
/* el mando */
.bx-mando input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; margin: .9rem 0 0; cursor: pointer;
  background: var(--vh-line-2); border-radius: 3px;
}
.bx-mando input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vh-paper); border: 2px solid var(--bx-acc);
  box-shadow: 0 4px 14px rgba(16,12,13,.18);
  transition: transform var(--bx-t) var(--bx-e);
}
.bx-mando input[type="range"]::-webkit-slider-thumb:active{ transform: scale(1.16) }
.bx-mando input[type="range"]::-moz-range-thumb{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vh-paper); border: 2px solid var(--bx-acc);
}
.bx-total{
  margin: 0; padding-top: calc(22.4px * var(--k, 1));
  border-top: 1px solid var(--vh-line);
  font-size: .92rem; color: var(--vh-mut);
}
.bx-total b{ color: var(--vh-ink) }
.bx-total.is-off b{ color: var(--bx-acc) }
.bx-reset{
  justify-self: start; appearance: none; cursor: pointer;
  padding: .7rem 1.2rem; border-radius: 100px;
  border: 1px solid var(--vh-line-2); background: transparent; color: var(--vh-ink);
  font: inherit; font-size: .84rem; font-weight: 600;
  transition: border-color var(--bx-t) var(--bx-e), color var(--bx-t) var(--bx-e);
}
.bx-reset:hover{ border-color: var(--bx-acc); color: var(--bx-acc) }

/* la copa */
.bx-copa{
  padding: calc(38.4px * var(--k, 1));
  border: 1px solid var(--vh-line); border-radius: 20px;
  background: var(--vh-smoke);
}
.bx-copa-nombre{
  margin: clamp(1.2rem,2.4vw,1.6rem) 0 0; text-align: center;
  font-size: calc(27.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.04em; color: var(--vh-ink);
}
.bx-perfil{ margin: clamp(1.4rem,2.6vw,1.8rem) 0 0; padding: 0; display: grid; gap: .8rem }
.bx-perfil > div{ display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .9rem }
.bx-perfil dt{ margin: 0; font-size: .82rem; color: var(--vh-mut) }
.bx-perfil dd{ margin: 0 }
.bx-barra{ display: block; height: 4px; border-radius: 4px; background: var(--vh-line-2); overflow: hidden }
.bx-barra i{
  display: block; height: 100%; width: 50%; border-radius: 4px;
  background: var(--bx-acc); transition: width 1s var(--bx-e);
}
.bx-copa-n{ margin: clamp(1.2rem,2.4vw,1.6rem) 0 0; font-size: .78rem; color: var(--vh-mut); text-align: center }

/* ═══════════════════════════════════════════════════════════
   LA ETIQUETA · sobre negro, para que la botella brille
   ═══════════════════════════════════════════════════════════ */
.bx-etiqueta{ padding: var(--bx-sec) var(--bx-pad); background: var(--vh-paper) }
.bx-etiqueta-hd{ margin-bottom: calc(57.6px * var(--k, 1))}
.bx-etiqueta-grid{
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: calc(80.0px * var(--k, 1)); align-items: center;
}
/* la botella */
.bx-botella{ display: flex; justify-content: center }
.bx-botella-cuerpo::before{
  content: ""; position: absolute; left: 18%; top: 6%; width: 8%; height: 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  border-radius: 40px;
}
/* la etiqueta */
.bx-label{
  position: relative; z-index: 2; width: 78%; aspect-ratio: 3/4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8% 6%; text-align: center;
  background: var(--vh-smoke); color: #14100F;
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  transition: background var(--bx-t) var(--bx-e), color var(--bx-t) var(--bx-e);
}
.bx-label[data-color="negro"]{ background: #14100F; color: #EDE6DA }
.bx-label[data-color="bordo"]{ background: #6B1D2A; color: #F4E9EB }
.bx-label[data-color="verde"]{ background: #243B32; color: #E8EFEA }
.bx-label::after{
  content: ""; position: absolute; inset: 6% 5%;
  border: 1px solid currentColor; opacity: .28; pointer-events: none;
}
.bx-label-marca{
  font-size: calc(24.0px * var(--k, 1)); font-weight: 700; letter-spacing: .16em;
  line-height: 1.1; word-break: break-word;
}
.bx-label-linea{ display: block; width: 34px; height: 1px; background: currentColor; opacity: .45; margin: .7rem 0 }
.bx-label-tipo{ font-size: .68rem; letter-spacing: .12em; opacity: .85 }
.bx-label-anio{ margin-top: .9rem; font-size: .9rem; font-weight: 600; letter-spacing: .2em }
.bx-label-firma{ margin-top: .9rem; font-size: .66rem; letter-spacing: .06em; opacity: .8 }
.bx-label-pie{ margin-top: 1.1rem; font-size: .5rem; letter-spacing: .12em; opacity: .6; line-height: 1.5 }
/* las tres tipografías */
.bx-label[data-tipo="clasica"] .bx-label-marca{ font-weight: 600; letter-spacing: .08em }
.bx-label[data-tipo="fina"] .bx-label-marca{ font-weight: 300; letter-spacing: .28em }

/* el editor */
.bx-editor{ display: grid; gap: calc(24.0px * var(--k, 1))}
.bx-campo label, .bx-campo-lb{
  display: block; margin-bottom: .5rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.62);
}
.bx-campo input[type="text"]{
  width: 100%; padding: .85rem 1.1rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff;
  font: inherit; font-size: 1rem;
  transition: border-color var(--bx-t) var(--bx-e), background var(--bx-t) var(--bx-e);
}
.bx-campo input[type="text"]:focus{ outline: none; border-color: var(--bx-acc); background: rgba(255,255,255,.1) }
.bx-campo-2{ display: grid; grid-template-columns: minmax(0,.4fr) minmax(0,.6fr); gap: 1rem }
.bx-ops{ display: flex; flex-wrap: wrap; gap: .45rem }
.bx-op{
  appearance: none; cursor: pointer; padding: .6rem 1.05rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff;
  font: inherit; font-size: .84rem; font-weight: 600;
  transition: background-color var(--bx-t) var(--bx-e), border-color var(--bx-t) var(--bx-e);
}
.bx-op:hover{ border-color: rgba(255,255,255,.5) }
.bx-op.is-on{ background: var(--bx-acc); border-color: var(--bx-acc) }
.bx-color{
  appearance: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bx-c); border: 1px solid rgba(255,255,255,.28); padding: 0;
  transition: transform var(--bx-t) var(--bx-e), box-shadow var(--bx-t) var(--bx-e);
}
.bx-color:hover{ transform: scale(1.08) }
.bx-color.is-on{ box-shadow: 0 0 0 2px #0B0708, 0 0 0 4px var(--bx-acc) }
.bx-acciones{ display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem }
.bx-btn-ghost{ background: transparent; border-color: rgba(255,255,255,.42); color: #fff }
.bx-btn-ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff; color: #fff }

/* ═══════════════════════════════════════════════════════════
   EL DÍA · cinco momentos en línea
   ═══════════════════════════════════════════════════════════ */
.bx-dia{ padding: var(--bx-sec) var(--bx-pad); background: var(--vh-paper) }
.bx-dia-hd{ margin-bottom: calc(57.6px * var(--k, 1))}
.bx-pasos{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: calc(25.6px * var(--k, 1));
}
.bx-paso-n{ display: block; font-size: .78rem; font-weight: 700; color: var(--bx-acc); margin-bottom: .7rem }
.bx-paso-fig{ margin: 0 0 .9rem; border-radius: 14px; overflow: hidden; background: #0B0708; aspect-ratio: 4/5 }
.bx-paso-fig img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 1.2s var(--bx-e);
}
.bx-paso:hover .bx-paso-fig img{ transform: scale(1.07) }
.bx-paso-tx h3{
  margin: 0; font-size: calc(18.6px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.2; color: var(--vh-ink);
}
.bx-paso-tx p{
  margin: .45rem 0 0; font-size: .9rem; line-height: 1.5; font-weight: 300; color: var(--vh-soft);
}

/* ═══════════════════════════════════════════════════════════
   LA BODEGA · breve
   ═══════════════════════════════════════════════════════════ */
.bx-bodega{ padding: var(--bx-sec) var(--bx-pad); background: var(--vh-smoke) }
.bx-bodega-grid{
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: calc(80.0px * var(--k, 1)); align-items: center;
}
.bx-bodega-fig{ margin: 0; border-radius: 20px; overflow: hidden; background: #0B0708 }
.bx-bodega-fig img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block }
.bx-bodega-tx p{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 46ch;
  font-size: calc(18.6px * var(--k, 1)); line-height: 1.65; font-weight: 300; color: var(--vh-soft);
}

/* ═══════════════════════════════════════════════════════════
   QUÉ INCLUYE
   ═══════════════════════════════════════════════════════════ */
.bx-inc{ padding: var(--bx-sec) var(--bx-pad); background: var(--vh-paper) }
.bx-inc-grid{
  display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,.5fr);
  gap: calc(80.0px * var(--k, 1)); align-items: start;
}
.bx-inc-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vh-line) }
.bx-inc-list li{
  position: relative; padding: clamp(.9rem,1.8vw,1.2rem) 0 clamp(.9rem,1.8vw,1.2rem) 1.9rem;
  border-bottom: 1px solid var(--vh-line);
  font-size: calc(17.9px * var(--k, 1)); color: var(--vh-ink);
}
.bx-inc-list li::before{
  content: "\2713"; position: absolute; left: 0; top: calc(19.2px * var(--k, 1));
  color: var(--bx-acc); font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   PREGUNTAS · el acordeón del sitio
   ═══════════════════════════════════════════════════════════ */
.bx-faq{ padding: var(--bx-sec) var(--bx-pad); background: var(--vh-paper) }
.bx-faq-hd{ margin-bottom: calc(54.4px * var(--k, 1))}
.bx-faq-lista{ border-top: 1px solid var(--vh-line) }
.bx-q{ border-bottom: 1px solid var(--vh-line) }
.bx-q summary{
  display: flex; align-items: center; gap: 1.2rem; cursor: pointer; list-style: none;
  padding: clamp(1.1rem,2vw,1.5rem) 0;
  font-size: calc(19.5px * var(--k, 1)); font-weight: 600; letter-spacing: -.025em;
  color: var(--vh-ink); transition: color var(--bx-t) var(--bx-e);
}
.bx-q summary::-webkit-details-marker{ display: none }
.bx-q summary span{ flex: 1 1 auto }
.bx-q summary:hover{ color: var(--bx-acc) }
.bx-q summary i{
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--vh-line-2);
  transition: background var(--bx-t) var(--bx-e), border-color var(--bx-t) var(--bx-e), transform var(--bx-t) var(--bx-e);
}
.bx-q summary i::before, .bx-q summary i::after{
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--vh-ink);
  transform: translate(-50%,-50%);
  transition: opacity var(--bx-t) var(--bx-e), background var(--bx-t) var(--bx-e);
}
.bx-q summary i::before{ width: 9px; height: 1.5px }
.bx-q summary i::after{ width: 1.5px; height: 9px }
.bx-q[open] summary{ color: var(--bx-acc) }
.bx-q[open] summary i{ background: var(--bx-acc); border-color: var(--bx-acc); transform: rotate(90deg) }
.bx-q[open] summary i::before{ background: var(--vh-paper) }
.bx-q[open] summary i::after{ opacity: 0 }
.bx-q-r{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bx-t) var(--bx-e) }
.bx-q[open] .bx-q-r{ grid-template-rows: 1fr }
.bx-q-r > div{ overflow: hidden }
.bx-q-r p{
  margin: 0; padding: 0 3rem clamp(1.2rem,2.2vw,1.7rem) 0; max-width: 62ch;
  font-size: calc(17.3px * var(--k, 1)); line-height: 1.65; color: var(--vh-soft);
}

/* ═══════════════════════════════════════════════════════════
   CIERRE · bloque en el color de la marca
   ═══════════════════════════════════════════════════════════ */
.bx-cierre{ padding: calc(var(--bx-sec) * 1.2) var(--bx-pad); background: #6B1D2A; color: #fff }
.bx-cierre-in{ max-width: var(--bx-max); margin-inline: auto }
.bx-cierre-h{
  margin: clamp(.9rem,1.8vw,1.3rem) 0 0; max-width: 18ch;
  font-size: calc(99.2px * var(--k, 1)); font-weight: 700;
  letter-spacing: -.055em; line-height: .94; color: #fff;
}
.bx-cierre-p{
  margin: clamp(1.2rem,2.4vw,1.8rem) 0 clamp(1.8rem,3.4vw,2.6rem); max-width: 46ch;
  font-size: calc(20.5px * var(--k, 1)); line-height: 1.6; color: rgba(255,255,255,.86);
}
.bx-cierre-cta{ display: flex; flex-wrap: wrap; gap: .7rem }
.bx-cierre-n{ margin: clamp(1rem,2vw,1.4rem) 0 0; font-size: .82rem; color: rgba(255,255,255,.66) }
/* los botones, con el color fijado como en el resto del sitio */
a.bx-btn.bx-btn-blanco, button.bx-btn.bx-btn-blanco{
  background: var(--vh-paper) !important; border-color: #fff !important;
  color: #6B1D2A !important; -webkit-text-fill-color: #6B1D2A;
}
a.bx-btn.bx-btn-blanco:hover, button.bx-btn.bx-btn-blanco:hover{
  background: var(--bx-acc) !important; border-color: var(--bx-acc) !important;
  color: #fff !important; -webkit-text-fill-color: #fff;
}
.bx-cierre a.bx-btn.bx-btn-ghost{
  background: transparent !important; border-color: rgba(255,255,255,.45) !important;
  color: #fff !important; -webkit-text-fill-color: #fff;
}
.bx-cierre a.bx-btn.bx-btn-ghost:hover{
  background: rgba(255,255,255,.14) !important; border-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   ADAPTACIÓN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: calc(1024px * var(--k, 1))){
  .bx-mesa-grid, .bx-etiqueta-grid, .bx-bodega-grid, .bx-inc-grid{ grid-template-columns: 1fr; gap: 2.4rem }
  .bx-pasos{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem }
  .bx-bodega-fig{ order: -1 }
}
@media (max-width: 700px){
  .bx-pasos{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .bx-campo-2{ grid-template-columns: 1fr }
  .bx-cierre-cta .bx-btn, .bx-acciones .bx-btn{ width: 100% }
  .bx-q-r p{ padding-right: 0 }
  .bx-q-r{ transition: none }
}
@media (max-width: 460px){
  .bx-pasos{ grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce){
}

/* el encabezado del bloque de qué incluye */
.bx-inc-hd{ max-width: 42ch }

/* ═══════════════════════════════════════════════════════════
   EL CONFIGURADOR EN TRES DIMENSIONES
   La botella y la copa son objetos reales, construidos por
   revolución. La botella se gira con el dedo o el mouse, y la
   etiqueta y la contraetiqueta se dibujan sobre el vidrio.
   Si el equipo no soporta 3D, se muestra la botella plana que
   ya existía y no se pierde ninguna función del editor.
   ═══════════════════════════════════════════════════════════ */
.bx-botella{ position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem }
#bx-canvas-botella{
  display: block; width: 100%; max-width: none; height: clamp(560px, calc(88 * var(--1vh)), 940px);
  cursor: grab; touch-action: pan-y;
}
.sin-3d #bx-canvas-botella{ display: none }
.arrastrando #bx-canvas-botella{ cursor: grabbing }
.bx-botella-n{ margin: 0; font-size: .78rem; color: rgba(255,255,255,.55) }
.sin-3d .bx-botella-n{ display: none }
/* respaldo plano */

/* la copa de la mesa */

/* el editor, más largo: se ordena en dos columnas en escritorio */
.bx-etiqueta-grid{ align-items: start }
.bx-editor{ grid-template-columns: repeat(2, minmax(0,1fr)); display: grid; gap: calc(22.4px * var(--k, 1))}
.bx-editor > .bx-campo:nth-child(1),
.bx-editor > .bx-campo:nth-child(2),
.bx-editor > .bx-campo:nth-child(5),
.bx-editor > .bx-acciones,
.bx-editor > .bx-reservar{ grid-column: 1 / -1 }
.bx-campo textarea{
  width: 100%; padding: .85rem 1.1rem; border-radius: 12px; resize: vertical;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff;
  font: inherit; font-size: .95rem; line-height: 1.5;
}
.bx-campo textarea:focus{ outline: none; border-color: var(--bx-acc); background: rgba(255,255,255,.1) }
.bx-archivo{ display: flex; flex-wrap: wrap; gap: .45rem; align-items: center }
.bx-archivo input[type="file"]{
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.bx-archivo label.bx-op{ cursor: pointer }
.bx-nota{ margin: .5rem 0 0; font-size: .76rem; color: rgba(255,255,255,.5) }
.bx-reservar{ justify-self: start }
@media (max-width: calc(1024px * var(--k, 1))){
  .bx-editor{ grid-template-columns: 1fr }
  .bx-editor > .bx-campo, .bx-editor > .bx-acciones, .bx-editor > .bx-reservar{ grid-column: 1 }
}
 

/* el contenedor del configurador */
.bx-3d{ position: relative }

/* ── La botella real ──
   El modelo tarda un instante en llegar: hasta que está, el
   lienzo se muestra atenuado para que no aparezca de golpe. */
#bx-canvas-botella{ opacity: 0; transition: opacity .8s var(--bx-e) }
.con-3d.listo #bx-canvas-botella{ opacity: 1 }
.con-3d .bx-botella{ min-height: clamp(560px, calc(88 * var(--1vh)), 940px); justify-content: center }
.bx-cargando{
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .82rem; color: rgba(255,255,255,.5); pointer-events: none;
  transition: opacity .5s var(--bx-e);
}
.con-3d.listo .bx-cargando, .sin-3d .bx-cargando{ opacity: 0 }

/* ── La sección de la etiqueta, sobre papel ──
   El fondo oscuro escondía la botella, que es de vidrio verde
   casi negro. Sobre papel la silueta se recorta y el color
   original del modelo se ve como es. Los textos y los campos
   del editor pasan a la tinta del sitio. */
.bx-etiqueta .bx-kick-light{ color: var(--bx-acc) }
.bx-etiqueta .bx-h2-light{ color: var(--vh-ink) }
.bx-etiqueta .bx-lead-light{ color: var(--vh-soft) }
.bx-campo label, .bx-campo-lb{ color: var(--vh-mut) }
.bx-campo input[type="text"], .bx-campo textarea{
  border-color: var(--vh-line-2); background: transparent; color: var(--vh-ink);
}
.bx-campo input[type="text"]:focus, .bx-campo textarea:focus{
  border-color: var(--bx-acc); background: rgba(172,55,73,.04);
}
.bx-op{ border-color: var(--vh-line-2); color: var(--vh-ink) }
.bx-op:hover{ border-color: var(--vh-ink) }
.bx-op.is-on{ background: var(--bx-acc); border-color: var(--bx-acc); color: #fff }
.bx-color{ border-color: var(--vh-line-2) }
.bx-color.is-on{ box-shadow: 0 0 0 2px var(--vh-paper), 0 0 0 4px var(--bx-acc) }
.bx-nota{ color: var(--vh-mut) }
.bx-botella-n{ color: var(--vh-mut) }
.bx-cargando{ color: var(--vh-mut) }
.bx-etiqueta .bx-btn-ghost{ background: transparent; border-color: var(--vh-line-2); color: var(--vh-ink) }
.bx-etiqueta .bx-btn-ghost:hover{ background: var(--vh-ink); border-color: var(--vh-ink); color: var(--vh-paper) }

/* ── La sección de la etiqueta, sobre papel ──
   El fondo pasó a blanco, así que el editor y sus textos se
   pasan a tinta. La botella conserva su verde original. */
.bx-etiqueta .bx-kick-light{ color: var(--bx-acc) }
.bx-etiqueta .bx-h2-light{ color: var(--vh-ink) }
.bx-etiqueta .bx-lead-light{ color: var(--vh-soft) }
.bx-editor .bx-campo label,
.bx-editor .bx-campo-lb{ color: var(--vh-mut) }
.bx-editor input[type="text"],
.bx-editor textarea{
  background: var(--vh-paper); color: var(--vh-ink);
  border-color: var(--vh-line-2);
}
.bx-editor input[type="text"]:focus,
.bx-editor textarea:focus{ background: var(--vh-paper); border-color: var(--bx-acc) }
.bx-editor .bx-op{ color: var(--vh-ink); border-color: var(--vh-line-2) }
.bx-editor .bx-op:hover{ border-color: var(--vh-ink) }
.bx-editor .bx-op.is-on{ background: var(--bx-acc); border-color: var(--bx-acc); color: #fff }
.bx-editor .bx-color{ border-color: var(--vh-line-2) }
.bx-editor .bx-color.is-on{ box-shadow: 0 0 0 2px var(--vh-paper), 0 0 0 4px var(--bx-acc) }
.bx-editor .bx-nota{ color: var(--vh-mut) }
.bx-etiqueta .bx-btn-ghost{ background: transparent; border-color: var(--vh-line-2); color: var(--vh-ink) }
.bx-etiqueta .bx-btn-ghost:hover{ background: var(--vh-ink); border-color: var(--vh-ink); color: var(--vh-paper) }
.bx-botella-n{ color: var(--vh-mut) }
.bx-cargando{ color: var(--vh-mut) }

/* la vista plana: la etiqueta dibujada, por si el 3D no carga */

/* ── La botella, en grande ──
   La columna de la botella pesa más que la del editor, para que
   la etiqueta se lea sin acercarse. */
.bx-etiqueta-grid{ grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: center }
@media (max-width: calc(1024px * var(--k, 1))){
  .bx-etiqueta-grid{ grid-template-columns: 1fr }
  #bx-canvas-botella{ height: clamp(460px, calc(68 * var(--1vh)), 720px) }
}




/* ── Subir imagen y Quitar · misma fila, mismo tamaño ──
   Los dos botones comparten exactamente el mismo alto, relleno y
   cuerpo de letra, y se alinean por el centro. El de subir lleva
   el color de la marca con texto blanco fijado, para que ninguna
   regla del sitio lo pise; el de quitar va en contorno. */
.bx-archivo{ display: flex; align-items: center; gap: .6rem; flex-wrap: wrap }
.bx-archivo label.bx-btn,
.bx-archivo .bx-op{
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 1.25rem; margin: 0;
  border-radius: 100px; border: 1px solid transparent;
  font: inherit; font-size: .86rem; font-weight: 600; letter-spacing: -.01em;
  line-height: 1; cursor: pointer;
}
.bx-archivo label.bx-btn{
  background: var(--bx-acc) !important; border-color: var(--bx-acc) !important;
  color: #fff !important; -webkit-text-fill-color: #fff;
  transform: none;
}
.bx-archivo label.bx-btn:hover{
  background: #6B1D2A !important; border-color: #6B1D2A !important;
  color: #fff !important; -webkit-text-fill-color: #fff;
}
.bx-archivo .bx-op{
  background: transparent; border-color: var(--vh-line-2); color: var(--vh-ink);
}
.bx-archivo .bx-op:hover{ border-color: var(--vh-ink) }



/* ── el resultado de la mesa: nombre del corte y perfil, sin recipiente ── */
.bx-resultado{ display: grid; gap: calc(25.6px * var(--k, 1)); align-content: start; padding: calc(38.4px * var(--k, 1)); border-radius: 20px; background: var(--vh-smoke); border: 1px solid var(--vh-line) }
.bx-copa-nombre{ margin: 0; font-size: calc(41.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--vh-ink) }
.bx-perfil{ margin: 0; padding: 0; display: grid; gap: .9rem }
.bx-perfil > div{ display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .9rem }
.bx-perfil dt{ margin: 0; font-size: .82rem; color: var(--vh-mut) }
.bx-perfil dd{ margin: 0 }
.bx-barra{ display: block; height: 4px; border-radius: 4px; background: var(--vh-line-2); overflow: hidden }
.bx-barra i{ display: block; height: 100%; width: 50%; border-radius: 4px; background: var(--vh-acc); transition: width 1s cubic-bezier(.22,1,.36,1) }
.bx-copa-n{ margin: 0; font-size: .78rem; color: var(--vh-mut) }