/* ============ EASTER EGG: EL REY APUNTA AL BOTON DE PAGO ============
         Miguel pidio moverlo "del otro lado" y que "salga de un costado de la
         pantalla". Ahora entra DESLIZANDOSE desde el borde DERECHO, se queda
         debajo del boton y apunta hacia arriba, hacia "Finalizar compra".
         Se usa la pose de brazo levantado en las dos medidas: es la unica que
         senala el boton desde abajo. */
      /* ⚠️ EN FLUJO, NO ABSOLUTO. La version absoluta (top:100% del padre del
         boton) se veia bien en pruebas pero a Miguel NO le aparecia en su
         telefono: cualquier ancestro con overflow o un contenedor de altura
         fija lo recorta sin dejar rastro. Como bloque normal despues del boton
         no hay nada que lo pueda ocultar: ocupa su propio espacio. */
      .er_huevo_rey {
        display:block; width:100%;
        margin:.35rem 0 0 0;
        text-align:right;
        pointer-events:none;            /* decorativo: nunca estorba el clic */
        overflow:hidden; }
      .er_huevo_rey img {
        display:inline-block; width:96px; height:auto;
        margin-right:-4px;
        /* ⚠️ SIN drop-shadow. El recorte deja pixeles de alfa muy baja en el
           borde y la sombra se proyecta desde CADA UNO, lo que se percibia como
           un recuadro gris tenue alrededor del personaje. Sin sombra queda
           limpio; el personaje ya destaca por si solo sobre el fondo blanco. */
        animation:er_rey_entra_lado .8s cubic-bezier(.2,1.35,.45,1) both,
                  er_rey_insiste 3.2s ease-in-out 1.3s infinite; }

      /* entra desde FUERA de la pantalla, por la derecha */
      @keyframes er_rey_entra_lado {
        from { opacity:0; transform:translateX(120px); }
        to   { opacity:1; transform:translateX(0); } }
      @keyframes er_rey_insiste {
        0%,86%,100% { transform:translateY(0) rotate(0deg); }
        91%         { transform:translateY(-4px) rotate(-2deg); }
        96%         { transform:translateY(0) rotate(0deg); } }

      @media (max-width: 1199.98px) { .er_huevo_rey img { width:78px; } }
      @media (max-width: 380px)     { .er_huevo_rey img { width:66px; } }

      /* ============ EL BOTON DE PAGO RESPONDE AL GESTO ============ */
      .er_pago_vivo {
        position:relative; overflow:hidden;
        animation:er_pago_late 3.2s ease-in-out 1.8s infinite; }
      .er_pago_vivo::after {
        content:''; position:absolute; top:0; left:-55%;
        width:40%; height:100%;
        background:linear-gradient(100deg, transparent,
                   rgba(255,255,255,.38), transparent);
        transform:skewX(-18deg);
        pointer-events:none;         /* el destello NUNCA se come el clic */
        animation:er_pago_brillo 3.2s ease-in-out 1.8s infinite; }
      @keyframes er_pago_late {
        0%,82%,100% { transform:scale(1);
                      box-shadow:0 4px 14px rgba(55,26,148,.22); }
        88%         { transform:scale(1.028);
                      box-shadow:0 9px 24px rgba(55,26,148,.40); }
        94%         { transform:scale(1.008); } }
      @keyframes er_pago_brillo {
        0%,70%   { left:-55%; }
        95%,100% { left:120%; } }
      .er_pago_vivo:hover { animation:none; transform:translateY(-1px); }
      .er_pago_vivo:hover::after { animation:none; opacity:0; }

      /* ============ CARRITO: PILDORA DE EMBALAJE Y CANTIDAD ============
         La pildora venia radio 999px, morado solido y amarillo peso 900 -- la
         version chillona que ya se habia calmado en la tarjeta de producto.
         Se alinea con el chip refinado: blanco, tinta morada, radio 6px. */
      .o_cart_product .badge {
        border-radius:6px !important;
        background:#f4f2fa !important;
        color:#490AA0 !important;
        border:1px solid #e2dcf3 !important;
        font-size:.62rem !important;
        font-weight:700 !important;
        letter-spacing:.08em !important;
        text-transform:uppercase !important;
        padding:.26rem .5rem !important; }

      /* el selector de cantidad: mismo lenguaje de 10px del resto */
      .o_cart_product .css_quantity {
        border:1px solid #e7e4f0 !important;
        border-radius:10px !important;
        overflow:hidden; background:#fff; }
      .o_cart_product .css_quantity .btn,
      .o_cart_product .css_quantity a {
        border:0 !important; border-radius:0 !important;
        color:#490AA0 !important; background:transparent !important; }
      .o_cart_product .css_quantity .btn:hover,
      .o_cart_product .css_quantity a:hover { background:#f4f2fa !important; }
      .o_cart_product .css_quantity input {
        border:0 !important; box-shadow:none !important;
        font-weight:700 !important; color:#141018 !important;
        font-size:.88rem !important;
        max-width:52px !important; text-align:center !important;
        padding:0 !important; }
      /* mas compacto: la pastilla era enorme para tres caracteres */
      .o_cart_product .css_quantity {
        width:fit-content !important; max-width:150px; }
      .o_cart_product .css_quantity .btn,
      .o_cart_product .css_quantity a {
        width:34px !important; min-width:34px !important;
        padding:.28rem 0 !important; font-size:.95rem !important; }

      @media (prefers-reduced-motion: reduce) {
        .er_huevo_rey, .er_huevo_rey img,
        .er_pago_vivo, .er_pago_vivo::after { animation:none; }
      }