/* ── Botón flotante de contacto ──────────────────────────────────────
   Un botón de WhatsApp abajo a la derecha que, al tocarlo, despliega dos
   caminos: hablar por WhatsApp con una persona, o abrir el asistente del
   sitio.

   POR QUE EXISTE.
   Antes ahí abajo estaba directamente el botón de Botpress, así que la
   única puerta de entrada era el bot. Quien quería escribirle a una
   persona tenía que pasar por él primero. Ahora la elección es explícita.

   POR QUE EL LANZADOR ES VERDE Y CON EL LOGO DE WHATSAPP.
   Es el ícono que la gente ya reconoce como "acá se habla con alguien".
   El verde no es de la paleta de Joik a propósito: no está haciendo de
   marca, está haciendo de señal.

   El bot NO se carga hasta que alguien lo elige (ver joik-fab.js), asi
   que esta hoja mas su JS son todo lo que pesa el boton en una pagina
   donde nadie lo toque. */

.joik-fab {
    /* 64x64 anclado a 24px del borde, a proposito: es exactamente la
       geometria que tenia el FAB de Botpress, y el CSS del home ya espeja
       esos valores para poner "volver arriba" del otro lado (ver la nota
       en index.html). Manteniendola, ese espejo sigue valiendo sin tener
       que medir nada por JavaScript. */
    position: fixed;
    right: 24px;
    /* 55px, no 24: es la altura a la que se apoya "volver arriba" en
       escritorio. Ese boton usa bottom:35px mas un translateY(-20px)
       (css/style.css, regla .to-top-arrow.show), asi que visualmente queda
       a 55px del borde. Abajo de 880px los dos pasan a 24px, que es donde
       el CSS del home ya lo pone. */
    bottom: 55px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

/* ── Las dos opciones ─────────────────────────────────────────────── */

.joik-fab__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* Estado cerrado. Se usa visibility y no display:none para que la
       transición tenga de dónde salir, y para que el lector de pantalla
       no las anuncie mientras están escondidas. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.25s;
}

.joik-fab.is-open .joik-fab__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
}

.joik-fab__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0b1020;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(2, 20, 24, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* POR QUE ESTAN LISTADOS TODOS LOS ESTADOS DEL ENLACE.
   El tema base trae "a:hover,a:visited,a:active,a:focus { color:#f7f7f7 }".
   Eso tiene la MISMA especificidad que una sola clase (0,1,0) y se declara
   despues, asi que le gana a .joik-fab__opt. Resultado: apenas alguien hacia
   clic una vez en WhatsApp, el enlace quedaba ":visited" para siempre y su
   texto pasaba a casi blanco sobre la pastilla blanca -- invisible. El boton
   del asistente no sufria nada, porque es un <button> y no un <a>.
   Nombrando los estados, la regla sube a (0,2,0) y gana. Mismo refuerzo que
   ya usa el CTA del hero en index.html, por el mismo motivo. */
.joik-fab__opt,
.joik-fab__opt:link,
.joik-fab__opt:visited,
.joik-fab__opt:hover,
.joik-fab__opt:active,
.joik-fab__opt:focus {
    color: #0b1020;
    text-decoration: none;
}

/* Colgado de .is-open a proposito: mas abajo, ".joik-fab.is-open
   .joik-fab__opt" pone transform:none con la misma especificidad y se
   declara despues, asi que anulaba este desplazamiento. Las pastillas solo
   se pueden tocar con el menu abierto, asi que esta es su forma correcta. */
.joik-fab.is-open .joik-fab__opt:hover,
.joik-fab.is-open .joik-fab__opt:focus-visible {
    transform: translateX(-2px);
    box-shadow: 0 6px 20px rgba(2, 20, 24, 0.26);
}

/* El ícono de cada opción va en su propio círculo de color: es lo que
   distingue de un vistazo cuál lleva a una persona y cuál al asistente. */
.joik-fab__opt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
}

.joik-fab__opt-icon svg {
    width: 18px;
    height: 18px;
}

.joik-fab__opt--wa .joik-fab__opt-icon {
    background: #25d366;
}

.joik-fab__opt--bot .joik-fab__opt-icon {
    background: #01d1fe;
    color: #00343d;
}

/* Entrada escalonada: primero WhatsApp, que es la de arriba. */
.joik-fab__opt {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.15s ease;
}

.joik-fab.is-open .joik-fab__opt {
    opacity: 1;
    transform: none;
}

.joik-fab.is-open .joik-fab__opt:nth-child(1) { transition-delay: 0.04s; }
.joik-fab.is-open .joik-fab__opt:nth-child(2) { transition-delay: 0.1s; }

