@layer organisms {
  /* Columna flotante de contacto y redes: vidrio, siempre visible abajo a la derecha */
  .dock {
    position: fixed;
    inset-block-end: max(var(--glass-gap), env(safe-area-inset-bottom));
    inset-inline-end: var(--glass-gap);
    z-index: 40;
    padding: 0.3125rem;
    border-radius: var(--radius-pill);
  }

  .dock__menu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dock__link {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: 50%;
    color: var(--ink);
    transition: background-color 0.2s, color 0.2s;

    & svg { width: 22px; height: 22px; }

    &:hover, &:focus-visible { background: rgb(255 255 255 / 0.85); color: var(--accent); }

    /* Etiqueta a la izquierda del ícono al pasar el cursor o con teclado */
    &::before {
      content: attr(data-label);
      position: absolute;
      inset-inline-end: calc(100% + 0.75rem);
      padding: 0.375rem 0.75rem;
      border-radius: var(--radius-pill);
      background: var(--ink);
      color: #fff;
      font-size: 0.8125rem;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      translate: 0.25rem 0;
      pointer-events: none;
      transition: opacity 0.2s, translate 0.2s;
    }

    &:hover::before, &:focus-visible::before { opacity: 1; translate: 0 0; }
  }

  /* WhatsApp, el canal principal, con el color de acento */
  .dock li:first-child .dock__link {
    background: var(--accent);
    color: #fff;

    &:hover, &:focus-visible { background: var(--accent-strong); color: #fff; }
  }

  @media (max-width: 47.99rem) {
    .dock__link {
      width: 40px;
      height: 40px;

      & svg { width: 20px; height: 20px; }
    }
  }
}