/* ══════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE CONTACTO
   Botón principal fijo abajo a la derecha que, al recibir
   hover (ratón), foco (teclado) o la clase .abierto (táctil,
   ver js/script.js), despliega sus opciones en arco.
   ══════════════════════════════════════════════════════ */

#boton-contacto-placeholder {
    display: contents;
}

.fab-contacto {
    --fab-verde: #2F5D50;
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
}

/* Puente de hover: cubre el hueco entre el botón principal y las
   opciones para que el cursor no "pierda" el :hover al viajar
   entre ambos. En reposo no ocupa espacio ni bloquea clics. */
.fab-contacto::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
}

@media (hover: hover) {
    .fab-contacto:hover::before {
        inset: -75px;
        pointer-events: auto;
    }
}

.fab-contacto:focus-within::before,
.fab-contacto.abierto::before {
    inset: -75px;
    pointer-events: auto;
}

/* ── Botón principal ─────────────────────────────────── */

.fab-principal {
    position: relative;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background-color: var(--fab-verde);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(47, 93, 80, 0.45);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

@media (hover: hover) {
    .fab-contacto:hover .fab-principal {
        transform: scale(1.12);
        box-shadow: 0 8px 30px rgba(47, 93, 80, 0.60);
    }
}

.fab-contacto.abierto .fab-principal {
    transform: scale(1.12);
    box-shadow: 0 8px 30px rgba(47, 93, 80, 0.60);
}

.fab-icono {
    position: relative;
    z-index: 1;
    color: var(--fab-verde);
    /* currentColor: los 3 puntos del bocadillo toman este verde,
       así el color vive en un solo lugar en vez de repetirse
       también en el SVG (ver components/botonContacto.html). */
}

.fab-pulso {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--fab-verde);
    opacity: 0.35;
    animation: fab-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes fab-ping {
    0% {
        transform: scale(1);
        opacity: 0.35;
    }

    75% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* ── Opciones (WhatsApp / Instagram) ─────────────────────
   Cada <li> define su propio --angulo; salen despedidas del
   centro del botón principal a lo largo de ese ángulo con el
   truco rotate → translateX → contra-rotate, que las coloca
   en el arco sin inclinar el icono. Añadir un canal nuevo es
   otro <li> con su --angulo — pero si ese canal usa un SVG
   inline, hay que cerrarlo con el mismo truco documentado en
   botonContacto.html (espacio antes del corchete de cierre)
   para no reabrir el bug de truncado de Live Server. */

.fab-opciones {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fab-opcion {
    --radio: 78px;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin: 6px;
    /* centra el círculo de 46px dentro del hueco de 58px del principal */
    opacity: 0;
    transform: rotate(var(--angulo)) translateX(0) rotate(calc(var(--angulo) * -1)) scale(0.4);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .fab-contacto:hover .fab-opcion {
        opacity: 1;
        pointer-events: auto;
        transform: rotate(var(--angulo)) translateX(var(--radio)) rotate(calc(var(--angulo) * -1)) scale(1);
    }
}

.fab-contacto:focus-within .fab-opcion,
.fab-contacto.abierto .fab-opcion {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(var(--angulo)) translateX(var(--radio)) rotate(calc(var(--angulo) * -1)) scale(1);
}

/* Salida escalonada: Instagram (más lejos del flujo natural) un pelín detrás de WhatsApp */
.fab-opcion--wa {
    transition-delay: 0s;
}

.fab-opcion--ig {
    transition-delay: 0.05s;
}

.fab-opcion a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.fab-opcion a:hover {
    transform: scale(1.1);
}

.fab-opcion--wa a {
    background-color: #25D366;
}

.fab-opcion--ig a {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}

/* ── Accesibilidad de movimiento ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .fab-pulso {
        animation: none;
    }

    .fab-principal,
    .fab-opcion,
    .fab-opcion a {
        transition: none;
    }
}

/* ── Móvil ──────────────────────────────────────────────── */

@media (max-width: 640px) {
    .fab-opcion {
        --radio: 66px;
        width: 42px;
        height: 42px;
    }
}