/* ─────────────────────────────────────────────
   La ventana de bienvenida.

   Es lo primero que ve alguien nuevo en la tienda, así que habla el mismo idioma que
   el resto: el fondo morado de la tienda, la botella en pixel art y los botones de
   siempre. Lo único que se sale del tono es el «10 %», en el oro que la tienda reserva
   para lo que vale la pena mirar.

   En el celular sube desde abajo como una hoja y deja ver la tienda por arriba: no
   tapa la pantalla entera, y la equis queda donde llega el pulgar.
   ───────────────────────────────────────────── */

.bv-telon{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:24px;background:rgba(4,3,18,.66)}
.bv-telon[hidden]{display:none}

.bv{position:relative;width:min(720px,100%);display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  background:var(--superficie);border:1px solid rgba(113,136,244,.32);border-radius:20px;
  box-shadow:0 30px 80px rgba(2,1,14,.62),0 2px 0 rgba(255,255,255,.04) inset;
  overflow:hidden;color:var(--texto)}

/* La botella, sola en su lado. Sin halos: un fondo que baja de azul a morado y la luz
   viniendo de arriba, como el cielo del servidor al anochecer. */
.bv-arte{position:relative;display:grid;place-items:center;padding:34px 24px;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(113,136,244,.34),transparent 62%),
    linear-gradient(180deg,var(--azul-hondo),#191454 78%)}
.bv-arte img{width:min(150px,62%);height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 18px 22px rgba(5,3,30,.55))}

.bv-cuerpo{display:flex;flex-direction:column;justify-content:center;
  padding:40px 36px 34px;min-height:340px}
.bv-hola{font-size:var(--t-lg);font-weight:700;color:var(--hielo);margin:0 0 6px}
.bv h2{font-size:var(--t-2xl);line-height:1.18;letter-spacing:-.015em;margin:0;
  text-wrap:balance}
.bv-cifra{display:block;font-size:clamp(3.2rem,8vw,4.4rem);font-weight:900;
  line-height:1;letter-spacing:-.04em;color:var(--oro);margin:14px 0 4px}
.bv-cifra small{font-size:.42em;letter-spacing:0;margin-left:4px}
.bv-sub{color:var(--texto-2);font-size:var(--t-sm);margin:0 0 22px}
.bv .boton{justify-content:center;width:100%}
/* El foco del teclado, con los colores de la tienda y no el contorno blanco del navegador. */
.bv :focus-visible{outline:2px solid var(--hielo);outline-offset:3px}
.bv .bv-campo input:focus-visible,.bv-casilla input:focus-visible{outline-offset:2px}

/* La equis: grande de tocar, siempre visible y con su borde. */
.bv-cerrar{position:absolute;top:12px;right:12px;width:40px;height:40px;
  display:grid;place-items:center;border-radius:12px;border:1px solid var(--borde);
  background:rgba(12,12,62,.72);color:var(--texto);cursor:pointer;z-index:2}
.bv-cerrar:hover{border-color:var(--azul-claro);background:rgba(70,82,239,.2)}
.bv-cerrar svg{width:18px;height:18px}