/* ── El lanzador ──────────────────────────────────────────────────── */

.joik-fab__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* DOS TAMANOS, copiados de "volver arriba" para que sean espejo.
       En escritorio ese boton mide 44px (.jk-pill-btn--icon-only en
       css/joik-components.css, sobre los 45px que trae la plantilla en
       style.css). Abajo de 880px el CSS del home lo lleva a 64px, y aca
       se hace lo mismo. Antes este iba a 64px siempre y en escritorio se
       veia bastante mas grande que su par. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Celeste de marca, no el verde de WhatsApp. Al desplegarse, el verde
       aparece donde corresponde: en el circulo de la opcion de WhatsApp.
       Asi el lanzador es "contacto" y el color distingue las dos salidas.

       EL GLIFO VA OSCURO, NO BLANCO. Blanco sobre #01d1fe da 1,82:1 de
       contraste y no llega al minimo de 3:1 que piden los iconos; en
       #00343d da 7,4:1. Es el mismo par que ya usa el circulo del bot. */
    background: #01d1fe;
    color: #00343d;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(1, 209, 254, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.joik-fab__toggle:hover,
.joik-fab__toggle:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 6px 22px rgba(1, 209, 254, 0.5);
}

.joik-fab__toggle svg {
    width: 22px;
    height: 22px;
}

/* Los dos íconos ocupan la misma celda y se cruzan girando: sin salto de
   tamaño y sin que uno empuje al otro. */
.joik-fab__toggle-icons {
    display: grid;
    place-items: center;
}

/* Cada icono va envuelto en un <span>, que por defecto es inline: el SVG se
   apoyaba en la linea de base del texto y quedaba corrido dentro del circulo.
   Con flex en el envoltorio y display:block en el SVG, el alto de linea deja
   de existir y el centrado es exacto. */
.joik-fab__toggle-icons > * {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.joik-fab__toggle svg,
.joik-fab__opt-icon svg {
    display: block;
}

.joik-fab__icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.joik-fab.is-open .joik-fab__icon-wa {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

.joik-fab.is-open .joik-fab__icon-close {
    opacity: 1;
    transform: none;
}

/* ── Pantalla chica ───────────────────────────────────────────────── */

/* ── Solo circulos, y el texto aparece al apuntar ────────────────────
   POR QUE VA DENTRO DE @media (hover: hover).
   En una pantalla tactil no existe el "pasar el cursor": el unico gesto es
   tocar, y tocar ya activa la opcion. Si el texto dependiera del hover, en
   celular quedarian dos circulos pelados -- uno con el logo de WhatsApp,
   que se reconoce, y otro con un robot, que no dice nada.
   Asi que en tactil las pastillas siguen mostrando el texto siempre, como
   hasta ahora, y este comportamiento aplica solo donde hay mouse.

   Se usa max-width y no display:none a proposito: el texto sigue en el
   documento, asi que un lector de pantalla lo lee igual y el enlace nunca
   se queda sin nombre.

   :focus-visible ademas de :hover, para que con teclado tambien se vea. */
@media (hover: hover) and (pointer: fine) {
    .joik-fab__opt {
        /* 6 + 32 + 6 = 44px: el mismo diametro que el lanzador. */
        padding: 6px;
        gap: 0;
    }

    .joik-fab__opt-texto {
        display: block;
        max-width: 0;
        margin-left: 0;
        padding-right: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            margin-left 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            padding-right 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s ease;
    }

    .joik-fab__opt:hover .joik-fab__opt-texto,
    .joik-fab__opt:focus-visible .joik-fab__opt-texto {
        max-width: 14rem;
        margin-left: 10px;
        padding-right: 10px;
        opacity: 1;
    }
}

@media only screen and (max-width: 880px) {
    .joik-fab {
        bottom: 24px;
    }

    .joik-fab__toggle {
        width: 64px;
        height: 64px;
    }

    .joik-fab__toggle svg {
        width: 30px;
        height: 30px;
    }
}

@media only screen and (max-width: 640px) {
    .joik-fab__opt {
        font-size: 0.85rem;
        padding: 9px 14px 9px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .joik-fab__opt-texto,
    .joik-fab__menu,
    .joik-fab__opt,
    .joik-fab__toggle,
    .joik-fab__toggle-icons > * {
        transition: none;
    }

    .joik-fab__toggle:hover,
    .joik-fab__toggle:focus-visible,
    .joik-fab.is-open .joik-fab__opt:hover,
    .joik-fab.is-open .joik-fab__opt:focus-visible {
        transform: none;
    }
}