/* ===========================================================================
   flotantes.css — botones de contacto anclados abajo a la derecha
   ===========================================================================
   Van sobre el contenido pero por debajo de los modales de Bootstrap
   (z-index 1050), asi que se quedan en 1040.
   =========================================================================== */

.jc-flot {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jc-flot-btn {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(20, 15, 60, .22);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;

    /* Entran solas al cargar, una despues de la otra. Va con backwards y NO con
       forwards a proposito: el estado normal del boton es visible, y la animacion
       solo presta el estado inicial. Asi, si el navegador no llega a animar, el
       boton igual se ve; con forwards se quedaba invisible. */
    animation: jc-flot-entra .38s ease .5s backwards;
}

.jc-flot-btn:nth-child(2) { animation-delay: .62s; }

/* La opacidad NO entra aqui a proposito. Si el navegador no llega a correr la
   animacion, lo peor que puede pasar es que el boton quede unos pixeles mas
   abajo; nunca que se quede invisible, que es lo que pasaba antes. */
@keyframes jc-flot-entra {
    from { transform: translateY(14px) scale(.85); }
    to   { transform: translateY(0)    scale(1); }
}

.jc-flot-btn:hover,
.jc-flot-btn:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 15, 60, .28);
    color: #fff;
}

.jc-flot-btn:focus-visible {
    outline: 3px solid rgba(124, 58, 237, .35);
    outline-offset: 3px;
}

.jc-flot-btn svg { width: 26px; height: 26px; }

.jc-flot-btn.es-wa { background: #25d366; }
.jc-flot-btn.es-wa:hover { filter: brightness(1.06); }

.jc-flot-btn.es-jc { background: #7c3aed; }
.jc-flot-btn.es-jc:hover { background: #6d28d9; }

/* ---------- la etiquetita que sale al pasar el cursor ---------- */
.jc-flot-tip {
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: #1f1b3d;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 9px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.jc-flot-tip::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #1f1b3d;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 1px;
}

.jc-flot-btn:hover .jc-flot-tip,
.jc-flot-btn:focus-visible .jc-flot-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---------- en el celular: mas chicos y sin etiqueta ---------- */
@media (max-width: 575px) {
    .jc-flot { right: 14px; bottom: 14px; gap: 10px; }
    .jc-flot-btn { width: 46px; height: 46px; }
    .jc-flot-btn svg { width: 23px; height: 23px; }
    .jc-flot-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .jc-flot-btn { animation: none; }
    .jc-flot-btn:hover, .jc-flot-btn:focus-visible { transform: none; }
    .jc-flot-tip { transition: none; }
}

/* El morado es <button>, no enlace: hay que quitarle lo que trae por defecto */
.jc-flot-btn {
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

/* los dos iconos se apilan y se alternan segun el chat este abierto */
.jc-flot-btn .jc-ico-chat,
.jc-flot-btn .jc-ico-x {
    grid-area: 1 / 1;
    transition: opacity .16s ease, transform .16s ease;
}

.jc-flot-btn .jc-ico-x { opacity: 0; transform: rotate(-45deg) scale(.7); }

.jc-flot-btn.es-cerrar .jc-ico-chat { opacity: 0; transform: rotate(45deg) scale(.7); }
.jc-flot-btn.es-cerrar .jc-ico-x { opacity: 1; transform: none; }

/* con el chat abierto la etiquetita estorba */
.jc-flot-btn.es-cerrar .jc-flot-tip { display: none; }

/* Con el chat abierto los flotantes desaparecen: el panel ocupa ese rincon.
   Se cierra desde el boton de la cabecera del chat o con Escape. */
.jc-flot {
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.jc-flot.se-esconde {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.8);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}