/* El paso 2: el formulario. */
.bv-form h2{font-size:var(--t-xl);padding-right:44px}
.bv-form .bv-sub{margin:8px 0 16px}
.bv-campo{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.bv-campo > span{font-size:var(--t-xs);font-weight:700;color:var(--texto-2)}
.bv-campo input{background:rgba(12,12,62,.6);border:1px solid var(--borde);
  border-radius:11px;padding:12px 14px;color:var(--texto);font:inherit;font-size:var(--t-md)}
.bv-campo input::placeholder{color:#8d93b8}
.bv-campo input:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(70,82,239,.24)}
.bv-campo input.mal{border-color:var(--rojo)}
.bv-casilla{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  font-size:var(--t-xs);line-height:1.45;margin:4px 0 10px}
.bv-casilla input{width:18px;height:18px;margin-top:1px;flex:0 0 auto;
  accent-color:var(--azul);cursor:pointer}
.bv-casilla.mal span{color:#ff9b9d}
.bv-casilla b{color:var(--texto)}
.bv-menores{font-size:var(--t-2xs);color:var(--texto-2);margin:0 0 14px}
.bv-menores a{color:var(--azul-claro)}
.bv-error{font-size:var(--t-xs);color:#ff9b9d;margin:10px 0 0}
.bv-error:empty{display:none}
.bv-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* El paso 3: listo. */
.bv-listo .bv-cifra{font-size:var(--t-4xl)}
.bv-listo p{color:var(--texto-2);font-size:var(--t-sm);margin:10px 0 0}
.bv-listo p b{color:var(--texto)}
.bv-listo .boton{margin-top:22px}

/* Una sola entrada, la de la ventana, y un cambio suave entre pasos. */
@media (prefers-reduced-motion:no-preference){
  .bv-telon.entra{animation:bv-telon .32s ease-out both}
  .bv-telon.entra .bv{animation:bv-sube .46s cubic-bezier(.16,1,.3,1) both}
  .bv-paso{animation:bv-paso .28s cubic-bezier(.16,1,.3,1) both}
}
@keyframes bv-telon{from{opacity:0}}
@keyframes bv-sube{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes bv-paso{from{opacity:0;transform:translateX(10px)}}

/* El celular: una hoja que sube desde abajo, con la botella pequeña al lado del texto
   en vez de ocupar media pantalla. Nunca más alta que el 88 % de la pantalla. */
@media (max-width:640px){
  .bv-telon{place-items:end center;padding:0}
  .bv{grid-template-columns:1fr;border-radius:20px 20px 0 0;border-bottom:0;
    max-height:88dvh;overflow:auto}
  .bv-arte{padding:22px 20px 10px;background:none;place-items:start;justify-items:start}
  .bv-arte img{width:58px;filter:none}
  .bv-cuerpo{padding:6px 20px calc(22px + env(safe-area-inset-bottom));min-height:0}
  .bv h2{font-size:var(--t-xl)}
  .bv-cifra{font-size:3.2rem;margin:10px 0 2px}
  .bv-cerrar{top:14px;right:14px;width:44px;height:44px}
  .bv-form .bv-arte{display:none}
  .bv-form .bv-cuerpo{padding-top:24px}
  .bv-form h2{padding-right:52px}
  @media (prefers-reduced-motion:no-preference){
    .bv-telon.entra .bv{animation-name:bv-hoja}
  }
}
@keyframes bv-hoja{from{transform:translateY(100%)}}

/* Con movimiento reducido no sube ni se desliza: aparece con un fundido corto, que no
   mueve nada pero tampoco sale de golpe. */
@media (prefers-reduced-motion:reduce){
  .bv-telon.entra,.bv-telon.entra .bv{animation:bv-telon .28s ease-out both !important}
  .bv-paso{animation:bv-telon .2s ease-out both !important}
}

/* ── La pestañita ────────────────────────────────
   Lo que queda al cerrar la ventana sin reclamar el código. Pequeña y quieta en una
   esquina: no tapa nada, no se mueve sola, y abre el formulario directo.
   En el computador va abajo a la izquierda (abajo al centro salen los avisos y a la
   derecha el carrito). En el celular va pegada al borde izquierdo, un poco por debajo
   de la mitad, lejos de los botones de abajo. */
.bv-pestana{position:fixed;left:18px;bottom:22px;z-index:60;display:flex;align-items:center}
.bv-pestana-abrir{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:inherit;font-size:var(--t-sm);font-weight:800;color:#fff;line-height:1;
  padding:11px 16px 11px 14px;border:1px solid rgba(162,184,243,.35);border-radius:99px;
  background:linear-gradient(135deg,var(--azul),var(--azul-hondo));
  box-shadow:0 10px 26px rgba(20,16,70,.55);
  transition:transform var(--suave) var(--curva),box-shadow var(--suave) var(--curva)}
.bv-pestana-abrir span{font-size:1.1em}
.bv-pestana-abrir:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(70,82,239,.45)}
.bv-pestana-abrir:active{transform:scale(.97)}
.bv-pestana-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;padding:0;
  background:var(--superficie);color:var(--texto-2);border:1px solid var(--borde);
  transition:color var(--suave) var(--curva),border-color var(--suave) var(--curva)}
.bv-pestana-x svg{width:11px;height:11px}
.bv-pestana-x:hover{color:var(--texto);border-color:var(--azul-claro)}
.bv-pestana :focus-visible{outline:2px solid var(--hielo);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .bv-pestana{animation:bv-pestana-entra .42s cubic-bezier(.16,1,.3,1) both}
}
@keyframes bv-pestana-entra{from{opacity:0;transform:translateX(-14px)}}
@media (max-width:640px){
  .bv-pestana{left:0;bottom:auto;top:62%}
  /* Angosta y de pie, pegada al borde: así ocupa lo que el margen de la página y no
     tapa la tarjeta de al lado. */
  .bv-pestana-abrir{flex-direction:column;gap:4px;border-radius:0 12px 12px 0;border-left:0;
    padding:9px 8px 9px 6px;font-size:var(--t-2xs)}
  .bv-pestana-x{top:-11px;right:-11px;width:22px;height:22px}
}

/* ── En la página de pago ────────────────────────
   Una línea bajo «¿Tienes un código?» para quien todavía no pidió el suyo. */
.bv-en-pago{font-size:var(--t-xs);color:var(--texto-2);margin:8px 0 0}
.bv-en-pago[hidden]{display:none}
.bv-en-pago button{font:inherit;font-weight:700;color:var(--azul-claro);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bv-en-pago button:hover{color:var(--hielo)}